CUSTOM_ELEMENTS_SCHEMA adicionado ao NgModule.schemas ainda mostrando o erro

Acabei de atualizar do Angular 2 rc4 para rc6 e com problemas para fazê-lo.

Eu vejo o seguinte erro no meu 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

Aqui está o meu componente de cabeçalho:

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

Aqui está o meu Módulo de cabeçalho:

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

Eu criei um módulo wrapper chamado módulo util que importa o HeaderModule:

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

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

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

Finalmente importado pelo 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 { }

Para meu entendimento, estou seguindo as instruções da mensagem de erro usando o ESQUEMA para suprimir o erro. Mas parece não funcionar. O que estou fazendo de errado? (Espero que não seja nada óbvio, apenas não vejo no momento. Passei as últimas 6 horas atualizando para esta versão ...)

Só queria adicionar um pouco mais sobre isso.

Com a nova versão final angular 2.0.0 (14 de setembro de 2016), se você usar tags html personalizadas, ele informará isso Template parse errors. Uma tag personalizada é uma tag usada em seu HTML que não é uma dessas tags .

Parece que a linha schemas: [ CUSTOM_ELEMENTS_SCHEMA ]precisa ser adicionada a cada componente em que você está usando tags HTML personalizadas.

EDIT: A schemasdeclaração precisa estar em um @NgModuledecorador. O exemplo abaixo mostra um módulo personalizado com um componente personalizado CustomComponentque permite qualquer tag html no modelo html para esse 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

Aqui você pode usar qualquer tag HTML que desejar.

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

Isso é corrigido por:

a) adicionando schemas: [ CUSTOM_ELEMENTS_SCHEMA ]a cada componente ou

b) adicionando

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

e

schemas: [
  CUSTOM_ELEMENTS_SCHEMA
],

para o seu módulo.

Isso também pode surgir ao executar testes de unidade, se você estiver testando um componente com elementos personalizados. Nesse caso, custom_elements_schema precisa ser incluído no testingModule que é configurado no início do arquivo .spec.ts para esse componente. Aqui está um exemplo de como a instalação do header.component.spec.ts começaria:

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

Adicione o seguinte @NgModule({})em 'app.module.ts':

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

e depois

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

Seu 'app.module.ts' deve ficar assim:

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

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

export class AppModule { }

Também não funcionou para mim. eu mudei

CUSTOM_ELEMENTS_SCHEMA

para

NO_ERRORS_SCHEMA

sugerida neste artigo: https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Agora funciona.

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 precisa ser exportado

dashboard.module.ts
import AccountModuleno módulo onde queremos usar<app-logout> import {AccountModule} de '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() {}
}

Não sou obrigado a importar e usar CUSTOM_ELEMENTS_SCHEMA.
no entanto, não está funcionando quando o dashboard.module está carregado preguiçosamente.
Ao usar CUSTOM_ELEMENTS_SCHEMAem caso de carregamento lento, o erro é suprimido, mas o componente não é adicionado ao dom.

Com componentes contendo material angular, ocorreu um erro semelhante nos meus testes de unidade. Conforme a resposta de @Dan Stirling-Talbert acima, adicionei isso ao meu arquivo .spec componente e o erro foi eliminado dos meus testes de unidade.

Import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

Em seguida, adicione o esquema na instrução beforeEach () gerada:

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

Meu erro no Karma foi: Se 'mat-panel-title' for um componente da Web, adicione 'CUSTOM_ELEMENTS_SCHEMA' ao '@ NgModule.schemas' deste componente para suprimir esta mensagem.

Basta ler este post e de acordo com os 2 documentos angulares:

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.

Portanto, caso alguém encontre esse problema, depois de adicionar CUSTOM_ELEMENTS_SCHEMA ao seu NgModule, verifique se qualquer novo elemento personalizado usado possui um 'traço' em seu nome, por exemplo. ou etc.

Este post é bastante longo e fornece uma explicação mais detalhada do problema.

O problema (no meu caso) surge quando você tem projeção de conteúdo com vários slots

Veja também projeção de conteúdo para mais informações.

Por exemplo, se você tem um componente que se parece com isso:

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

arquivo ts:

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

E você deseja usá-lo como:

<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 então você obtém erros de análise de modelo que não é um componente Angular conhecido e, na verdade, não é - é apenas uma referência a um conteúdo ng em seu componente:

E a solução mais simples é adicionar

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

... para seu app.module.ts

Mas existe uma abordagem fácil e limpa para esse problema - em vez de usar <my-component-header>para inserir html no slot - você pode usar um nome de classe para esta tarefa como esta:

arquivo 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 você deseja usá-lo como:

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

Então ... não há mais componentes que não existem, portanto não há problemas, erros, necessidade de CUSTOM_ELEMENTS_SCHEMA no app.module.ts

Portanto, se você era como eu e não queria adicionar CUSTOM_ELEMENTS_SCHEMA ao módulo - usar seu componente dessa maneira não gera erros e é mais claro.

Para mais informações sobre este problema - https://github.com/angular/angular/issues/11251

Para obter mais informações sobre projeção de conteúdo angular - https://blog.angular-university.io/angular-ng-content/

Você também pode ver https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Gostaria de adicionar mais uma informação, pois a resposta aceita acima não corrigiu completamente meus erros.

No meu cenário, eu tenho um componente pai, que contém um componente filho. E esse componente filho também contém outro componente.

Portanto, o arquivo de especificação do meu componente pai precisa ter a declaração do componente filho, assim como o componente da criança. Isso finalmente resolveu o problema para mim.

Eu acho que você está usando um módulo personalizado. Você pode tentar o seguinte. Você precisa adicionar o seguinte ao arquivo your-module.module.ts :

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

Isso não funcionou para mim (usando o 2.0.0). O que funcionou para mim foi importar o RouterTestingModule.

Eu resolvi isso importando RouterTestingModule no arquivo de especificações.

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

  beforeEach(() => {

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

    });

Para mim, eu precisava olhar para:

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

Isso significa que seu componente não está incluído no app.module.ts. Verifique se ele foi importado e incluído na declarationsseção.

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

Acabei de importar ClarityModulee resolveu todos os problemas. De uma chance!

import { ClarityModule } from 'clarity-angular';

Além disso, inclua o módulo nas importações.

imports: [ ClarityModule ],

resolveu esse problema no arquivo /app/app.module.ts

importe seu componente e declare-o

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

@NgModule({
  declarations: [
    MyComponent,
  ]

Você usou o webpack ... se sim, instale

angular2-template-loader

e coloca

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