CUSTOM_ELEMENTS_SCHEMA ajouté à NgModule.schemas montre toujours une erreur

Question

Je viens de passer d'Angular 2 rc4 à rc6 et j'ai des difficultés à le faire.

Je vois l'erreur suivante sur ma 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

Voici mon composant d'en-tête :

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

Voici mon module d'en-tête :

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

J'ai créé un module enveloppant appelé module util qui importe le HeaderModule :

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

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

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

Qui est finalement importé par le 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 { }

Si j'ai bien compris, je suis les instructions du message d'erreur en utilisant le SCHEMA pour supprimer l'erreur. Mais cela ne semble pas fonctionner. Qu'est-ce que je fais de mal ? (J'espère qu'il n'y a rien d'évident que je ne vois pas pour le moment. J'ai passé les 6 dernières heures à mettre à jour cette version...)

Answer 1

Je voulais juste ajouter un peu plus à ce sujet.

Avec la nouvelle version finale d'angular 2.0.0 (14 septembre 2016), si vous utilisez des balises html personnalisées, le système signalera que Template parse errors . Une balise personnalisée est une balise que vous utilisez dans votre HTML et qui n'est pas l'une des balises suivantes ces étiquettes .

On dirait que la ligne schemas: [ CUSTOM_ELEMENTS_SCHEMA ] doivent être ajoutés à chaque composant où vous utilisez des balises HTML personnalisées.

EDIT : Le site schemas doit se trouver dans un fichier @NgModule décorateur. L'exemple ci-dessous montre un module personnalisé avec un composant personnalisé CustomComponent qui autorise n'importe quelle balise html dans le modèle html pour ce seul composant.

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

composant.personnalisé.html

Ici, vous pouvez utiliser n'importe quelle balise HTML que vous voulez.

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

Answer 2

Hey, cela est corrigé en faisant

a) en ajoutant schemas: [ CUSTOM_ELEMENTS_SCHEMA ] à chaque composant ou

b) en ajoutant

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

et

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

à votre module.

Santé, Raphael

Answer 3

Cela peut également se produire lors de l'exécution de tests unitaires si vous testez un composant avec des éléments personnalisés. Dans ce cas, custom_elements_schema doit être ajouté au testingModule qui est configuré au début du fichier .spec.ts pour ce composant. Voici un exemple du début de la configuration du fichier 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();
  }));

Answer 4

Ça marche pour moi de cette façon :

dans "App.module.ts" :

1-

import CUSTOM_ELEMENTS_SCHEMA from `@angular/core` file ;

2 - Ajouter

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

à la @NgModule({})

---------------------------------------------------------> <-------------------------------------------------------------

"app.module.ts" ressemblera à ceci :

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

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

export classe AppModule { }

Answer 5

Ça n'a pas marché pour moi non plus. J'ai changé

CUSTOM_ELEMENTS_SCHEMA

pour

NO_ERRORS_SCHEMA

ce qui a été suggéré dans cet article : https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Maintenant, ça marche.