CUSTOM_ELEMENTS_SCHEMA ditambahkan ke NgModule.schemas masih menampilkan Kesalahan

Saya baru saja memutakhirkan dari Angular 2 rc4 ke rc6 dan mengalami kesulitan melakukannya.

Saya melihat kesalahan berikut di konsol saya:

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

Berikut adalah Komponen Header saya:

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

Inilah Modul Header saya:

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

Saya membuat modul pembungkus yang disebut modul util yang mengimpor HeaderModule:

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

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

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

Yang akhirnya diimpor oleh 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 { }

Untuk pemahaman saya, saya mengikuti instruksi pesan kesalahan menggunakan SCHEMA untuk mengatasi kesalahan. Tapi sepertinya tidak berhasil. Apa yang saya lakukan salah? (Saya harap tidak ada yang jelas saya tidak melihat saat ini. Telah menghabiskan 6 jam terakhir untuk meningkatkan versi ini ...)

Hanya ingin menambahkan sedikit lebih banyak tentang ini.

Dengan rilis akhir 2.0.0 bersudut baru (14 September 2016), jika Anda menggunakan tag html khusus maka akan melaporkannya Template parse errors. Tag khusus adalah tag yang Anda gunakan dalam HTML Anda yang bukan salah satu dari tag ini .

Sepertinya baris schemas: [ CUSTOM_ELEMENTS_SCHEMA ]perlu ditambahkan ke setiap komponen tempat Anda menggunakan tag HTML khusus.

EDIT: The schemasdeklarasi perlu di @NgModuledekorator. Contoh di bawah ini menunjukkan modul khusus dengan komponen khusus CustomComponentyang memungkinkan tag html apa pun di templat html untuk satu komponen itu.

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

Di sini Anda dapat menggunakan tag HTML apa pun yang Anda inginkan.

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

Ini diperbaiki oleh:

a) menambahkan schemas: [ CUSTOM_ELEMENTS_SCHEMA ]ke setiap komponen atau

b) menambahkan

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

dan

schemas: [
  CUSTOM_ELEMENTS_SCHEMA
],

ke modul Anda.

Ini juga dapat muncul saat menjalankan pengujian unit jika Anda menguji komponen dengan elemen khusus. Dalam hal itu custom_elements_schema perlu ditambahkan ke testingModule yang mendapatkan pengaturan di awal file .spec.ts untuk komponen itu. Berikut adalah contoh bagaimana pengaturan header.component.spec.ts akan dimulai:

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

Tambahkan yang berikut @NgModule({})di bawah 'app.module.ts':

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

lalu

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

'App.module.ts' Anda akan terlihat seperti ini:

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

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

export class AppModule { }

Itu juga tidak berhasil untuk saya. aku berubah

CUSTOM_ELEMENTS_SCHEMA

untuk

NO_ERRORS_SCHEMA

yang disarankan dalam artikel ini: https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Sekarang berhasil.

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

imporAccountModule<app-logout> dashboard.module.ts dalam modul tempat kami ingin menggunakan impor {AccountModule} dari '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() {}
}

Saya tidak perlu mengimpor dan menggunakan CUSTOM_ELEMENTS_SCHEMA.
namun tidak berfungsi saat dashboard.module dimuat dengan malas.
Saat menggunakan CUSTOM_ELEMENTS_SCHEMAdalam kasus pemuatan malas, kesalahan ditekan tetapi komponen tidak ditambahkan ke dom.

Dengan komponen yang mengandung Bahan Angular, kesalahan yang sama muncul dengan tes unit saya. Sesuai jawaban @Dan Stirling-Talbert di atas, menambahkan ini ke file komponen .spec saya dan kesalahan dihapus dari pengujian unit saya.

Import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

Kemudian tambahkan skema dalam pernyataan beforeEach () yang dihasilkan:

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

Kesalahan Karma saya adalah: Jika 'mat-panel-title' adalah Komponen Web kemudian tambahkan 'CUSTOM_ELEMENTS_SCHEMA' ke '@ NgModule.schemas' dari komponen ini untuk menekan pesan ini.

Baca saja pos ini dan sesuai dengan sudut 2 dokumen:

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.

Jadi kalau-kalau ada yang mengalami masalah ini, setelah Anda menambahkan CUSTOM_ELEMENTS_SCHEMA ke NgModule Anda, pastikan bahwa elemen kustom baru apa pun yang Anda gunakan memiliki 'tanda hubung' dalam namanya, misalnya. atau dll.

Ini posting yang agak panjang dan memberikan penjelasan yang lebih rinci tentang masalah ini.

Masalahnya (dalam kasus saya) muncul ketika Anda memiliki Proyeksi Konten Multi Slot

Lihat juga proyeksi konten untuk info lebih lanjut.

Misalnya Jika Anda memiliki komponen yang terlihat seperti ini:

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

file ts:

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

Dan Anda ingin menggunakannya seperti:

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


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

Dan kemudian Anda mendapatkan kesalahan parse templat yang bukan komponen Angular yang diketahui dan faktanya tidak - itu hanya referensi ke konten ng di komponen Anda:

Dan kemudian perbaikan paling sederhana adalah menambahkan

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

... ke app.module.ts Anda

Tetapi ada pendekatan yang mudah dan bersih untuk masalah ini - alih-alih menggunakan <my-component-header>untuk memasukkan html di slot di sana - Anda dapat menggunakan nama kelas untuk tugas ini seperti ini:

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

Dan Anda ingin menggunakannya seperti:

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

Jadi ... tidak ada lagi komponen yang tidak ada sehingga tidak ada masalah di dalamnya, tidak ada kesalahan, tidak perlu untuk CUSTOM_ELEMENTS_SCHEMA di app.module.ts

Jadi Jika Anda seperti saya dan tidak ingin menambahkan CUSTOM_ELEMENTS_SCHEMA ke modul - menggunakan komponen Anda dengan cara ini tidak menghasilkan kesalahan dan lebih jelas.

Untuk info lebih lanjut tentang masalah ini - https://github.com/angular/angular/issues/11251

Untuk info lebih lanjut tentang proyeksi konten sudut - https://blog.angular-university.io/angular-ng-content/

Anda juga dapat melihat https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Saya ingin menambahkan satu informasi tambahan karena jawaban yang diterima di atas tidak memperbaiki kesalahan saya sepenuhnya.

Dalam skenario saya, saya memiliki komponen induk, yang menampung komponen anak. Dan komponen anak itu juga mengandung komponen lain.

Jadi, file spesifikasi komponen orang tua saya harus memiliki deklarasi komponen anak, SERTA KOMPONEN ANAK. Itu akhirnya memperbaiki masalah bagi saya.

Saya pikir Anda menggunakan modul khusus. Anda dapat mencoba yang berikut ini. Anda perlu menambahkan yang berikut ke file your-module.module.ts :

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

Itu tidak berhasil untuk saya (menggunakan 2.0.0). Yang berhasil bagi saya adalah mengimpor RouterTestingModule sebagai gantinya.

Saya menyelesaikan ini dengan mengimpor RouterTestingModule dalam file spesifikasi.

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

  beforeEach(() => {

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

    });

Bagi saya, saya perlu melihat:

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

Ini berarti bahwa komponen Anda tidak termasuk dalam app.module.ts. Pastikan itu diimpor dan kemudian dimasukkan di declarationsbagian ini.

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

Saya baru saja mengimpor ClarityModuledan menyelesaikan semua masalah. Cobalah!

import { ClarityModule } from 'clarity-angular';

Juga, sertakan modul dalam impor.

imports: [ ClarityModule ],

memecahkan masalah ini di file /app/app.module.ts

impor komponen Anda dan nyatakan

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

@NgModule({
  declarations: [
    MyComponent,
  ]

Apakah Anda menggunakan paket web ... jika ya, silakan instal

angular2-template-loader

dan taruh itu

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