CUSTOM_ELEMENTS_SCHema được thêm vào NgModule.schemas vẫn hiển thị Lỗi

Tôi vừa nâng cấp từ Angular 2 RC4 lên RC6 và gặp khó khăn khi làm như vậy.

Tôi thấy lỗi sau trên bảng điều khiển của mình:

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

Đây là Thành phần Tiêu đề của tôi:

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... }

Đây là Module tiêu đề của tôi:

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 { }

Tôi đã tạo một mô-đun trình bao gọi là mô-đun ing nhập khẩu HeaderModule:

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

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

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

Cuối cùng được nhập bởi 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 { }

Theo hiểu biết của tôi, tôi đang làm theo hướng dẫn của thông báo lỗi bằng cách sử dụng SCHema để khắc phục lỗi. Nhưng nó dường như không hoạt động. Tôi đang làm gì sai? (Tôi hy vọng không có gì rõ ràng. Tôi chỉ không thấy vào lúc này. Đã dành 6 giờ qua để nâng cấp lên phiên bản này ...)

Chỉ muốn thêm một chút nữa về điều này.

Với bản phát hành cuối cùng 2.0.0 góc cạnh (tháng 14 năm 2016), nếu bạn sử dụng các thẻ html tùy chỉnh thì nó sẽ báo cáo điều đó Template parse errors. Thẻ tùy chỉnh là thẻ bạn sử dụng trong HTML không phải là một trong những thẻ này .

Nó trông giống như dòng schemas: [ CUSTOM_ELEMENTS_SCHEMA ] cần được thêm vào từng thành phần mà bạn đang sử dụng thẻ HTML tùy chỉnh.

EDIT: Các schemasnhu cầu khai được trong một@NgModule trang trí. Ví dụ dưới đây cho thấy một mô-đun tùy chỉnh với một thành phần tùy chỉnh CustomComponentcho phép bất kỳ thẻ html nào trong mẫu html cho một thành phần đó.

custom.module.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.html

Tại đây bạn có thể sử dụng bất kỳ thẻ HTML nào bạn muốn.

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

Điều này được cố định bởi:

a) thêm schemas: [ CUSTOM_ELEMENTS_SCHEMA ]vào mọi thành phần hoặc

b) thêm

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

và

schemas: [
  CUSTOM_ELEMENTS_SCHEMA
],

để mô-đun của bạn.

Điều này cũng có thể xuất hiện khi chạy thử nghiệm đơn vị nếu bạn đang thử nghiệm một thành phần với các yếu tố tùy chỉnh. Trong trường hợp đó, custom_elements_schema cần được thêm vào testsModule được thiết lập ở đầu tệp .spec.ts cho thành phần đó. Dưới đây là một ví dụ về cách thiết lập header.component.spec.ts sẽ bắt đầu:

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();
  }));

Thêm phần dưới đây @NgModule({})trong 'app.module.ts':

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

và sau đó

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

'App.module.ts' của bạn sẽ giống như thế này:

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

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

export class AppModule { }

Nó cũng không làm việc cho tôi. tôi đã thay đổi

CUSTOM_ELEMENTS_SCHEMA

cho

NO_ERRORS_SCHEMA

đã được đề xuất trong bài viết này: https://scotch.io/tutorials/angular-2-transinating-USE-ng-content

Bây giờ nó hoạt động.

produc.component.ts

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

produc.module.ts

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

LogoutComponent Nhu cầu được xuất

nhậpAccountModule<app-logout> dashboard.module.ts trong mô-đun nơi chúng tôi muốn sử dụng nhập {AccountModule} từ 'produc.module';

@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() {}
}

Tôi không bắt buộc phải nhập và sử dụng CUSTOM_ELEMENTS_SCHEMA.
tuy nhiên nó không hoạt động khi dashboard.module lười tải.
Khi sử dụng CUSTOM_ELEMENTS_SCHEMAtrong trường hợp tải chậm, lỗi được loại bỏ nhưng thành phần không được thêm vào dom.

Với các thành phần có chứa Vật liệu góc, một lỗi tương tự đã xảy ra với các bài kiểm tra đơn vị của tôi. Theo câu trả lời của @Dan Stirling-Talbert ở trên, đã thêm phần này vào tệp .spec thành phần của tôi và lỗi đã được xóa khỏi các bài kiểm tra đơn vị của tôi.

Import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

Sau đó thêm lược đồ trong câu lệnh beforeEach () được tạo:

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

Lỗi Karma của tôi là: Nếu 'mat-panel-title' là Thành phần Web thì hãy thêm 'CUSTOM_ELEMENTS_SCHema' vào '@ NgModule.schemas' của thành phần này để chặn thông báo này.

Chỉ cần đọc bài viết này và theo 2 tài liệu góc cạnh:

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.

Vì vậy, trong trường hợp bất kỳ ai gặp phải vấn đề này, một khi bạn đã thêm CUSTOM_ELEMENTS_SCHema vào NgModule của mình, hãy đảm bảo rằng bất kỳ yếu tố tùy chỉnh mới nào bạn sử dụng đều có 'dấu gạch ngang' trong tên của nó, vd. hay v.v.

Đây là bài viết khá dài và nó đưa ra một lời giải thích chi tiết hơn về vấn đề này.

Vấn đề (trong trường hợp của tôi) xảy ra khi bạn có Dự đoán nhiều nội dung

Xem thêm nội dung chiếu để biết thêm.

Ví dụ: Nếu bạn có một thành phần trông như thế này:

tập tin 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>

tập tin ts:

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

Và bạn muốn sử dụng nó như:

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


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

Và sau đó bạn nhận được các lỗi phân tích mẫu không phải là thành phần Angular đã biết và thực tế không phải vậy - nó chỉ là một tham chiếu đến một nội dung ng trong thành phần của bạn:

Và sau đó, cách khắc phục đơn giản nhất là thêm

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

... đến app.module.ts của bạn

Nhưng có một cách tiếp cận dễ dàng và rõ ràng cho vấn đề này - thay vì sử dụng <my-component-header> để chèn html vào vị trí đó - bạn có thể sử dụng tên lớp cho tác vụ này như sau:

tập tin 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>

Và bạn muốn sử dụng nó như:

<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>

Vì vậy, ... không còn thành phần nào không tồn tại nên không có vấn đề gì trong đó, không có lỗi, không cần CUSTOM_ELEMENTS_SCHema trong app.module.ts

Vì vậy, nếu bạn giống như tôi và không muốn thêm CUSTOM_ELEMENTS_SCHema vào mô-đun - sử dụng thành phần của bạn theo cách này sẽ không tạo ra lỗi và rõ ràng hơn.

Để biết thêm thông tin về vấn đề này - https://github.com/angular/angular/issues/11251

Để biết thêm thông tin về phép chiếu nội dung góc - https://blog.angular-university.io/angular-ng-content/

Bạn cũng có thể xem https://scotch.io/tutorials/angular-2-transinating-USE-ng-content

Tôi muốn thêm một thông tin bổ sung vì câu trả lời được chấp nhận ở trên không khắc phục hoàn toàn lỗi của tôi.

Trong kịch bản của tôi, tôi có một thành phần cha mẹ, chứa một thành phần con. Và thành phần con đó cũng chứa một thành phần khác.

Vì vậy, tập tin đặc tả của thành phần cha mẹ tôi cần phải có phần khai báo của thành phần con, C ASNG NHƯ LÀ THÀNH PHẦN TRẺ CỦA TRẺ. Điều đó cuối cùng đã khắc phục vấn đề cho tôi.

Tôi nghĩ rằng bạn đang sử dụng một mô-đun tùy chỉnh. Bạn có thể thử như sau. Bạn cần thêm phần sau vào tệp your-module.module.ts :

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

Điều đó không làm việc cho tôi (sử dụng 2.0.0). Điều làm việc cho tôi là nhập RouterTestingModule thay thế.

Tôi đã giải quyết điều này bằng cách nhập RouterTestingModule trong tệp spec.

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

  beforeEach(() => {

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

    });

Đối với tôi, tôi cần phải nhìn vào:

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

Điều này có nghĩa là thành phần của bạn không được bao gồm trong app.module.ts. Hãy chắc chắn rằng nó được nhập khẩu và sau đó được bao gồm trong declarationsphần.

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 { }

Tôi chỉ cần nhập khẩu ClarityModulevà nó đã giải quyết tất cả các vấn đề. Hãy thử một lần!

import { ClarityModule } from 'clarity-angular';

Ngoài ra, bao gồm các mô-đun trong nhập khẩu.

imports: [ ClarityModule ],

đã giải quyết vấn đề này trong tệp /app/app.module.ts

nhập thành phần của bạn và khai báo nó

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

@NgModule({
  declarations: [
    MyComponent,
  ]

Bạn đã sử dụng gói web ... nếu có, vui lòng cài đặt

angular2-template-loader

và đặt nó

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