Question

我刚从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 { }

我创建了一个名为util module的包装器模块，它导入了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

只想在此加一点。

使用新的角度2.0.0最终版本（2016年9月14日），如果您使用自定义html标记，那么它将报告Template parse errors。自定义标记是您在HTML中使用的标记，不是these tags中的标记。

看起来需要将行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）添加

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

和

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

到您的模块。

干杯，拉斐尔

Answer 3

如果您正在使用自定义元素测试组件，则在运行单元测试时也会出现这种情况。在这种情况下，需要将custom_elements_schema添加到在该组件的.spec.ts文件开头设置的testingModule中。以下是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

在“{1}}下的＆＃39; app.module.ts＆＃39;中添加以下内容：

@NgModule({})

然后

import CUSTOM_ELEMENTS_SCHEMA from `@angular/core`;

您的app.module.ts＆＃39;应该是这样的：

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

Answer 5

它对我也不起作用。我改变了

CUSTOM_ELEMENTS_SCHEMA

的

NO_ERRORS_SCHEMA

这篇文章中提到了： https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

现在可行。

Answer 6

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 7

请阅读此帖并根据角度2文档：

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，请确保你使用的任何新的自定义元素都有一个＆＃39;破坏＆＃39;在它的名字，例如。等等。

Answer 8

这是一篇很长的文章，它提供了对该问题的更详细的解释。

问题（就我而言）是当您拥有Multi Slot Content Projection

有关更多信息，另请参见content projection。

例如，如果您有一个看起来像这样的组件：

html文件：

 <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文件：

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

您想像这样使用它：

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


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

然后，您将获得模板解析错误，它不是已知的Angular组件，而实际上不是-仅是对组件中ng-content的引用：

然后最简单的解决方法是添加

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

...到您的app.module.ts

但是有一个简单而干净的方法可以解决此问题-代替使用<my-component-header>在该位置的html中插入html-您可以为该任务使用一个类名，如下所示：

html文件：

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

您想像这样使用它：

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

所以...不再有不存在的组件，因此没有问题，没有错误，不需要app.module.ts中的CUSTOM_ELEMENTS_SCHEMA

因此，如果您像我一样，并且不想将CUSTOM_ELEMENTS_SCHEMA添加到模块中，则使用这种方式不会产生错误并且更加清晰。

有关此问题的更多信息-https://github.com/angular/angular/issues/11251

有关Angular内容投影的更多信息-https://blog.angular-university.io/angular-ng-content/

您还可以看到https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Answer 9

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

在我的场景中，我有一个父组件，它包含一个子组件。该子组件还包含另一个组件。

因此，我的父组件的spec文件需要具有子组件的声明，以及孩子的儿童组件。这最终解决了我的问题。

Answer 10

我刚刚导入了ClarityModule，它解决了所有问题。试试看！

import { ClarityModule } from 'clarity-angular';

还要在导入中包含模块。

imports: [ ClarityModule ],

Answer 11

我认为您正在使用自定义模块。您可以尝试以下方法。您需要将以下内容添加到文件 your-module.module.ts ：

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

Answer 12

确保将组件导入声明数组中

@NgModule({
  declarations: [ExampleComponent],
  imports: [
      CommonModule,
      ExampleRoutingModule,
      ReactiveFormsModule
  ]
})

Answer 13

在/app/app.module.ts文件中解决了此问题

导入您的组件并声明它

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

@NgModule({
  declarations: [
    MyComponent,
  ]

Answer 14

对于包含Angular Material的组件，我的单元测试也出现了类似的错误。按照上述@Dan Stirling-Talbert的回答，将其添加到我的组件.spec文件中，该错误已从我的单元测试中清除。

Import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

然后将架构添加到生成的beforeEach（）语句中：

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

我的业力错误是：如果“ mat-panel-title”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。

Answer 15

对我来说，我需要看一下：

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

这意味着您的组件未包含在app.module.ts中。确保已将其导入，然后将其包含在declarations部分中。

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

Answer 16

这对我没用（使用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 17

您是否使用了网络包...如果是，请安装

angular2-template-loader

并把它

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

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

17 个答案:

因此，如果您像我一样，并且不想将CUSTOM_ELEMENTS_SCHEMA添加到模块中，则使用这种方式不会产生错误并且更加清晰。