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

2023-11-27

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

据我了解,我正在按照错误消息的说明使用架构来抑制错误。但似乎不起作用。 我究竟做错了什么? (我希望这没什么明显的,我只是目前没有看到。过去 6 个小时一直在升级到这个版本......)


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

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

b) 添加

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

and

schemas: [
  CUSTOM_ELEMENTS_SCHEMA
],

到你的模块。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

添加到 NgModule.schemas 的 CUSTOM_ELEMENTS_SCHEMA 仍显示错误 的相关文章

  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • Angular 模板验证表单

    我正在研究表单验证 我正在使用模板驱动的验证表单 其编码如下 现在工作正常 但是当我尝试添加时 username ngModel and password ngModel 在创建验证类的输入中 它向我显示一个错误 也请找到该错误 div c
  • Karma 单元测试 / STORE - 状态未定义

    运行应用程序时一切正常 但在帐户单元测试中似乎没有启动或我的状态已启动 我有什么明显做错的事情吗 这是错误 Test error index js 中的创建选择器返回一个带有未定义参数的函数 但仅在 karma 测试期间返回 账户 comp
  • Angular 2 - ng 构建与 webpack 构建

    我想了解构建和部署 Angular 2 Web 应用程序的最佳方法是什么 我最终需要将其作为 Web 捆绑资源提供给我的 dropwizard 应用程序 我试图了解是否应该保留 ng build 并使用它来生成我的 dist 文件夹 或者我
  • 只能通过bootstrap将服务注入到服务中吗?

    我正在尝试连接一个使用 Http 服务的基本 Angular2 应用程序 我见过的大多数教程都是通过Component消耗Http服务 这似乎是错误的 除非瘦控制器的基本理念已经改变 但这是一个不同的问题 我想创建一个使用 Angular
  • 使用 typescript、karma 和 jasmine 进行 RxJS Observable.timer 单元测试

    大家好 我对 Angular2 Karma 和 Jasmine 还比较陌生 目前我正在使用 Angular 2 RC4 Jasmine 2 4 x 我有一个 Angular 2 服务 它定期调用 http 服务 如下所示 getDataFr
  • Angular 2和Jasmine单元测试:无法获取innerHtml

    我正在使用测试组件 WelcomeComponent 的示例之一 import Component OnInit from angular core import UserService from model user service Co
  • 有角度的动态背景图片

    在 html 模板中 我有这种带有动态图像的样式 div style background none width 200px height 150px div 它适用于网络浏览器和 Android 浏览器 但是 使用 style 的动态背景
  • Angular:如何动态更改 scss 变量?

    我对 scss 很陌生 所以我想知道是否可以使用组件的 Typescript 来更改 scss 变量 所以考虑一下 html div div scss thememode theme1 textcolormode nonHover colo
  • 未捕获的类型错误:ctorParameters.map 不是函数

    我正在尝试使用dragula https github com valor software ng2 dragula在我的 angular2 应用程序中 这是我的代码中的 app module import BrowserModule fr
  • Jhipster 生成器跳过 --skip-server 处的身份验证代码

    为什么当我们使用 skip server 生成项目时 哟 jhipster skip server 部分身份验证丢失 在 AJS A2 上 是吗 每次我需要粘贴部分代码 Angular 上的 AuthServerProvider 或 Ang
  • 如何使用“*ngIf else”?

    我正在使用 Angular 并且我想使用 ngIf else 自版本 4 起可用 在此示例中 div content here div div other content here div 我怎样才能实现相同的行为ngIf else 角度
  • Angular 5 - ag-grid 18.0.1 - 边缘崩溃

    我一直在到处搜索 但无法找到与此相关的任何信息 很可能是因为 ag grid update 18 x 是新的 无论如何 似乎在将 ag grid 从 17 1 1 更新到 18 0 1 后 任何带有 ag grid 的页面最终都会导致 ED
  • rxjs 主题应该在课堂上公开吗?

    假设我有两个类 您可以在其中观察一些可观察量 第一个例子 公共主题 class EventsPub public readonly onEnd new Subject
  • RxJ 从 observable 中获取价值

    在组件中 singleEvent Observable
  • 使用 Angular2 Router 发出 router.navigate 时出现无限重定向循环

    Note使用相关代码片段进行编辑 我遇到了一个奇怪的问题 在发出 router navigate 时 我进入了无限重定向循环 Setup 我使用哈希位置策略 并且该应用程序用作 Outlook 插件 I have three routing
  • 打字稿中枚举声明中的方括号的含义是什么?

    我正在浏览一个名为 Angular ngrx 项目的打字稿文件collection ts在那里 我看到声明了以下枚举常量 import Action from ngrx store import Book from models book
  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏?

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下
  • Typescript导入别名+桶文件

    我最近花了很多时间 因为 Angular ngrx typescript 生态系统中某些事物的特定行为 并且我无法识别可能的根本原因 场景 我已经构建了一些效果 并将它们导出到桶文件中 index ts import MyEffects f
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那

随机推荐