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

据我所知,我是在遵循错误消息的说明,使用模式来 suppress 错误.但这似乎并不管用. 我做错了什么? (我希望这不是什么明显的事情,只是我现在看不到.在过go 的6个小时内一直在升级到此版本.)

推荐答案

这是通过以下方式解决的:

a) 每个组件加schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

b) 添加

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

schemas: [
  CUSTOM_ELEMENTS_SCHEMA
],

到你的模块.

Angular相关问答推荐

使用Angular 13的NgxPrinterService打印时,第二页上的空白区域

NGX- colored颜色 Select 器安装出错

Angel Project Build从Angel 8升级后,从12MB增加到90MB

如何解决在StackBlitz中使用SPARTIER时出现无法解析解析器错误(&C)?

在以下位置升级到Angular 16 Break Sharepoint广告:This._history.replaceState不是函数

由于ngcc操作失败,Angular扩展可能无法正常工作

在switchMap操作符中使用条件语句以进行第一次或随后的执行

从具有特定 node 值的现有数组创建新数组

Angular APP_INITIALIZER 中的 MSAL 身份验证

在ngOninit方法中直接VS初始化属性

如果我使用 matAutocomplete,为什么 textarea 不显示 formControl 的实际值

Angular keypress 存储空间而不是第一个字母

在ionic 5中获取url传递的参数

在 Ionic 2 中使用图像资源的正确方法

错误:formControlName 必须与父 formGroup 指令一起使用.您需要添加一个 formGroup 指令

NgrxStore 和 Angular - 大量使用异步管道或在构造函数中只订阅一次

在Angular2的 Select 列表中设置最初 Select 的项目

Angular 2 http 没有得到

Angular7 中的 CORS 策略已阻止源http://localhost:4200

Angular2延迟加载模块错误'找不到模块'