如果'<selector>'是一个Angular组件，那么验证它是这个模块的一部分

我是Angular2的新手。我试图创建一个组件，但显示一个错误。

这是app.component.ts文件。

import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component.component';

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <h4>Something</h4>
    <my-component></my-component>
  `,
  directives: [MyComponentComponent]
})
export class AppComponent { name = 'Sam' }

这是我要创建的组件。

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

@Component({
selector: 'my-component',
template: `
    <p>This is my article</p>
`
})

export class MyComponentComponent {

}

显示两个错误:

如果my-component是一个Angular组件，那么验证它是否是这个模块的一部分。如果my-component是Web组件，那么将CUSTOM_ELEMENTS_SCHEMA添加到@NgModule中。模式来抑制此消息。

请帮助。

当前回答

上述错误从Angular 9开始也会产生。这本书提供了一个解决方案。

该警告建议使用CUSTOM_ELEMENTS_SCHEMA，但所讨论的元素不是Web组件。我们希望Angular直接忽略这些元素。因此，我们使用NO_ERRORS_SCHEMA，“允许任何元素上的任何属性的模式”。向各自的.spec文件添加模式:[NO_ERRORS_SCHEMA]可以消除错误。

await TestBed.configureTestingModule({
  declarations: [MyComponent],
  schemas: [NO_ERRORS_SCHEMA],
}).compileComponents();

2022-02-14 13:18:29

其他回答

你必须在你的AppComponent的同一个模块中声明你的MyComponentComponent。

import { AppComponent } from '...';
import { MyComponentComponent } from '...';

@NgModule({
   declarations: [ AppComponent, MyComponentComponent ],
   bootstrap: [ AppComponent ]
})
export class AppModule {}

2019-01-27 23:24:10

检查filename. ponent.ts中的选择器

在各种html文件中使用标签

<my-first-component></my-first-component>

应该是

<app-my-first-component></app-my-first-component>

例子

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.scss']
})

2019-01-26 13:02:08

不要导出默认的MyComponentComponent类!

与标题相关的问题，如果不是具体的问题:

我不小心做了一个…

export default class MyComponentComponent {

．.．这也把事情搞砸了。

为什么?当我把它放入声明时，VS Code添加了导入到我的模块，但不是…

import { MyComponentComponent } from '...';

它有

import MyComponentComponent from '...';

这并没有向上映射到下游，假设因为它没有在默认导入的任何地方“真正”命名。

export class MyComponentComponent {

没有违约。利润。

2020-06-19 19:21:59

希望你有app.module.ts。在app.module.ts中添加以下行-

 exports: [myComponentComponent],

是这样的:

import { NgModule, Renderer } from '@angular/core';
import { HeaderComponent } from './headerComponent/header.component';
import { HeaderMainComponent } from './component';
import { RouterModule } from '@angular/router';

@NgModule({
    declarations: [
        HeaderMainComponent,
        HeaderComponent
    ],
    imports: [
        RouterModule,
    ],
    providers: [],
    bootstrap: [HeaderMainComponent],
    exports: [HeaderComponent],
})
export class HeaderModule { }

2018-04-25 06:34:28

我有不同的模块除了app.module，例如主页。模块

我忘了把Home-page.component添加到Home-page。模块

2022-09-11 08:20:16

如果'<selector>'是一个Angular组件，那么验证它是这个模块的一部分

推荐文章

最新文章

标签