Angular 5：懒加载模块中无法访问组件的问题求助

嘿，我明白你遇到的这个困扰了——这其实是Angular模块系统里一个很容易踩的坑，核心原因是懒加载模块拥有完全独立的模块上下文和注入器，不会自动继承父模块的依赖导出。

虽然你在Parent Module里导入并导出了Shared Module，但这只能让Parent Module的直接子组件（非懒加载的那些）使用TestComponent。而懒加载的Child模块是应用启动后才异步加载的独立模块，它和Parent模块的依赖树是分开的，所以根本看不到Parent导出的Shared Module。

快速解决方案：在Child懒加载模块中显式导入Shared Module #

你只需要给Child Module也加上Shared Module的导入就行，步骤很简单：

1. 打开你的Child Module文件（比如child.module.ts），先导入Shared Module：

   import { SharedModule } from '../shared/shared.module';
   

2. 在@NgModule的imports数组里添加Shared Module：

   @NgModule({
     declarations: [ChildComponent], // 你的懒加载模块内的组件
     imports: [
       CommonModule,
       SharedModule, // 关键：显式导入Shared Module
       RouterModule.forChild(childRoutes) // 你的懒加载路由配置
     ]
   })
   export class ChildModule { }
   

额外提醒：优化Shared Module的写法（可选） #

如果你的Shared Module里还包含服务，为了避免懒加载模块创建多个服务实例，建议给Shared Module加上forRoot()模式：

// shared.module.ts
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestComponent } from './test.component';
import { SharedService } from './shared.service';

@NgModule({
  declarations: [TestComponent],
  exports: [TestComponent], // 必须导出组件，其他模块才能用
  imports: [CommonModule]
})
export class SharedModule { 
  // 用forRoot提供服务，确保整个应用只有一个实例
  static forRoot(): ModuleWithProviders<SharedModule> {
    return {
      ngModule: SharedModule,
      providers: [SharedService]
    };
  }
}

然后在Parent Module里用SharedModule.forRoot()导入，Child Module里只需要导入SharedModule（不带forRoot）就可以了。

这样调整后，你的Child懒加载模块就能正常使用TestComponent啦！

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