Angular模块管理问题：页面组件无法访问共享组件

问题出在Angular模块的封装机制和共享组件模块的配置上，按以下步骤修改即可：

1. 配置共享组件模块（ComponentsModule） #

确保共享组件在模块中声明并导出，这样其他模块才能访问它：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 引入你的共享组件
import { SharedComponent } from './shared/shared.component';

@NgModule({
  declarations: [
    SharedComponent // 声明组件，告知Angular这是该模块的成员
  ],
  imports: [
    CommonModule
  ],
  exports: [
    SharedComponent // 导出组件，允许其他导入该模块的组件使用
  ]
})
export class ComponentsModule { }

2. 在页面模块中导入共享组件模块 #

在页面模块（PagesModule）的imports数组中添加共享组件模块，这样页面组件就能访问共享组件了：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 引入你的页面组件
import { HomePageComponent } from './home-page/home-page.component';
// 引入共享组件模块
import { ComponentsModule } from '../components/components.module';

@NgModule({
  declarations: [
    HomePageComponent
  ],
  imports: [
    CommonModule,
    ComponentsModule // 导入共享模块
  ]
})
export class PagesModule { }

原理说明 #

Angular模块是封闭的作用域，模块内的组件默认只能被本模块内的其他组件访问。只有通过exports数组暴露组件，再让目标模块导入该共享模块，才能实现跨模块组件复用。

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