CUSTOM_ELEMENTS_SCHEMA aggiunto a NgModule.schemas che mostra ancora Errore

Ho appena aggiornato da Angular 2 RC4 a RC6 e ho problemi a farlo.

Vedo il seguente errore sulla mia console:

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

Ecco il mio componente Header:

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

Ecco il mio modulo di intestazione:

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

Ho creato un modulo wrapper chiamato modulo util che importa HeaderModule:

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

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

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

Che viene infine importato da 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 { }

Per quanto ne so, sto seguendo le istruzioni del messaggio di errore usando SCHEMA per sopprimere l'errore. Ma sembra non funzionare. Che cosa sto facendo di sbagliato? (Spero che non sia nulla di ovvio al momento non vedo. Ho passato le ultime 6 ore a passare a questa versione ...)

Volevo solo aggiungere un po 'di più su questo.

Con la nuova versione angolare 2.0.0 finale (14 settembre 2016), se si utilizzano tag html personalizzati, verrà segnalato Template parse errors. Un tag personalizzato è un tag che usi nel tuo HTML che non è uno di questi tag .

Sembra che la riga schemas: [ CUSTOM_ELEMENTS_SCHEMA ]debba essere aggiunta a ciascun componente in cui si utilizzano tag HTML personalizzati.

EDIT: la schemasdichiarazione deve essere in un @NgModuledecoratore. L'esempio seguente mostra un modulo personalizzato con un componente personalizzato CustomComponentche consente qualsiasi tag html nel modello html per quel componente.

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

Qui puoi usare qualsiasi tag HTML che desideri.

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

Questo è risolto da:

a) aggiungendo schemas: [ CUSTOM_ELEMENTS_SCHEMA ]ad ogni componente o

b) aggiungendo

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

e

schemas: [
  CUSTOM_ELEMENTS_SCHEMA
],

al tuo modulo.

Ciò può verificarsi anche durante l'esecuzione di unit test se si sta testando un componente con elementi personalizzati. In tal caso, custom_elements_schema deve essere aggiunto al testingModule che viene installato all'inizio del file .spec.ts per quel componente. Ecco un esempio di come inizierà l'installazione di 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();
  }));

Aggiungi quanto segue @NgModule({})in "app.module.ts":

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

e poi

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

Il tuo 'app.module.ts' dovrebbe apparire così:

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

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

export class AppModule { }

Neanche per me ha funzionato. Ho cambiato

CUSTOM_ELEMENTS_SCHEMA

per

NO_ERRORS_SCHEMA

che è stato suggerito in questo articolo: https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Ora funziona.

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 Deve essere esportato

dashboard.module.ts
importa AccountModulenel modulo dove vogliamo usare<app-logout> import {AccountModule} da '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() {}
}

Non sono tenuto a importare e utilizzare CUSTOM_ELEMENTS_SCHEMA.
tuttavia non funziona quando dashboard.module è caricato in modo pigro.
Quando si utilizza CUSTOM_ELEMENTS_SCHEMAin caso di caricamento lento, l'errore viene eliminato ma il componente non viene aggiunto a dom.

Con componenti contenenti materiale angolare, un errore simile è emerso con i miei test unitari. Secondo la risposta di @Dan Stirling-Talbert sopra, ho aggiunto questo al mio file .spec del mio componente e l'errore è stato eliminato dai test delle mie unità.

Import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

Quindi aggiungi lo schema nell'istruzione beforeEach () generata:

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

Il mio errore Karma è stato: se "mat-panel-title" è un componente Web, aggiungere "CUSTOM_ELEMENTS_SCHEMA" a "@ NgModule.schemas" di questo componente per eliminare questo messaggio.

Leggi questo post e in base ai 2 documenti angolari:

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.

Quindi, nel caso in cui qualcuno riscontri questo problema, dopo aver aggiunto CUSTOM_ELEMENTS_SCHEMA al tuo NgModule, assicurati che qualsiasi nuovo elemento personalizzato che usi abbia un "trattino" nel suo nome, ad es. o ecc.

Questo è un post piuttosto lungo e fornisce una spiegazione più dettagliata del problema.

Il problema (nel mio caso) si presenta quando si dispone della proiezione del contenuto multi-slot

Vedi anche proiezione dei contenuti per maggiori informazioni.

Ad esempio, se si dispone di un componente simile al seguente:

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

E vuoi usarlo come:

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


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

E poi ottieni errori di analisi del modello che non sono un componente angolare noto e in realtà non lo sono - è solo un riferimento a un contenuto di ng nel tuo componente:

E poi la soluzione più semplice sta aggiungendo

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

... alla tua app.module.ts

Ma c'è un approccio semplice e pulito a questo problema - invece di utilizzare <my-component-header>per inserire html nello slot lì - puoi usare un nome di classe per questa attività in questo modo:

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>

E vuoi usarlo come:

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

Quindi ... non ci sono più componenti che non esistono, quindi non ci sono problemi in questo, né errori, né necessità di CUSTOM_ELEMENTS_SCHEMA in app.module.ts

Quindi, se tu fossi come me e non volessi aggiungere CUSTOM_ELEMENTS_SCHEMA al modulo - l'utilizzo del componente in questo modo non genera errori ed è più chiaro.

Per maggiori informazioni su questo problema - https://github.com/angular/angular/issues/11251

Per maggiori informazioni sulla proiezione di contenuti angolari - https://blog.angular-university.io/angular-ng-content/

Puoi anche vedere https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Vorrei aggiungere un'informazione aggiuntiva poiché la risposta accettata sopra non ha corretto completamente i miei errori.

Nel mio scenario, ho un componente padre, che contiene un componente figlio. E quel componente figlio contiene anche un altro componente.

Quindi, il file delle specifiche del mio componente genitore deve avere la dichiarazione del componente figlio, BENE COME IL COMPONENTE BAMBINO DEL BAMBINO. Ciò ha finalmente risolto il problema per me.

Penso che tu stia utilizzando un modulo personalizzato. Puoi provare quanto segue. È necessario aggiungere quanto segue al file your-module.module.ts :

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

Non ha funzionato per me (usando 2.0.0). Quello che ha funzionato per me è stato invece importare RouterTestingModule.

Ho risolto questo problema importando RouterTestingModule nel file delle specifiche.

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

  beforeEach(() => {

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

    });

Per me, avevo bisogno di guardare:

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

Ciò significa che il tuo componente non è incluso in app.module.ts. Assicurati che sia importato e quindi incluso nella declarationssezione.

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

Ho appena importato ClarityModulee risolto tutti i problemi. Provaci!

import { ClarityModule } from 'clarity-angular';

Inoltre, includere il modulo nelle importazioni.

imports: [ ClarityModule ],

risolto questo problema nel file /app/app.module.ts

importa il tuo componente e dichiaralo

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

@NgModule({
  declarations: [
    MyComponent,
  ]

Hai usato il webpack ... se sì, per favore installa

angular2-template-loader

e metterlo

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