Angular NG8001错误：'app-home-banner'非已知元素问题咨询

问题描述 #

我尝试在HomeComponent中加载HomeBannerComponent，遇到两种不同的运行结果：

• 为HomeComponent创建home.module.ts并在其中声明HomeBannerComponent后，home.component.html中的<app-home-banner>标签报错：NG8001: 'app-home-banner' is not a known element
• 撤销模块修改，将HomeBannerComponent移到app.module.ts的声明列表中，放到app.component.html里就能正常渲染

相关代码 #

home.component.ts #

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent { }

home.module.ts #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { HomeBannerComponent } from '../home-banner/home-banner.component';

@NgModule({
  declarations: [HomeComponent, HomeBannerComponent],
  imports: [
    CommonModule
  ],
  bootstrap: [HomeComponent]
})
export class HomeModule { }

home-banner.component.ts #

import { Component } from '@angular/core';

@Component({
  selector: 'app-home-banner',
  templateUrl: './home-banner.component.html',
  styleUrls: ['./home-banner.component.css']
})
export class HomeBannerComponent {

}

app.module.ts #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { ResumeComponent } from './resume/resume.component';
import { ProjectsComponent } from './projects/projects.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'resume', component: ResumeComponent },
  { path: 'projects', component: ProjectsComponent },
  { path: 'contact', component: ContactComponent }
];

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

原因分析 #

本质是Angular的模块作用域规则在起作用：

1. 你创建的home.module.ts没有被任何上层模块（比如根模块AppModule）导入，Angular无法识别这个模块里声明的HomeBannerComponent。即便路由里直接引用了HomeComponent，Angular还是会把它当作根模块下的组件，而不是HomeModule里的组件。
2. 当把HomeBannerComponent放到AppModule的declarations里时，它属于根模块的全局作用域，整个应用的组件都能直接调用，所以在app.component.html里能正常工作。

解决办法 #

方案1：将HomeModule导入到根模块 #

修改app.module.ts，把HomeModule加入imports数组，同时删除home.module.ts里的bootstrap配置（只有根模块需要bootstrap组件）：

更新后的app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { HomeModule } from './home/home.module'; // 导入HomeModule

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HomeModule // 添加到导入列表
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

更新后的home.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { HomeBannerComponent } from '../home-banner/home-banner.component';

@NgModule({
  declarations: [HomeComponent, HomeBannerComponent],
  imports: [
    CommonModule
  ]
})
export class HomeModule { }

方案2：使用懒加载路由（推荐的模块化实践） #

如果想保持模块独立性，改用懒加载方式加载HomeModule，这样Angular会在访问首页时自动加载该模块，里面的组件就能正常使用。

步骤1：修改app-routing.module.ts，将HomeComponent的路由改为懒加载：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) }, // 懒加载HomeModule
  { path: 'resume', component: ResumeComponent },
  { path: 'projects', component: ProjectsComponent },
  { path: 'contact', component: ContactComponent }
];

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

步骤2：创建home-routing.module.ts，配置HomeModule的路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';

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

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

步骤3：修改home.module.ts，导入HomeRoutingModule并移除bootstrap配置：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { HomeBannerComponent } from '../home-banner/home-banner.component';
import { HomeRoutingModule } from './home-routing.module'; // 导入路由模块

@NgModule({
  declarations: [HomeComponent, HomeBannerComponent],
  imports: [
    CommonModule,
    HomeRoutingModule // 添加路由模块
  ]
})
export class HomeModule { }

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