Angular 11 拆分主模块与懒加载模块时组件、指令识别异常

所有识别类报错均来自Angular模块独立作用域规则不匹配：懒加载模块拥有独立的模板编译作用域，无法直接访问根模块的模板声明、导入的第三方指令与库组件能力。

各报错对应问题点 #

• NG8001: <app-downloads-sidebar> 不是已知元素：组件声明跨作用域，AppLayoutComponent和AppDownloadsSidebarComponent没有被纳入同一个模块的declarations数组
• NG8002: [dropup] 不是已知属性：承载dropdown指令的第三方模块仅在根AppModule导入，没有被引入到AppLayoutComponent所属的模块作用域，模板编译时找不到对应指令
• NG8001: <lib-file-input> 不是已知元素：NineGoldLibModule没有将FileInputComponent纳入exports数组，外部模块即使import了该库，也无法在自身模板中使用对应组件
• NG8001: <router-outlet> 不是已知元素：AppLayoutComponent所属的模块没有导入导出RouterModule的路由模块，模板编译时识别不到路由出口组件

修复步骤 #

1. 统一组件声明作用域
   • 将AppLayoutComponent、AppDownloadsSidebarComponent、所有业务子页面组件，全部从根AppModule的declarations数组移除，统一归入ToolsAppModule的declarations数组。禁止将布局组件留在根AppModule：根模块的模板作用域无法访问懒加载模块内的组件、指令与库能力。
2. 修正懒加载路由配置
   • 移除ToolsAppRoutingModule中重复的path: 'app'路由层级，因为根路由已经配置了该路径的懒加载入口，直接将原/app下的嵌套路由作为forChild的顶级配置：

     const routes: Routes = [
       {
         path: '',
         component: AppLayoutComponent,
         canActivate: [NewAuthGuard],
         children: [
           { path: 'downloads', component: DownloadsPageComponent, canActivate: [NewAuthGuard] },
           { path: 'raml-converter', component: RamlConverterPageComponent, canActivate: [NewAuthGuard] },
           { path: 'json-converter', component: JsonConverterPageComponent, canActivate: [NewAuthGuard] },
           { path: '', redirectTo: 'raml-converter', pathMatch: 'full' }
         ]
       }
     ];
     
     @NgModule({
       imports: [RouterModule.forChild(routes)],
       exports: [RouterModule]
     })
     export class ToolsAppRoutingModule {}
     

   • 确认ToolsAppModule显式导入ToolsAppRoutingModule，保证模块内组件模板可以正常识别<router-outlet>元素。
3. 补全依赖导入链路
   • 将原先在根AppModule导入的、用于布局模板的第三方指令模块（如承载dropdown能力的BsDropdownModule），迁移到ToolsAppModule的imports数组。懒加载模块的注入器是独立的，根模块导入的依赖不会自动透传到懒加载模块的编译作用域。
   • 检查NineGoldLibModule的exports配置，确认对应lib-file-input的FileInputComponent被加入导出列表，否则外部模块即使import该库也无法使用对应组件。
4. 排除声明冲突
   • 校验所有组件的声明位置，确保没有同一个组件同时被根AppModule和ToolsAppModule声明，避免触发Angular编译阶段的作用域冲突。

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