添加到NgModule.schemas的CUSTOM_ELEMENTS_SCHEMA仍显示错误

我刚刚从Angular 2 rc4升级到rc6，并且遇到麻烦。

我在控制台上看到以下错误：

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 

这是我的头组件：

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

这是我的头模块：

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

我创build了一个名为util模块的包装模块，它导入HeaderModule：

 import { NgModule } from '@angular/core'; import {HeaderModule} from "./header/header.module"; // ... @NgModule({ declarations: [ ], bootstrap: [ ], imports: [ HeaderModule] }) export class UtilModule { } 

最后由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 { } 

据我的理解，我正在按照使用SCHEMA的错误消息的指示来抑制错误。 但似乎没有工作。 我究竟做错了什么？ （我希望它没有什么明显的，我现在只是没有看到，花了过去6个小时升级到这个版本…）

Answer 1

只是想增加一点这个。

使用新的angular度2.0.0最终版本（2016年9月14日），如果您使用自定义的HTML标签，那么它会报告Template parse errors 。 自定义标记是您在HTML中使用的标记，不是这些标记之一 。

它看起来像行schemas: [ CUSTOM_ELEMENTS_SCHEMA ]需要添加到您使用自定义HTML标记的每个组件。

编辑： schemas声明需要在@NgModule装饰。 下面的例子显示了一个自定义模块的自定义组件CustomComponent ，它允许HTML模板中的任何一个组件的HTML标签。

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

在这里，你可以使用任何你想要的HTML标签。

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

Answer 2

嘿，这是通过做

a）向每个组件添加schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

b）join

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

和

 schemas: [ CUSTOM_ELEMENTS_SCHEMA ], 

到你的模块。

干杯，拉斐尔

Answer 3

它适用于我这种方式：

在“App.module.ts”中：

1-

 import CUSTOM_ELEMENTS_SCHEMA from `@angular/core` file ; 

2 – 添加

 schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 

到@NgModule({})

————————————————– ——-> <—————————————– ——————–

“app.module.ts”将如下所示：

 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; @NgModule({ declarations: [], imports: [], schemas: [ CUSTOM_ELEMENTS_SCHEMA], providers: [], bootstrap: [AppComponent] }) 

导出类AppModule {}

Answer 4

这对我也不起作用。 我变了

 CUSTOM_ELEMENTS_SCHEMA 

对于

 NO_ERRORS_SCHEMA 

这是在这篇文章中build议： https ： //scotch.io/tutorials/angular-2-transclusion-using-ng-content

现在起作用了。

Answer 5

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需要导出

dashboard.module.ts
在我们想要使用的模块中导入AccountModule <app-logout>从'util.module'导入{AccountModule};

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

我不需要导入和使用CUSTOM_ELEMENTS_SCHEMA 。
然而，当dashboard.module被加载时，它不工作。
在延迟加载的情况下使用CUSTOM_ELEMENTS_SCHEMA时，错误会被抑制，但组件不会被添加到dom中。

Answer 6

只要阅读这篇文章，并根据angular2文件：

 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. 

所以为了防止任何人遇到这个问题，一旦你添加了CUSTOM_ELEMENTS_SCHEMA到你的NgModule，确保你使用的任何新的自定义元素都有一个'短划线'的名字，例如。 或者等等

Answer 7

我想添加一个额外的信息，因为上面接受的答案没有完全解决我的错误。

在我的情况下，我有一个父组件，其中包含一个子组件。 那个子组件还包含另一个组件。

所以，我的父组件的spec文件需要声明子组件，就像孩子的孩子组件一样。 终于为我解决了这个问题。

Answer 8

这不适合我（使用2.0.0）。 我的工作是改为导入RouterTestingModule。

我通过在spec文件中导入RouterTestingModule解决了这个问题。

 import { RouterTestingModule } from '@angular/router/testing'; beforeEach(() => { TestBed.configureTestingModule({ providers: [ App, AppState, Renderer, {provide: Router, useClass: MockRouter } ], imports: [ RouterTestingModule ] }); }); 

Answer 9

你使用的networking包…如果是的请安装

 angular2-template-loader 

并把它

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