添加到 NgModule.schemas 的 CUSTOM _ ELEMENT _ SCHEMA 仍然显示错误

(我希望这没有什么明显的，我只是没有看到的时刻。花了6个小时升级到这个版本...)

502484 次浏览

小开

在这里你可以使用任何你想要的 HTML 标签。

<div class="container">
<boogey-man></boogey-man>
<my-minion class="one-eyed">
<job class="plumber"></job>
</my-minion>
</div>

小开

最佳答案

你的模块。

小开

现在成功了。

小开

并把它

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

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

小开

然后

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

Util.Component. ts

@Component({
selector: 'app-logout',
template: `<button class="btn btn-primary"(click)="logout()">Logout</button>`
})
export class LogoutComponent{}

> 在模块中，我们希望使用 <app-logout>

工具模块

@NgModule({
imports: [...],
exports: [
LogoutComponent
],
declarations: [LogoutComponent]
})
export class AccountModule{};

从“ util.module”导入{ AccountModule } ;

@NgModule({
imports: [
CommonModule, AccountModule
],
declarations: [DashboardComponent]
})
export class DashboardModule { }

需要导出 LogoutComponent

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 是惰性加载时，它不工作。
在我们想要使用 <app-logout>的模块中导入 AccountModule 从“ util.module”导入{ AccountModule } ;

@NgModule({
imports: [
CommonModule, AccountModule
],
declarations: [DashboardComponent]
})
export class DashboardModule { }

当在延迟加载的情况下使用 CUSTOM_ELEMENTS_SCHEMA时，错误被抑制，但组件不被添加到 dom。

小开

当在延迟加载的情况下使用 CUSTOM_ELEMENTS_SCHEMA时，错误被抑制，但组件不被添加到 dom。

小开

读读这篇文章，根据角度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 _ ELEMENT _ SCHEMA 添加到 NgModule 中，请确保您使用的任何新的自定义元素的名称中都有一个“破折号”，例如。等等。

小开

我想添加一个额外的信息，因为上面接受的答案没有完全修复我的错误。

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

因此，我的父组件的 spec 文件需要有子组件的声明，以及子组件的子组件。这终于解决了我的问题。

小开

你也可以看到 https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

小开

对我来说，我需要看看:

1. If 'cl-header' is an Angular component, then verify that it is part of this module.

对于包含角材料的组件，我的单元测试也出现了类似的错误。根据@Dan Stirling-Talbert 上面的回答，把这个添加到我的组件中。Spec 文件，并且从我的单元测试中清除了错误。

Import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

这意味着您的组件不包含在 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 { }

小开

如果使用自定义元素测试组件，则在运行单元测试时也可能出现这种情况。在这种情况下，需要将 custom_ element _ schema 添加到 testingModule，该模块在。组件的 spec.ts 文件。下面是一个如何开始启动 header.Component ent.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();
}));

小开

然后将模式添加到生成的 before each ()语句中:

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

这是一篇相当长的文章，对这个问题给出了更详细的解释。

问题(在我的例子中)出现在你有多时隙内容投影的时候

我的因果报应是:

更多信息请参见内容投影内容投影。

例如，如果你有一个组件，它看起来像这样:

如果“ mat-panel-title”是一个 Web 组件，那么将“ CUSTOM _ ELEMENT _ SCHEMA”添加到该组件的“@NgModule. schemas”以抑制此消息。

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>

其档案:

@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>

内容”>

然后你会得到模板解析错误，这不是一个已知的角度分量，事实上它不是-它只是在你的组件中一个 n- 内容的引用:

最简单的解决方法就是

schemas: [
CUSTOM_ELEMENTS_SCHEMA
],

到你的应用程序模块

< n- 内容 >

但是有一种简单而干净的方法可以解决这个问题——不用使用 <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 _ ELEMENT _ SCHEMA

因此，如果您像我一样，不想将 CUSTOM _ ELEMENT _ SCHEMA 添加到模块中，那么以这种方式使用组件不会产生错误，而且更加清晰。

关于这个问题的更多信息-https://github.com/angular/angular/issues/11251

有关角度内容投影的更多信息 -https://blog.angular-university.io/angular-ng-content/

你也可以看到 https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

小开

但是有一种简单而干净的方法可以解决这个问题——不用使用 <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 _ ELEMENT _ SCHEMA

您可以尝试以下操作。

因此，如果您像我一样，不想将 CUSTOM _ ELEMENT _ SCHEMA 添加到模块中，那么以这种方式使用组件不会产生错误，而且更加清晰。

关于这个问题的更多信息-https://github.com/angular/angular/issues/11251

有关角度内容投影的更多信息 -https://blog.angular-university.io/angular-ng-content/

你也可以看到 https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

小开

您需要向文件 你的模块，模块添加以下内容:

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

小开

imports: [ ClarityModule ],

小开

导入组件并声明它

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


@NgModule({
declarations: [
MyComponent,
]

小开

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

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

小开

禁用 AOT 和构建优化器至少可以让它构建:

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

禁用 AOT 和构建优化器至少可以让它构建:

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

小开

通过从 CDN 复制和粘贴来添加它们。(只需做其中一个)

小开

另一个可能出现此错误的原因是如果加载 Bootstrap 两次。例如，首先运行 npm 安装引导程序、 jquery、 popper，然后通过从 CDN 复制粘贴来添加它们。(只要做其中一个)