Angular 6中如何通过模块指定多组件？遇组件识别错误求解决

你的问题出在模块的配置和导入逻辑上，我来一步步帮你修正：

1. 修复joke.module.ts的错误配置 #

你当前的JokeModule有两个关键问题：

• 错误地将AppComponent放在了imports数组里：imports只能用来导入其他NgModule，不能直接放组件，这是完全错误的用法。
• 没有导出JokeComponent：如果其他模块要使用这个组件，必须在exports数组里声明它，否则组件的选择器无法被外部模块识别。
• 多余的entryComponents：Angular 9+之后，除非是动态创建的组件，否则不需要配置这个选项，可以直接移除。

修正后的joke.module.ts代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; // 可选但建议添加，如果组件用到Angular内置指令（如*ngIf）会需要它
import { JokeComponent } from './joke.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    JokeComponent
  ],
  exports: [
    JokeComponent // 导出组件，让外部模块能识别<joke>标签
  ]
})
export class JokeModule { }

2. 在根模块（AppModule）中导入JokeModule #

你不应该在AppComponent里直接导入JokeModule，模块的导入必须在NgModule的imports数组中完成。找到你的src/app/app.module.ts，将JokeModule添加到imports数组：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { JokeModule } from './joke/joke.module'; // 导入JokeModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    JokeModule // 在这里添加模块导入
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 清理AppComponent中的多余代码 #

把AppComponent里的import { JokeModule } from './joke/joke.module';这一行删掉，组件不需要导入模块，模块的依赖关系由父模块统一管理。

完成以上三步后，重启你的Angular应用，<joke>标签就能正常渲染了。

内容的提问来源于stack exchange，提问作者handro1104