CUSTOM_ELEMENTS_SCHEMA添加到NgModule.schemas仍显示错误 [英] CUSTOM_ELEMENTS_SCHEMA added to NgModule.schemas still showing Error

问题描述

我刚从Angular 2 rc4升级到rc6，但遇到了麻烦.

I just upgraded from Angular 2 rc4 to rc6 and having troubles doing so.

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

I see the following error on my console:

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模块的包装器模块，该模块导入HeaderModule:

I created a wrapper module called util module which imports the HeaderModule:

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

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

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

哪个最终由AppModule导入:

Which is finally imported by the 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个小时一直在升级到此版本...)

To my understanding I am following the instructions of the error message using the SCHEMA to surpress the error. But it seems not to work. What am I doing wrong? (I hope its nothing obvious I just don't see at the moment. Been spending the past 6 hours upgrading to this version...)

推荐答案

嘿，这样做可以解决

a)将schemas: [ CUSTOM_ELEMENTS_SCHEMA ]添加到每个组件或

a) adding schemas: [ CUSTOM_ELEMENTS_SCHEMA ] to every component or

b)添加

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

和

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

到您的模块.

干杯，拉斐尔

这篇关于CUSTOM_ELEMENTS_SCHEMA添加到NgModule.schemas仍显示错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！