添加到NgModule.schemas的CUSTOM_ELEMENTS_SCHEMA仍显示错误
添加到NgModule.schemas的CUSTOM_ELEMENTS_SCHEMA仍显示错误
提问于 2016-09-11 00:22:28
我刚刚从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下面是我的Header组件：
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... }这是我的Header模块：
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 { }据我所知，我遵循了错误消息的说明，使用模式来抑制错误。但它似乎不起作用。我做错了什么？(我希望这不是什么显而易见的事情，我只是现在看不到。我在过去的6个小时里一直在升级到这个版本...)
回答 15
Stack Overflow用户
回答已采纳
发布于 2016-11-04 01:23:34
这是通过以下方式解决的：
a)将schemas: [ CUSTOM_ELEMENTS_SCHEMA ]添加到每个组件或
b)添加
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';和
schemas: [
CUSTOM_ELEMENTS_SCHEMA
],添加到你的模块。
Stack Overflow用户
发布于 2018-04-18 06:35:47
如果您正在使用自定义元素测试组件，则在运行单元测试时也会出现这种情况。在这种情况下，需要将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();
}));Stack Overflow用户
发布于 2016-12-27 21:26:30
在'app.module.ts‘中的@NgModule({})下添加以下内容：
import {CUSTOM_ELEMENTS_SCHEMA} from `@angular/core`;然后
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]你的'app.module.ts‘应该是这样的：
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
declarations: [],
imports: [],
schemas: [ CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39428132
复制相关文章
相似问题