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

请帮助。

当前回答

在我的例子中，我已经在其中生成了一个新模块和一个新组件，但是我还没有在component-name.module.ts中添加一些自定义编写的共享模块文件和适当的路由配置应该添加到component-name.routing.module中。ts文件。检查其他组件的一致性。

2022-09-01 11:35:49

其他回答

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

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

2022-09-11 08:20:16

我有一个类似的问题，但没有一个提到的解决方案工作。最后我意识到我有一个路由问题:

我想如果我在应用程序路由中指定我的组件。模块如下:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './pages/main/main.component';

const routes: Routes = [
  {
    path: '', 
    component: MainComponent
  },
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我将不必在我的AppModule中导入MainModule，这是错误的，因为这里只有组件被导入。MainModule中声明的任何其他组件将不可见，这将导致您所描述的错误消息。

解决方案1: 导入声明模块解决方案2: 惰性加载组件，如下所示:

const routes: Routes = [
{
    path: '', loadChildren: () => import('path_to_your_declaringModule').then(m => m.declaringModule)},
}

这是可行的，因为整个模块都导入到这里。

我意识到你在你的例子中没有使用路由，只是把这个发布给其他可能使用路由并在搜索解决方案时偶然发现这个问题的人，就像我一样。

2022-03-27 16:13:47

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

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

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

2019-01-27 23:24:10

有同样的问题，发现模板组件标签与<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

你是否像这样在app.module.ts中导入它并删除指令位:-

@NgModule({
    bootstrap: [AppComponent],
    imports: [MyComponentModule],// or whatever the name of the module is that declares your component.

    declarations: [AppComponent],
    providers: []
})
export class AppModule {}

你的MyComponentModule应该是这样的

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

2017-05-12 12:13:19

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

推荐文章

最新文章

标签