如何在Angular项目中引用不同文件夹下的组件

问题根本原因 #

你当前将通用的FooterComponent仅声明在了业务模块HomeModule中，Angular中组件默认仅对声明它的模块内部可见，其他业务模块（比如报错的Terms页所属模块）无法直接访问，因此触发未知元素报错。

解决步骤 #

1. 抽离通用组件为独立共享模块 #

在/src/app/components目录下新建components.module.ts，统一管理所有通用组件的声明和导出：

// src/app/components/components.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FooterComponent } from './footer/footer.component';
// 后续新增的通用组件都在此处导入

@NgModule({
  declarations: [
    FooterComponent
    // 所有通用组件都在此处声明
  ],
  imports: [
    CommonModule
  ],
  exports: [
    FooterComponent
    // 需要对外暴露给其他模块使用的组件都在此处导出
  ]
})
export class ComponentsModule { }

2. 调整原有HomeModule配置 #

删除HomeModule中FooterComponent的声明，改为导入刚创建的ComponentsModule：

// 修改后的HomeModule代码
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HomeRoutes } from './home.routes';
import { TranslateModule } from '@ngx-translate/core';
import { ComponentsModule } from 'src/app/components/components.module';

import { HomeComponent } from './home.component';

@NgModule({
  declarations: [
    HomeComponent
  ],
  exports: [HomeComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(HomeRoutes),
    TranslateModule,
    ComponentsModule
  ]
})
export class HomeModule { }

3. 在需要使用通用组件的业务模块中导入共享模块 #

比如报错的Terms页所属的TermsModule，在其imports数组中加入ComponentsModule即可：

// 示例TermsModule配置
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ComponentsModule } from 'src/app/components/components.module';
import { TermsComponent } from './terms.component';

@NgModule({
  declarations: [TermsComponent],
  imports: [
    CommonModule,
    ComponentsModule
  ]
})
export class TermsModule { }

注意事项 #

• Angular组件仅在声明它的模块内默认可见，跨模块使用必须满足「声明组件的模块导出该组件 + 使用方模块导入声明模块」两个条件
• 不要在多个模块中重复声明同一个组件，会触发重复声明报错，通用组件统一放在共享模块管理是官方推荐的最佳实践

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