Angular12实现懒加载时router-outlet提示不是已知元素如何解决

问题根因 #

MainComponent 归属SharedModule，但该模块未导入Angular的RouterModule，导致模板中的<router-outlet>标签无法被框架识别。以下是具体解决方案：

步骤1：修改SharedModule配置 #

找到shared/shared.module.ts文件，补充导入/导出RouterModule，同时确保MainComponent已在该模块声明并导出：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MainComponent } from './main/main.component';

@NgModule({
  declarations: [
    MainComponent
    // 其余共享组件可继续在此声明
  ],
  imports: [
    CommonModule,
    RouterModule // 新增导入RouterModule
  ],
  exports: [
    MainComponent,
    RouterModule // 导出RouterModule后，其他导入SharedModule的模块可直接使用路由相关指令
  ]
})
export class SharedModule { }

步骤2：修正HomeModule重复导入问题 #

BrowserModule仅允许在根模块AppModule中导入一次，你当前的HomeModule重复导入了该模块，删除对应导入即可，修改后代码如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeRoutingModule } from './home-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { SharedModule } from '../shared/shared.module';
import { HomeComponent } from './home.component';

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    BrowserAnimationsModule,
    HttpClientModule,
    HomeRoutingModule,
    SharedModule
  ],
  exports: [HomeComponent]
})
export class HomeModule { }

步骤3：移除AppRoutingModule中不必要的导入 #

AppRoutingModule不需要导入SharedModule，删除对应导入即可，修改后代码如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full'},
  { path: 'login', component: LoginComponent},
  { path: 'home', component: HomeComponent},
  { path: '**', component: HomeComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: false})],
  exports: [RouterModule],
})
export class AppRoutingModule {}

修改完成后重新执行ng serve启动项目即可解决报错。

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