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

【问题标题】：If '<selector>' is an Angular component, then verify that it is part of this module如果 '<selector>' 是一个 Angular 组件，那么验证它是这个模块的一部分
【发布时间】：2017-10-11 18:04:42
【问题描述】：

我是 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.schemas 以禁止显示此消息。

请帮忙。

【问题讨论】：

标签： angular typescript

【解决方案1】：

上述错误也是从 Angular 9 开始产生的。这个book 提供了一个解决方案。

“警告提示 CUSTOM_ELEMENTS_SCHEMA，但有问题的元素不是 Web 组件。我们希望 Angular 简单地忽略这些元素。因此我们使用 NO_ERRORS_SCHEMA，“允许任何元素上的任何属性的模式”。将schemas: [NO_ERRORS_SCHEMA] 添加到您各自的 .spec 文件中可以消除错误。

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

【讨论】：

【解决方案2】：

我正在使用 Angular v11，并且在尝试延迟加载组件 (await import('./my-component.component')) 时遇到此错误，即使 import 和 export 设置正确。

我终于发现解决方案是删除单独的专用模块文件并将模块内容移动到组件文件本身中。

rm -r my-component.module.ts

并在my-component.ts（同一文件）中添加模块

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

@NgModule({
  imports: [CommonModule],
  declarations: [MyComponent],
})
export class MyComponentModule {}

【讨论】：

如果您想在多个地方使用此组件，此解决方案可能不起作用

【解决方案3】：

这可能晚了，但我遇到了同样的问题，但我重建（ng serve）项目并且错误消失了

【讨论】：

【解决方案4】：

转到 tsconfig.json 文件。在angularCompilerOption下写这段代码：

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

不要`export default class MyComponentComponent`！

可能属于标题下的相关问题，如果不是具体问题：

我不小心做了一个...

export default class MyComponentComponent {

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

为什么？当我将其放入 declarations 时，VS Code 将导入添加到我的模块中，但不是...

import { MyComponentComponent } from '...';

有

import MyComponentComponent from '...';

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

export class MyComponentComponent {

没有default。利润。

【讨论】：

【解决方案7】：

检查父组件在哪个模块中声明...

如果您的父组件是在共享模块中定义的，您的子模块也必须如此。

父组件可以在共享模块中声明，而不是基于文件目录结构/命名的逻辑模块，在我的例子中，即使 Angular CLI 将其添加到错误的模块中。

【讨论】：

【解决方案8】：

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

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

我没有收到错误，而是警告：

警告：''app-interview' 不是已知元素：

如果“app-interview”是一个 Angular 组件，则验证它是该模块的一部分。警告：“app-interview”不是已知元素：

如果“app-interview”是一个 Angular 组件，则验证它是该模块的一部分。

如果“app-interview”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中禁止显示此消息。'

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

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

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

【讨论】：

【解决方案9】：

就我而言，我在共享模块中有一个组件。

组件正在加载并且运行良好，但打字稿用红线突出显示 html 标记并显示此错误消息。

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

import {map} from 'rxjs/operators';

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

检查组件内的所有导入。

希望对某人有所帮助。

【讨论】：

【解决方案10】：

在您的 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 { }```

【讨论】：

【解决方案11】：

在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

【讨论】：

最后一步是我有一段时间没有接触过的项目所需要的。在“npm install”“ng update”和“npm update”之后
感谢您明确提及exports 部分，这一步是我错过的。

【解决方案12】：

您的MyComponentComponent 应位于MyComponentModule。

在MyComponentModule 中，您应该将MyComponentComponent 放在“exports”中。

类似这样的，见下面的代码。

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

export class MyComponentModule {
}

并像这样将MyComponentModule 放在imports 中的app.module.ts 中（参见下面的代码）。

import { MyComponentModule } from 'your/file/path';

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

export class AppModule {}

完成此操作后，您的组件的选择器现在可以被应用识别。

您可以在这里了解更多信息：https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

干杯！

【讨论】：

如果您仍然遇到问题，请不要忘记检查在组件的 .ts 文件中声明的选择器。当您将组件放在父级的 html 文件中时，您可能忘记在 html 代码中添加“app-”。
我遇到了由于@Input 名称不正确引起的错误。非常具有误导性，因此在排除故障时删除组件标签中的输入。
我仍然有这个问题。我正在从 angular material/radio 导入 MatRadioModule，并且该模块中的指令抛出此错误。
这对于最新版本的 Angular 不再有效（我在 v.8 上测试过）
另一个没有直观意义的复杂而令人费解的问题。一如既往地感谢 angular。

【解决方案13】：

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

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

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

【讨论】：

【解决方案14】：

在你的 filename.component.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']
})

【讨论】：

【解决方案15】：

您是否像这样在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 {
}

【讨论】：

你忘了exports
它帮助了我，因为我能够导入和导出第 3 方角度组件。谢谢

【解决方案16】：

希望您拥有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 { }

【讨论】：

【解决方案17】：

也许这是html标签组件的名称

你在html中使用类似<mycomponent></mycomponent>的东西

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

【讨论】：

html 标记的名称确定 selector 属性。在这种情况下是my-component。

不要export **default** class MyComponentComponent！

不要`export default class MyComponentComponent`！