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

请帮助。

当前回答

这可能是晚了，但我得到了同样的问题，但我重建(ng serve)项目和错误已经消失了

2020-10-09 16:36:26

其他回答

在MyComponentModule中声明你的MyComponentComponent 将你的MyComponentComponent添加到MyComponentModule的exports属性中

mycomponentModule.ts

@NgModule({
   imports: [],
   exports: [MyComponentComponent],
   declarations: [MyComponentComponent],
   providers: [],
})

export class MyComponentModule {
}

将MyComponentModule添加到AppModule imports属性中

app.module.ts

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

重要的是如果你仍然有这个错误，停止你的服务器从终端ctrl+c，并再次运行ng serve -o

2019-08-22 15:18:54

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

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

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

2019-01-27 23:24:10

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

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

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

2017-12-18 07:59:59

在你的components.module.ts中，你应该像这样导入IonicModule 这样的:

import {IonicModule} from '@ionic/angular';

然后像这样导入IonicModule:

  imports: [
    CommonModule,
    IonicModule
  ],

所以你的components.module.ts会像这样:

import { CommonModule } from '@angular/common';
import {PostComponent} from './post/post.component'
import { IonicModule } from '@ionic/angular';

@NgModule({
  declarations: [PostComponent],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [PostComponent]
})
export class ComponentsModule { }```

2019-10-12 13:57:56

转到tsconfig。json文件。把这段代码写在angularCompilerOption下:

 "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true,
     **"enableIvy": false**
 }

2020-09-01 06:42:53

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

推荐文章

最新文章

标签