Angular多模块应用使用Core模块共享组件出现not a known element报错

你猜测的SiteLayout组件被多处引用导致作用域丢失的问题不成立，组件可被多模块合法引用，只要引用方正确导入组件所属模块即可，本次报错和该点无关。

问题根因 #

1. 特性模块路由配置错误 #

Feature路由模块中错误使用了RouterModule.forRoot()方法，该方法仅允许在应用根模块（AppModule）中调用，特性模块的路由必须使用RouterModule.forChild()注册。你当前的配置会将路由直接注册到根路由上下文，加载DashboardPageComponent时不会继承Feature模块的依赖注入与组件作用域，因此Feature模块引入的Core模块不生效。

2. Feature模块未声明自身组件 #

FeatureModule的@NgModule配置中缺少declarations字段，你需要将自身模块下的DashboardPageComponent声明到当前模块，Angular才会为该组件关联当前模块导入的所有共享组件能力。

3. 共享组件依赖倒置 #

你将通用共享组件PageSectionComponent存放在Feature业务模块的目录下，且Core模块反向导入了Feature模块内部的组件，违反了核心模块不依赖业务模块的设计规范，会导致循环依赖风险。

修正方案 #

1. 修复特性路由配置 #

修改feature-routing.module.ts的导入逻辑：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SiteLayoutComponent } from '@components/layouts/site-layout.component';
import { DashboardPageComponent } from '@feature/pages';

const routes: Routes = [
  {
    path: '',
    component: SiteLayoutComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, 
      { path: 'dashboard',  component: DashboardPageComponent }
    ]
  }
];

@NgModule({
  // 替换forRoot为forChild
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FeatureRoutingModule { }

2. 补全Feature模块声明 #

修改feature.module.ts，添加组件声明：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureRoutingModule } from './feature-routing.module';
import { CoreModule } from '../core/core.module';
import { DashboardPageComponent } from './pages/dashboard-page.component';

@NgModule({
  imports: [
    CommonModule,
    CoreModule,
    FeatureRoutingModule
  ],
  declarations: [DashboardPageComponent]
})
export class FeatureModule {}

3. 调整共享组件路径 #

将PageSectionComponent从feature/components目录迁移到Core模块的目录下，修正core.module.ts中的导入路径，避免Core模块依赖Feature模块。

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