CUSTOM_ELEMENTS_SCHEMA ที่เพิ่มไปยัง NgModule.schemas ยังคงแสดงข้อผิดพลาด

ฉันเพิ่งอัปเกรดจาก 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 { }

ฉันสร้างโมดูล wrapper ที่เรียกว่าโมดูล util ซึ่งนำเข้า HeaderModule:

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 ชั่วโมงที่ผ่านมาในการอัปเกรดเป็นเวอร์ชันนี้ ... )

แค่อยากจะเพิ่มอีกเล็กน้อยเกี่ยวกับเรื่องนี้

ด้วย Angular 2.0.0 รุ่นสุดท้าย (14 กันยายน 2016) หากคุณใช้แท็ก html ที่กำหนดเองระบบจะรายงานสิ่งTemplate parse errorsนั้น แท็กที่กำหนดเองเป็นแท็กที่คุณใช้ใน HTML ของคุณที่ไม่ได้เป็นหนึ่งในแท็กเหล่านี้

ดูเหมือนว่าschemas: [ CUSTOM_ELEMENTS_SCHEMA ]จะต้องเพิ่มบรรทัดในแต่ละองค์ประกอบที่คุณใช้แท็ก HTML ที่กำหนดเอง

แก้ไข:การschemasประกาศต้องอยู่ใน@NgModuleมัณฑนากร ตัวอย่างด้านล่างแสดงโมดูลที่กำหนดเองพร้อมส่วนประกอบที่กำหนดเองCustomComponentซึ่งอนุญาตให้แท็ก html ใด ๆ ในเทมเพลต html สำหรับส่วนประกอบนั้น

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

ที่นี่คุณสามารถใช้แท็ก HTML ใดก็ได้ที่คุณต้องการ

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

สิ่งนี้ได้รับการแก้ไขโดย:

ก) เพิ่มschemas: [ CUSTOM_ELEMENTS_SCHEMA ]ทุกองค์ประกอบหรือ

b) การเพิ่ม

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

และ

schemas: [
  CUSTOM_ELEMENTS_SCHEMA
],

ไปยังโมดูลของคุณ

นอกจากนี้ยังสามารถเกิดขึ้นเมื่อเรียกใช้การทดสอบหน่วยหากคุณกำลังทดสอบส่วนประกอบด้วยองค์ประกอบที่กำหนดเอง ในกรณีนั้นจำเป็นต้องเพิ่ม custom_elements_schema ลงใน testingModule ที่ได้รับการตั้งค่าที่จุดเริ่มต้นของไฟล์. spec.ts สำหรับคอมโพเนนต์นั้น นี่คือตัวอย่างของการเริ่มต้นการตั้งค่า 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({})ใน 'app.module.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.module.ts

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

LogoutComponent จำเป็นต้องส่งออก

dashboard.module.ts
นำเข้าAccountModuleในโมดูลที่เราต้องการใช้<app-logout> การนำเข้า {AccountModule} จาก 'util.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() {}
}

CUSTOM_ELEMENTS_SCHEMAผมไม่จำเป็นต้องนำเข้าและการใช้งาน
อย่างไรก็ตามมันไม่ทำงานเมื่อโหลด dashboard.module ขี้เกียจ
เมื่อใช้CUSTOM_ELEMENTS_SCHEMAในกรณีที่ขี้เกียจโหลดข้อผิดพลาดจะถูกระงับ แต่ไม่ได้เพิ่มคอมโพเนนต์ใน dom

ด้วยส่วนประกอบที่มี Angular Material ข้อผิดพลาดที่คล้ายกันเกิดขึ้นกับการทดสอบหน่วยของฉัน ตามคำตอบของ @Dan Stirling-Talbert ข้างต้นได้เพิ่มสิ่งนี้ลงในไฟล์ .spec คอมโพเนนต์ของฉันและข้อผิดพลาดถูกล้างจากการทดสอบหน่วย

Import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

จากนั้นเพิ่มสคีมาในคำสั่ง beforeEach () ที่สร้างขึ้น:

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

ข้อผิดพลาด Karma ของฉันคือ: ถ้า "mat-panel-title" เป็นเว็บคอมโพเนนต์ให้เพิ่ม "CUSTOM_ELEMENTS_SCHEMA" ใน "@ NgModule.schemas" ของคอมโพเนนต์นี้เพื่อระงับข้อความนี้

เพียงอ่านโพสต์นี้และตามเอกสาร 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.

ดังนั้นในกรณีที่มีใครพบปัญหานี้เมื่อคุณเพิ่ม CUSTOM_ELEMENTS_SCHEMA ลงใน NgModule ของคุณแล้วตรวจสอบให้แน่ใจว่าองค์ประกอบที่กำหนดเองใหม่ใด ๆ ที่คุณใช้มี 'เส้นประ' ในชื่อเช่น หรืออื่น ๆ

โพสต์นี้ค่อนข้างยาวและให้คำอธิบายโดยละเอียดเกี่ยวกับปัญหา

ปัญหา (ในกรณีของฉัน) เกิดขึ้นเมื่อคุณมีMulti Slot Content Projection

ดูการฉายภาพเนื้อหาสำหรับข้อมูลเพิ่มเติม

ตัวอย่างเช่นหากคุณมีส่วนประกอบที่มีลักษณะดังนี้:

ไฟล์ 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>

จากนั้นคุณจะได้รับข้อผิดพลาดในการแยกวิเคราะห์เทมเพลตที่ไม่ใช่องค์ประกอบเชิงมุมที่รู้จักและไม่มีความเป็นจริง - เป็นเพียงการอ้างอิงถึงเนื้อหา ng ในองค์ประกอบของคุณ:

จากนั้นการแก้ไขที่ง่ายที่สุดคือการเพิ่ม

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

... ไปยัง app.module.ts ของคุณ

แต่มีวิธีที่ง่ายและสะอาดสำหรับปัญหานี้ - แทนที่จะใช้ <my-component-header>เพื่อแทรก html ในสล็อตที่นั่นคุณสามารถใช้ชื่อคลาสสำหรับงานนี้ได้ดังนี้:

ไฟล์ 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>

ดังนั้น ... ไม่มีส่วนประกอบที่ไม่มีอยู่อีกต่อไปจึงไม่มีปัญหาในนั้นไม่มีข้อผิดพลาดไม่จำเป็นต้องใช้ CUSTOM_ELEMENTS_SCHEMA ใน app.module.ts

ดังนั้นหากคุณเป็นเหมือนฉันและไม่ต้องการเพิ่ม CUSTOM_ELEMENTS_SCHEMA ลงในโมดูล - การใช้ส่วนประกอบของคุณด้วยวิธีนี้จะไม่สร้างข้อผิดพลาดและมีความชัดเจนมากขึ้น

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับปัญหานี้ - https://github.com/angular/angular/issues/11251

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการฉายภาพเนื้อหาเชิงมุม - https://blog.angular-university.io/angular-ng-content/

คุณสามารถดูhttps://scotch.io/tutorials/angular-2-transclusion-using-ng-content

ฉันต้องการเพิ่มข้อมูลเพิ่มเติมหนึ่งชิ้นเนื่องจากคำตอบที่ยอมรับข้างต้นไม่ได้แก้ไขข้อผิดพลาดของฉันอย่างสมบูรณ์

ในสถานการณ์ของฉันฉันมีองค์ประกอบหลักซึ่งมีองค์ประกอบลูก และส่วนประกอบลูกนั้นยังมีส่วนประกอบอื่นด้วย

ดังนั้นไฟล์ข้อมูลจำเพาะขององค์ประกอบหลักของฉันจำเป็นต้องมีการประกาศขององค์ประกอบลูกเช่นเดียวกับส่วนประกอบของเด็ก ในที่สุดก็แก้ไขปัญหาให้ฉัน

ฉันคิดว่าคุณกำลังใช้โมดูลที่กำหนดเอง คุณสามารถลองทำสิ่งต่อไปนี้ คุณต้องเพิ่มสิ่งต่อไปนี้ในไฟล์your-module.module.ts :

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

ไม่ได้ผลสำหรับฉัน (ใช้ 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 { }

ฉันเพิ่งนำเข้าClarityModuleและมันสามารถแก้ปัญหาทั้งหมดได้ ให้มันลอง!

import { ClarityModule } from 'clarity-angular';

รวมโมดูลในการนำเข้าด้วย

imports: [ ClarityModule ],

แก้ไขปัญหานี้ในไฟล์ /app/app.module.ts

นำเข้าส่วนประกอบของคุณและประกาศ

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

@NgModule({
  declarations: [
    MyComponent,
  ]

อย่าลืมนำเข้าองค์ประกอบในอาร์เรย์การประกาศ

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

คุณใช้ webpack ... ถ้าใช่โปรดติดตั้ง

angular2-template-loader

และวางไว้

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