88 votes

CUSTOM_ELEMENTS_SCHEMA ajouté à NgModule.schemas affichant toujours une erreur

J'ai juste mis à niveau à partir Angulaire 2 rc4 à rc6 et vous éprouvez des difficultés à le faire.

Je vois le message d'erreur suivant 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 en-Tête de Module:

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 emballage appelé util module 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és par la 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 { }

À ma connaissance, je suis en suivant les instructions du message d'erreur en utilisant le SCHÉMA de réduire l'erreur. Mais il semble ne pas fonctionner. Ce que je fais mal? (J'espère que sa n'a rien d'évident, je ne vois pas pour le moment. Passé les 6 dernières heures de la mise à niveau vers cette version...)

64voto

Caleb Points 1424

Je voulais juste rajouter un petit peu plus sur ce.

Avec la nouvelle angulaire 2.0.0 sortie de la version finale (le 14 septembre, 2016), si vous utilisez des balises html personnalisées, puis il signale qu' Template parse errors. Une balise personnalisée est une étiquette que vous utilisez dans votre code HTML qui n'est pas une de ces balises.

Il ressemble à la ligne schemas: [ CUSTOM_ELEMENTS_SCHEMA ] doivent être ajoutés à chaque composant où vous êtes à l'aide de balises HTML personnalisées.

EDIT: L' schemas déclaration doit être dans un @NgModule décorateur. L'exemple ci-dessous montre un module personnalisé avec un composant personnalisé CustomComponent qui permet à toute balise html dans le template html pour la composante en question.

la coutume.le 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 {}

la coutume.composante.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

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>

56voto

Raphael Hippe Points 1154

Hé c'est réparé en faisant

a) ajouter schemas: [ CUSTOM_ELEMENTS_SCHEMA ] à chaque composant ou

b) ajouter

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

et

 schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],
 

à votre module.

À la vôtre, Raphaël

15voto

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 obtient la configuration au début du fichier .spec.ts pour ce composant. Voici un exemple de démarrage de l'installation de 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();
  }));
 

11voto

Negin Points 1215

Cela fonctionne 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
]
 

aux @NgModule({})

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

"app.module.ts" ressemblera à ceci:

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

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

classe d'exportation AppModule {}

7voto

Martin Cremer Points 1445

Cela n'a pas fonctionné pour moi non plus. j'ai changé

 CUSTOM_ELEMENTS_SCHEMA
 

pour

 NO_ERRORS_SCHEMA
 

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

Maintenant ça marche.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: