如果'<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中。模式来抑制此消息。

请帮助。

当前回答

在我的例子中，我在Shared模块中有一个组件。

组件正在加载并且工作良好，但typescript用红线突出显示html标记，并显示此错误消息。

在这个组件中，我注意到我没有导入rxjs操作符。

import {map} from 'rxjs/operators';

当我添加这个导入时，错误消息消失了。

检查组件内的所有导入。

希望它能帮助到别人。

2020-02-21 01:36:57

其他回答

在我的例子中，我正在为一个使用子组件的组件编写单元测试，并且我正在编写测试以确保这些子组件在模板中:

it('should include the interview selection subview', () => {
    expect(fixture.debugElement.query(By.css('app-interview')))
    .toBeTruthy()  
  });

我没有得到一个错误，但一个警告:

警告:“应用面试”不是一个已知的元素: 如果'app-interview'是一个Angular组件，那么验证它是这个模块的一部分。警告:“应用面试”不是一个已知的元素: 如果'app-interview'是一个Angular组件，那么验证它是这个模块的一部分。如果'app-interview'是一个Web组件，那么将'CUSTOM_ELEMENTS_SCHEMA'添加到'@NgModule '中。这个组件的模式为了压制这条信息。”

此外，在测试期间，子组件没有在浏览器中显示。

我使用ng g c newcomponent来生成所有的组件，所以它们已经在appmodule中声明了，而不是我正在指定的组件的测试模块。

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EditorComponent,
        InterviewComponent]
    })
    .compileComponents();
  }));

2020-02-21 10:54:34

有同样的问题，发现模板组件标签与<app-[component-name]></app-[component-name]>一起工作。因此，如果你的组件名为mycomponent.component.ts:

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <h4>Something</h4>
    <app-mycomponent></app-mycomponent>
  `,

2020-08-12 19:55:53

这可能是html标签组件的名称

你可以在html中使用这样的东西<mycomponent></mycomponent>

你必须使用这个<app-mycomponent></app-mycomponent>

2017-12-18 07:59:59

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

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

2022-09-11 08:20:16

不要导出默认的MyComponentComponent类!

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

我不小心做了一个…

export default class MyComponentComponent {

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

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

import { MyComponentComponent } from '...';

它有

import MyComponentComponent from '...';

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

export class MyComponentComponent {

没有违约。利润。

2020-06-19 19:21:59

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

推荐文章

最新文章

标签