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

Ich habe gerade ein Upgrade von Angular 2 rc4 auf rc6 durchgeführt und habe Probleme damit.

Auf meiner Konsole wird der folgende Fehler angezeigt:

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-Modul 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 schließlich 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 { }

Nach meinem Verständnis folge ich den Anweisungen der Fehlermeldung und benutze das SCHEMA, um den Fehler zu unterdrücken. Aber es scheint nicht zu funktionieren. Was mache ich falsch? (Ich hoffe, es ist nichts Offensichtliches, was ich im Moment einfach nicht sehe. Ich habe die letzten 6 Stunden damit verbracht, auf diese Version zu aktualisieren ...)

Ich wollte nur ein bisschen mehr dazu hinzufügen.

Wenn Sie mit der neuen endgültigen Version von Angular 2.0.0 (14. September 2016) benutzerdefinierte HTML-Tags verwenden, wird dies gemeldet Template parse errors. Ein benutzerdefiniertes Tag ist ein Tag, das Sie in Ihrem HTML-Code verwenden und das nicht zu diesen Tags gehört .

Es sieht so aus, als schemas: [ CUSTOM_ELEMENTS_SCHEMA ]müsste die Zeile zu jeder Komponente hinzugefügt werden, in der Sie benutzerdefinierte HTML-Tags verwenden.

EDIT: Die schemasErklärung muss in einem @NgModuleDekorateur sein. Das folgende Beispiel zeigt ein benutzerdefiniertes Modul mit einer benutzerdefinierten Komponente CustomComponent, die ein beliebiges HTML-Tag in der HTML-Vorlage für diese eine Komponente zulässt.

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

Hier können Sie jedes gewünschte HTML-Tag verwenden.

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

Dies wird behoben durch:

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 Ihrem Modul.

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 Testmodul hinzugefügt werden, das am Anfang der Datei .spec.ts für diese Komponente eingerichtet wird. Hier ist ein Beispiel dafür, wie das Setup 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();
  }));

Fügen Sie unter @NgModule({})'app.module.ts' Folgendes hinzu:

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

und dann

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

Ihre 'app.module.ts' sollte folgendermaßen aussehen:

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

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

export class AppModule { }

Es hat auch bei mir nicht funktioniert. ich habe mich verändert

CUSTOM_ELEMENTS_SCHEMA

zum

NO_ERRORS_SCHEMA

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

Jetzt gehts.

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
Import AccountModulein Modul, in dem<app-logout> import {AccountModule} aus 'util.module' verwendet werden soll;

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

Ich muss nicht importieren und verwenden CUSTOM_ELEMENTS_SCHEMA.
Es funktioniert jedoch nicht, wenn dashboard.module faul geladen ist.
Bei Verwendung CUSTOM_ELEMENTS_SCHEMAim Falle eines verzögerten Ladens wird ein Fehler unterdrückt, aber die Komponente wird nicht zu dom hinzugefügt.

Bei Komponenten, die Angular Material enthalten, trat bei meinen Komponententests ein ähnlicher Fehler auf. Gemäß der obigen Antwort von @Dan Stirling-Talbert wurde dies zu meiner .spec-Komponentendatei hinzugefügt, und der Fehler wurde aus meinen Komponententests behoben.

Import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

Fügen Sie dann das Schema in die generierte beforeEach () -Anweisung ein:

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

Mein Karma-Fehler war: Wenn 'mat-panel-title' eine Webkomponente ist, fügen Sie 'CUSTOM_ELEMENTS_SCHEMA' zu '@ NgModule.schemas' dieser Komponente hinzu, um diese Nachricht zu unterdrücken.

Lesen Sie einfach diesen Beitrag und gemäß 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.

Für den Fall, dass jemand auf dieses Problem stößt, stellen Sie nach dem Hinzufügen von CUSTOM_ELEMENTS_SCHEMA zu Ihrem NgModule sicher, dass jedes neue benutzerdefinierte Element, das Sie verwenden, einen Bindestrich im Namen hat, z. oder etc.

Dies ist ein ziemlich langer Beitrag, der eine detailliertere Erklärung des Problems enthält.

Das Problem (in meinem Fall) tritt auf, wenn Sie eine Multi Slot Content Projection haben

Siehe auch Inhaltsprojektion für weitere Informationen.

Zum Beispiel, wenn Sie eine Komponente haben, die so aussieht:

HTML-Datei:

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

ts Datei:

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

Und Sie möchten es wie folgt verwenden:

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


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

Und dann erhalten Sie Fehler beim Analysieren von Vorlagen, bei denen es sich nicht um eine bekannte Angular-Komponente handelt, und tatsächlich nicht - es handelt sich lediglich um einen Verweis auf einen ng-Inhalt in Ihrer Komponente:

Und dann ist die einfachste Lösung das Hinzufügen

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

... zu Ihrer app.module.ts

Es gibt jedoch einen einfachen und übersichtlichen Ansatz für dieses Problem. Anstatt <my-component-header>HTML in den dortigen Steckplatz einzufügen, können Sie für diese Aufgabe einen Klassennamen wie den folgenden verwenden:

HTML-Datei:

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

Und Sie möchten es wie folgt verwenden:

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

Also ... keine Komponenten mehr, die nicht existieren, also gibt es keine Probleme, keine Fehler, keine Notwendigkeit für CUSTOM_ELEMENTS_SCHEMA in app.module.ts

Wenn Sie also wie ich waren und CUSTOM_ELEMENTS_SCHEMA nicht zum Modul hinzufügen wollten, führt die Verwendung Ihrer Komponente auf diese Weise nicht zu Fehlern und ist klarer.

Weitere Informationen zu diesem Problem finden Sie unter https://github.com/angular/angular/issues/11251

Weitere Informationen zur Projektion von Angular-Inhalten finden Sie unter https://blog.angular-university.io/angular-ng-content/.

Sie können auch https://scotch.io/tutorials/angular-2-transclusion-using-ng-content sehen

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

In meinem Szenario habe ich eine übergeordnete Komponente, die eine untergeordnete Komponente enthält. Und diese untergeordnete Komponente enthält auch eine andere Komponente.

Die Spezifikationsdatei meiner übergeordneten Komponente muss also die Deklaration der untergeordneten Komponente sowie die KINDERKOMPONENTE DES KINDES enthalten. Das hat das Problem für mich endlich behoben.

Ich denke, Sie verwenden ein benutzerdefiniertes Modul. Sie können Folgendes versuchen. Sie müssen der Datei your-module.module.ts Folgendes hinzufügen :

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

Das hat bei mir nicht funktioniert (mit 2.0.0). Was für mich funktioniert hat, war stattdessen RouterTestingModule zu importieren.

Ich habe dieses Problem behoben, 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 ]
        });

    });

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 enthalten ist app.module.ts. Stellen Sie sicher, dass es importiert und dann in den declarationsAbschnitt aufgenommen 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";

import { HeaderComponent } from "./app/components/header.component";

@NgModule({
    bootstrap: [AppComponent],
    declarations: [
        AppComponent,
        HeaderComponent
    ],
    imports: [BrowserModule, UtilModule, RoutingModule]
})
export class AppModule { }

Ich habe gerade importiert ClarityModuleund es hat alle Probleme gelöst. Versuche es!

import { ClarityModule } from 'clarity-angular';

Nehmen Sie das Modul auch in die Importe auf.

imports: [ ClarityModule ],

Dieses Problem wurde in der Datei /app/app.module.ts behoben

Importieren Sie Ihre Komponente und deklarieren Sie sie

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

@NgModule({
  declarations: [
    MyComponent,
  ]

Haben Sie das Webpack verwendet ... wenn ja, bitte installieren

angular2-template-loader

und setzen Sie es

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