NgModule.schema에 CUSTOM_ELELENTS_SCHEMA가 추가되었지만 여전히 오류가 표시됨

NgModule.schema에 CUSTOM_ELELENTS_SCHEMA가 추가되었지만 여전히 오류가 표시됨

방금 Angular 2 rc4에서 rc6로 업그레이드했는데 문제가 있습니다.

콘솔에 다음 오류가 표시됩니다.

Unhandled Promise rejection: Template parse errors:
'cl-header' is not a known element:
1. If 'cl-header' is an Angular component, then verify that it is part of this module.
2. If 'cl-header' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<main>
    [ERROR ->]<cl-header>Loading Header...</cl-header>
    <div class="container-fluid">
      <cl-feedbackcontai"): AppComponent@1:4

다음은 내 머리글 구성 요소입니다.

import { Component } from '@angular/core';
import { Router } from '@angular/router';

// own service
import { AuthenticationService } from '../../../services/authentication/authentication.service.ts';

import '../../../../../public/css/styles.css';

@Component({
  selector: 'cl-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent { // more code here... }

내 머리글 모듈은 다음과 같습니다.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA }      from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule }      from '@angular/common';
import { FormsModule }      from '@angular/forms';

import { HeaderComponent }  from './../../../components/util_components/header/header.component.ts';

@NgModule({
    declarations: [ HeaderComponent ],
    bootstrap:    [ HeaderComponent ],
    imports: [ RouterModule, CommonModule, FormsModule ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class HeaderModule { }

헤더 모듈을 가져오는 util module이라는 래퍼 모듈을 만들었습니다.

import { NgModule }      from '@angular/core';

import {HeaderModule} from "./header/header.module";
// ...

@NgModule({
    declarations: [ ],
    bootstrap:    [ ],
    imports: [ HeaderModule]
})
export class UtilModule { }

AppModule에서 최종적으로 가져온 항목:

import { NgModule }      from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

import {UtilModule} from "./modules/util_modules/util.module";
import {RoutingModule} from "./modules/routing_modules/routing.module";

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [BrowserModule, UtilModule, RoutingModule]
})
export class AppModule { }

제가 이해하기로는 SCHEMA를 사용하여 오류 메시지의 지시사항을 따르고 있습니다.하지만 효과가 없는 것 같습니다.내가 뭘 잘못하고 있는 거지?(나는 지금 내가 보지 못하는 것이 명백한 것이 아니기를 바랍니다.이 버전으로 업그레이드하는 데 지난 6시간이 걸렸습니다...)

이 문제는 다음을 통해 해결됩니다.

추가schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 구성 요소 또는

추가

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

그리고.

schemas: [
  CUSTOM_ELEMENTS_SCHEMA
],

모듈로 이동합니다.

여기에 조금 더 추가하고 싶었습니다.

2 릴리스14일)에서는하면 "Angular 2.0.0" (2016년 9월 14일)"로 됩니다.Template parse errors사용자 지정 태그는 HTML에서 이러한 태그가 아닌 사용자 지정 태그입니다.

그 선처럼 보입니다.schemas: [ CUSTOM_ELEMENTS_SCHEMA ]사용자 지정 HTML 태그를 사용하는 각 구성 요소에 추가해야 합니다.

편집: 더schemas은 언선은다같아합니다야과음▁a합으로 .@NgModule아래 에서는 사용자 구성 요소가 있는 을 보여 줍니다.CustomComponent이를 통해 해당 구성 요소에 대한 HTML 템플릿의 모든 HTML 태그를 허용할 수 있습니다.

사용자 지정.vmdk.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CustomComponent } from './custom.component';

@NgModule({
  declarations: [ CustomComponent ],
  exports: [ CustomComponent ],
  imports: [ CommonModule ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class CustomModule {}

custom.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-custom-component',
  templateUrl: 'custom.component.html'
})
export class CustomComponent implements OnInit {
  constructor () {}
  ngOnInit () {}
}

custom.component.vmdk

여기서는 원하는 HTML 태그를 사용할 수 있습니다.

<div class="container">
  <boogey-man></boogey-man>
  <my-minion class="one-eyed">
    <job class="plumber"></job>
  </my-minion>
</div>

사용자 정의 요소를 사용하여 구성 요소를 테스트하는 경우 장치 테스트를 실행할 때도 이 문제가 발생할 수 있습니다.이 경우 custom_elements_schema를 해당 구성 요소의 .spec.ts 파일 시작 부분에 설정되는 testingModule에 추가해야 합니다.다음은 header.component.spec.ts 설정을 시작하는 방법의 예입니다.

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [PrizeAddComponent],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA
      ],
    })
      .compileComponents();
  }));

추다니합가을 아래에 합니다.@NgModule({})ts :'app.vmdk.ts'에서 을 수행합니다.

import {CUSTOM_ELEMENTS_SCHEMA} from `@angular/core`;

그리고 나서.

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

'app.module.ts'는 다음과 같습니다.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [],
  imports: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

저한테도 효과가 없었어요.나는 변했어요

CUSTOM_ELEMENTS_SCHEMA

위해서

NO_ERRORS_SCHEMA

이 기사에서 제안된 내용: https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

이제 효과가 있습니다.

util.component.ts

@Component({
    selector: 'app-logout',
    template: `<button class="btn btn-primary"(click)="logout()">Logout</button>`
})
export class LogoutComponent{}

util.sv.ts

@NgModule({
    imports: [...],
    exports: [
        LogoutComponent
    ],
    declarations: [LogoutComponent]
})
export class AccountModule{};

로그아웃 구성 요소를 내보내야 합니다.

dashboard.ts는.dashboard.ts
'util.module'에서 Import {AccountModule}을(를) 사용할 모듈로 가져오기;

@NgModule({
  imports: [
    CommonModule, AccountModule
  ],
  declarations: [DashboardComponent]
})
export class DashboardModule { }

dashboard.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  template: `<div><app-logout></app-logout></div>`
})
export class DashboardComponent implements OnInit {
  constructor() {}
  ngOnInit() {}
}

가져오기 및 사용할 필요가 없습니다.CUSTOM_ELEMENTS_SCHEMA.
그러나 dashboard.dash가 느리게 로드되면 작동하지 않습니다.
을 할 때CUSTOM_ELEMENTS_SCHEMA로드가 느릴 경우 오류가 억제되지만 구성 요소가 돔에 추가되지 않습니다.

Angular Material을 포함하는 구성 요소에서 유닛 테스트와 유사한 오류가 발생했습니다.위의 @Dan Stirling-Talbert의 답변에 따라, 이것을 내 component.spec 파일에 추가했고, 단위 테스트에서 오류가 제거되었습니다.

Import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

그런 다음 생성된 BeforeEach() 문에 스키마를 추가합니다.

beforeEach(asyn(() => {
    declarations: [ AboutComponent ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
.compileComponents();
}));

나의 카르마 오류는 다음과 같습니다.'mat-panel-title'이 웹 구성 요소인 경우 이 구성 요소의 '@NgModule.schema'에 'CUSTOM_ELEVENTS_SCHEMA'를 추가하여 이 메시지를 표시하지 않습니다.

이 게시물을 읽고 각진 문서 2개에 따라:

export CUSTOM_ELEMENTS_SCHEMA
Defines a schema that will allow:

any non-Angular elements with a - in their name,
any properties on elements with a - in their name which is the common rule for custom elements.

따라서 이 문제가 발생할 경우를 대비하여 NgModule에 CUSTOM_ELEVENTS_SCHEMA를 추가한 후 사용하는 새 사용자 지정 요소의 이름에 '대시'가 있는지 확인하십시오.

이것은 꽤 긴 게시물이고 문제에 대한 더 자세한 설명을 제공합니다.

문제는 다중 슬롯 콘텐츠 투영이 있을 때 발생합니다.

자세한 내용은 내용 투영을 참조하십시오.

예를 들어 다음과 같은 구성 요소가 있는 경우:

html 파일:

 <div>
  <span>
    <ng-content select="my-component-header">
      <!-- optional header slot here -->
    </ng-content>
  </span>

  <div class="my-component-content">
    <ng-content>
      <!-- content slot here -->
    </ng-content>
  </div>
</div>

ts 파일:

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss'],
})
export class MyComponent {    
}

다음과 같이 사용할 수 있습니다.

<my-component>
  <my-component-header>
    <!-- this is optional --> 
    <p>html content here</p>
  </my-component-header>


  <p>blabla content</p>
  <!-- other html -->
</my-component>

그리고 알려진 Angular 구성 요소가 아닌 템플릿 구문 분석 오류가 발생합니다. 사실은 그렇지 않습니다. 구성 요소의 ng-content에 대한 참조일 뿐입니다.

그리고 가장 간단한 해결책은 다음과 같습니다.

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

당신의 앱에.sys.ts.

---

하지만 이 문제에 대한 쉽고 깨끗한 접근법이 있습니다.<my-component-header>할 수 . 다음과 같은 작업에 클래스 이름을 사용할 수 있습니다.

html 파일:

 <div>
  <span>
    <ng-content select=".my-component-header">  // <--- Look Here :)
      <!-- optional header slot here -->
    </ng-content>
  </span>

  <div class="my-component-content">
    <ng-content>
      <!-- content slot here -->
    </ng-content>
  </div>
</div>

다음과 같이 사용할 수 있습니다.

<my-component>
  <span class="my-component-header">  // <--- Look Here :) 
     <!-- this is optional --> 
    <p>html content here</p>
  </span>


  <p>blabla content</p>
  <!-- other html -->
</my-component>

따라서... 존재하지 않는 구성 요소가 더 이상 없기 때문에 app.module.ts에 CUSTOM_ELEVENTS_SCHEMA가 필요 없고 오류도 없습니다.

따라서 저와 같았고 모듈에 CUSTOM_ELEVENTS_SCHEMA를 추가하고 싶지 않은 경우 - 구성 요소를 이렇게 사용하면 오류가 발생하지 않으며 더 명확합니다.

이 문제에 대한 자세한 내용은 https://github.com/angular/angular/issues/11251 을 참조하십시오.

Angular 컨텐츠 투영에 대한 자세한 내용은 https://blog.angular-university.io/angular-ng-content/ 을 참조하십시오.

https://scotch.io/tutorials/angular-2-transclusion-using-ng-content 도 보실 수 있습니다.

방금 가져왔습니다.ClarityModule그리고 그것은 모든 문제를 해결했습니다.한 번 해보세요!

import { ClarityModule } from 'clarity-angular';

또한 모듈을 가져오기에 포함합니다.

imports: [ ClarityModule ],

/app/app.sys.ts 파일에서 이 문제를 해결했습니다.

구성 요소 가져오기 및 선언

import { MyComponent } from './home-about-me/my.component';

@NgModule({
  declarations: [
    MyComponent,
  ]

AOT와 빌드 최적화 프로그램을 비활성화하면 적어도 빌드:

"buildOptimizer": false,
"aot": false,

위의 승인된 답변이 제 오류를 완전히 해결하지 못했기 때문에 한 가지 추가 정보를 추가하고 싶습니다.

내 시나리오에서는 하위 구성 요소를 포함하는 상위 구성 요소가 있습니다.그리고 그 하위 구성요소는 또 다른 구성요소를 포함합니다.

따라서 부모 구성 요소의 사양 파일에는 자식 구성 요소와 자식 구성 요소의 선언이 있어야 합니다.그것이 마침내 저에게 그 문제를 해결했습니다.

2.0.0을 사용하는 것은 저에게 효과가 없었습니다.제게 효과가 있었던 것은 RouterTestingModule을 대신 가져온 것입니다.

사양 파일에 있는 RouterTestingModule을 가져옴으로써 이 문제를 해결했습니다.

import {
    RouterTestingModule
} from '@angular/router/testing';

  beforeEach(() => {

        TestBed.configureTestingModule({
            providers: [
                App,
                AppState,
                Renderer,
                {provide: Router,  useClass: MockRouter }
            ],
            imports: [ RouterTestingModule ]
        });

    });

저는 다음을 살펴볼 필요가 있었습니다.

1. If 'cl-header' is an Angular component, then verify that it is part of this module.

이는 사용자의 구성 요소가 다음에 포함되지 않음을 의미합니다.app.module.ts파일을 가져온 다음 파일에 포함해야 합니다.declarations부분.

import { NgModule }      from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

import { UtilModule } from "./modules/util_modules/util.module";
import { RoutingModule } from "./modules/routing_modules/routing.module";

import { HeaderComponent } from "./app/components/header.component";

@NgModule({
    bootstrap: [AppComponent],
    declarations: [
        AppComponent,
        HeaderComponent
    ],
    imports: [BrowserModule, UtilModule, RoutingModule]
})
export class AppModule { }

당신은 커스텀 모듈을 사용하고 있는 것 같습니다.다음을 시도할 수 있습니다.다음을 your-module.module.ts 파일에 추가해야 합니다.

import { GridModule } from '@progress/kendo-angular-grid';
@NgModule({
  declarations: [ ],
  imports: [ CommonModule, GridModule ],
  exports: [ ],
})

유사한 문제가 발생했지만 구성 요소 이름(선택기 이름)에 철자가 틀린 것으로 나타났습니다.그래서 Angular는 모듈을 가져올 수 없습니다.

이 오류가 발생할 수 있는 또 다른 이유는 부트스트랩을 두 번 로드하는 것입니다. 즉, 먼저 npm install bootstrap, jquery, popper를 실행한 다음 CDN에서 복사하여 붙여넣기를 통해 추가하는 것입니다. (하나 또는 다른 하나만 수행하십시오.)

선언 배열의 구성 요소를 가져오십시오.

@NgModule({
  declarations: [ExampleComponent],
  imports: [
      CommonModule,
      ExampleRoutingModule,
      ReactiveFormsModule
  ]
})

웹팩을 사용하셨습니까?예인 경우 설치하십시오.

angular2-template-loader

그리고 그것을.

test: /\.ts$/,
   loaders: ['awesome-typescript-loader', 'angular2-template-loader']

언급URL : https://stackoverflow.com/questions/39428132/custom-elements-schema-added-to-ngmodule-schemas-still-showing-error