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

【问题标题】：CUSTOM_ELEMENTS_SCHEMA added to NgModule.schemas still showing ErrorCUSTOM_ELEMENTS_SCHEMA 添加到 NgModule.schemas 仍然显示错误
【发布时间】：2022-01-13 21:25:20
【问题描述】：

我刚刚从 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 模块的包装模块，它导入 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 个小时一直在升级到这个版本......）

【问题讨论】：

如果你把它添加到你的AppModule你还需要把它添加到你的组件中吗？
这里也一样，对我来说只是添加“模式：[CUSTOM_ELEMENTS_SCHEMA]”就像一个魅力。谢谢：）
如果您将“修复”添加为对这个问题的回答会很有帮助，这样遇到您的问题的其他人就可以清楚地了解他们如何从使用您的解决方案中受益:]

标签： angular karma-jasmine

【解决方案1】：

只是想补充一点。

使用新的 Angular 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>

【讨论】：

我有一个非常简单的应用程序，它在一个模块中包含多个组件。我已将它添加到我的模块中...我仍然收到错误...
谢谢迦勒。运行简单测试时出现错误。不过我想通了......我没有将CUSTOM_ELEMENTS_SCHEMA 添加到我的单元测试假模块中。我一这样做，它就不再抱怨了。
有没有办法定义允许的自定义元素？使用CUSTOM_ELEMENTS_SCHEMA 可能会导致难以找到的错误，但我想在我的控件中为ng-content 部分使用自定义元素名称，而不使用那些导致错误的特定元素名称，也不会为它们创建只会是ng-的组件内容...
@Caleb 您能否提供一个快速代码示例来说明您的意思看起来schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 行需要添加到您使用HTML 标记的每个组件中?看起来 Component 装饰器不接受 schemas 参数。
嘿@DannyBullis，而不是Component 装饰器，它位于NgModule 装饰器中。您需要为该组件创建一个模块，然后您可以在那里指定架构。 Link to docs and an example.

【解决方案2】：

这是由以下人员修复的：

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

b) 添加

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

和

schemas: [
  CUSTOM_ELEMENTS_SCHEMA
],

到你的模块。

【讨论】：

别忘了声明它......它位于@angular/core。这样的东西应该适合：import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
这篇文章可以帮助您遵循以下程序：medium.com/google-developer-experts/…
向每个组件添加模式：[ CUSTOM_ELEMENTS_SCHEMA ]，成功了！谢谢！
角度 9 中不存在模式
否；没有解决我的问题……也许是 Angular 11 的问题

【解决方案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();
  }));

【讨论】：

谢谢！我花了很长时间 #&@% 才找到这个。

【解决方案4】：

在@NgModule({})in 'app.module.ts' 下添加以下内容：

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

【讨论】：

但是现在你的整个应用都允许自定义标签了。

【解决方案5】：

这对我也不起作用。我变了

CUSTOM_ELEMENTS_SCHEMA

为

NO_ERRORS_SCHEMA

本文建议： https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

现在可以了。

【讨论】：

不错！它对我有用。我想在我的组件 HTML 上添加 XML 元素，但我遇到了错误。非常感谢
在 Angular 元素（Angular 8）内的 Angular 元素中提供 Angular 元素添加 CUSTOM_ELEMENTS_SCHEMA 没有帮助，但 NO_ERRORS_SCHEMA 确实做到了，所有独立 Angular 元素的嵌套现在都像一个魅力
这对我有用 TestBed。元素工作正常，但测试失败。加了schemas: [NO_ERRORS_SCHEMA]，就好了。

【解决方案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
在我们要使用<app-logout>的模块中导入AccountModule 从 '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。

【讨论】：

idem +1 没有更多错误，但没有 dom 更新了，尝试使用 '-' 使那些选择器工作的解决方法是 ####!!!&&ù*$
非常感谢，一周后，我发现它无法在 ionic 中使用延迟加载
@Arun - 您的解决方案是 100% 准确的，1）需要添加到导出和 2）不需要 custom_elements_schema
我遇到了同样的错误，我在声明条款中需要的每个模块中设置了我的组件。我没有使用 CUSTOM_ELEMENTS_SCHEMA 并且工作过。
谢谢伙计... 100% 工作。我的 Angular 版本是 11。

【解决方案7】：

对于包含 Angular Material 的组件，我的单元测试出现了类似的错误。根据上面@Dan Stirling-Talbert 的回答，将此添加到我的组件 .spec 文件中，并且从我的单元测试中清除了错误。

Import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

然后在生成的 beforeEach() 语句中添加 schema：

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

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

【讨论】：

【解决方案8】：

只需阅读这篇文章并根据 angular 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 中，请确保你使用的任何新自定义元素的名称中都有一个“破折号”，例如。等等。

【讨论】：

名称中有破折号？为什么要强加这么愚蠢的约定？
我只是在我刚开始在 Ionic3 中使用延迟加载并且只有在我尝试为 web 构建时才遇到这个问题。能否请发布您提到的文档的链接。谢谢。

【解决方案9】：

这篇文章比较长，对这个问题给出了更详细的解释。

当你有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 文件：

 <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

【讨论】：

这正是我要找的，谢谢分享！

【解决方案10】：

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

import { ClarityModule } from 'clarity-angular';

另外，在导入中包含模块。

imports: [ ClarityModule ],

【讨论】：

嘿，伊沙尼。您能否还解释一下它为什么起作用？
如果我们访问CUSTOM_ELEMENTS_SCHEMA，angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA 的文档，我们会发现 CUSTOM_ELEMENTS_SCHEMA 允许 NgModule 包含带有破折号 case(-) 的非 Angular 元素{类似于此场景}。导入的清晰度模块默认包含所有的clr图标等，我们也可以使用清晰度模块的其他功能。
这与这里的问题无关。你如何通过导入清晰度模块来解决它？ @Ishani
如果您阅读了问题说明，Angular 无法识别 clr-header。clr-icon 和其他人也会出现同样的错误。正如我在之前的评论中提到的，Clarity 模块默认包含这些。我希望它回答了你的问题。

【解决方案11】：

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

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

所以，我的父组件的规范文件需要有子组件的声明，以及孩子的孩子组件。这终于为我解决了这个问题。

【讨论】：

【解决方案12】：

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

导入您的组件并声明它

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

@NgModule({
  declarations: [
    MyComponent,
  ]

【讨论】：

【解决方案13】：

禁用 AOT 和构建优化器至少可以构建：

"buildOptimizer": false,
"aot": false,

【讨论】：

【解决方案14】：

这对我不起作用（使用 2.0.0）。对我有用的是导入 RouterTestingModule。

我通过在规范文件中导入 RouterTestingModule 解决了这个问题。

import {
    RouterTestingModule
} from '@angular/router/testing';

  beforeEach(() => {

        TestBed.configureTestingModule({
            providers: [
                App,
                AppState,
                Renderer,
                {provide: Router,  useClass: MockRouter }
            ],
            imports: [ RouterTestingModule ]
        });

    });

【讨论】：

【解决方案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 { }

【讨论】：

【解决方案16】：

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

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

【讨论】：

【解决方案17】：

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

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

【讨论】：

【解决方案18】：

遇到了类似的问题，但结果发现组件名称（选择器名称）有拼写错误。所以 Angular 无法导入模块。

【讨论】：

【解决方案19】：

你用过webpack吗...如果是请安装

angular2-template-loader

然后放上去

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

【讨论】：

我无法对由 ng g 生成的组件创建的默认测试进行路径处理并得到相同的错误。本主题中的任何内容都没有帮助:(只有在对组件规范文件发表评论时，我才会删除错误:(
我明白自定义标签仅适用于低于 v2 的角度？！我在 youtube 中检查了一些东西，我正在尝试在 v4 环境中测试我的 v2 代码