Frage CUSTOM_ELEMENTS_SCHEMA wurde zu NgModule.schemas hinzugefügt und zeigt weiterhin Fehler an


Ich habe gerade von Angular 2 rc4 auf rc6 umgestellt und habe Probleme dabei.

Ich sehe den folgenden Fehler auf meiner Konsole:

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

Hier ist meine Header-Komponente:

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

Hier ist mein Header-Modul:

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

Ich habe ein Wrapper-Modul namens util module erstellt, das das HeaderModule importiert:

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

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

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

Was letztendlich vom AppModule importiert wird:

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

Zu meinem Verständnis befolge ich die Anweisungen der Fehlermeldung mit dem SCHEMA, um den Fehler zu unterdrücken. Aber es scheint nicht zu funktionieren. Was mache ich falsch? (Ich hoffe, es ist nichts offensichtlich, ich sehe es gerade nicht. Verbrachte die letzten 6 Stunden, um auf diese Version zu aktualisieren ...)


75
2017-09-10 16:22


Ursprung


Antworten:


Ich wollte nur ein bisschen mehr dazu hinzufügen.

Mit der neuen eckigen Version 2.0.0 final (14. September 2016), wenn Sie benutzerdefinierte HTML-Tags verwenden, wird dies gemeldet Template parse errors. Ein benutzerdefiniertes Tag ist ein Tag, das Sie in Ihrem HTML-Code verwenden diese Tags.

Es sieht wie die Linie aus schemas: [ CUSTOM_ELEMENTS_SCHEMA ] müssen zu jeder Komponente hinzugefügt werden, in der Sie benutzerdefinierte HTML-Tags verwenden.

BEARBEITEN: Das schemas Erklärung muss in einem sein @NgModule Dekorateur. Das folgende Beispiel zeigt ein benutzerdefiniertes Modul mit einer benutzerdefinierten Komponente CustomComponent Das erlaubt jedes HTML-Tag in der HTML-Vorlage für diese eine Komponente.

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

benutzerdefinierte.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-custom-component',
  templateUrl: 'custom.component.html'
})
export class CustomComponent implements OnInit {
  constructor () {}
  ngOnInit () {}
}

benutzerdefinierte.component.html

Hier können Sie jedes beliebige HTML-Tag verwenden.

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

54
2017-09-18 03:16



Hey, das ist behoben

a) Hinzufügen schemas: [ CUSTOM_ELEMENTS_SCHEMA ] zu jeder Komponente oder

b) hinzufügen

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

und

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

zu deinem Modul.

Prost, Raphael


48
2017-11-03 17:23



Es funktioniert für mich so:

in "App.modul.ts":

1-

import CUSTOM_ELEMENTS_SCHEMA from `@angular/core` file ;

2 - Hinzufügen

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

zum @NgModule({})

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

"app.module.ts" sieht dann so aus:

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

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

Exportklasse AppModule {}


11
2017-12-27 13:26



Es hat auch nicht für mich funktioniert. ich habe mich verändert

CUSTOM_ELEMENTS_SCHEMA

zum

NO_ERRORS_SCHEMA

was in diesem Artikel vorgeschlagen wurde: https://scotch.io/tutorials/angular-2-transclusion- using-ng-content

Jetzt funktioniert es.


6
2017-11-16 16:43



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 Muss exportiert werden

dashboard.module.ts
 einführen AccountModule im Modul, wo wir verwenden möchten <app-logout>     Importieren Sie {AccountModule} von 'util.module';

@NgModule({
  imports: [
    CommonModule, AccountModule
  ],
  declarations: [DashboardComponent]
})
export class DashboardModule { }

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

Ich bin nicht verpflichtet, zu importieren und zu verwenden CUSTOM_ELEMENTS_SCHEMA.
aber es funktioniert nicht, wenn das armaturenbrett.modul lazy geladen ist.
Beim Benutzen CUSTOM_ELEMENTS_SCHEMA Beim verzögerten Laden wird der Fehler unterdrückt, die Komponente wird jedoch nicht zu dom hinzugefügt.


5
2018-01-06 11:22



Dies kann auch beim Ausführen von Komponententests auftreten, wenn Sie eine Komponente mit benutzerdefinierten Elementen testen. In diesem Fall muss custom_elements_schema zum testModule hinzugefügt werden, das am Anfang der Datei .specs.ts für diese Komponente eingerichtet wird. Hier ist ein Beispiel, wie die Installation von header.component.spec.ts beginnen würde:

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

4
2018-04-17 22:35



Lies einfach diesen Beitrag und entsprechend den eckigen 2 Dokumenten:

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.

Wenn also jemand auf dieses Problem stößt, nachdem Sie CUSTOM_ELEMENTS_SCHEMA zu Ihrem NgModule hinzugefügt haben, stellen Sie sicher, dass das neue benutzerdefinierte Element, das Sie verwenden, einen 'Strich' in seinem Namen hat, zB. oder usw.


2
2018-02-03 08:04



Ich möchte eine zusätzliche Information hinzufügen, da die oben genannte Antwort meine Fehler nicht vollständig behebt.

In meinem Szenario habe ich eine Elternkomponente, die eine Kindkomponente enthält. Und diese Kindkomponente enthält auch eine andere Komponente.

Also muss die Spezifikationsdatei meiner Elternkomponente die Deklaration der Kindkomponente haben, SOWIE DIE KINDKOMPONENTE DES KINDES. Das hat das Problem endgültig gelöst.


0
2017-10-12 14:14



Das hat bei mir nicht funktioniert (mit 2.0.0). Was für mich funktionierte, war das Importieren von RouterTestingModule.

Ich habe dies gelöst, indem ich RouterTestingModule in die Spezifikationsdatei importiert habe.

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

  beforeEach(() => {

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

    });

0
2017-11-13 18:22



Für mich musste ich schauen:

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

Dies bedeutet, dass Ihre Komponente nicht in der app.module.ts. Stellen Sie sicher, dass es importiert und dann in das Programm aufgenommen wurde declarations Sektion.

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

0
2018-03-21 20:50



Haben Sie das Webpack benutzt? Wenn ja, bitte installieren

angular2-template-loader

und sag es

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

-2
2017-11-20 14:04