Angular惰性加载模块使用SharedModule时出现Angular Material未知元素错误

算力阿峰

2026-9-27

问题根因定位

核心错误出在AppRoutingModule的惰性加载配置：你当前loadChildren回调里导入的是LoginRoutingModule，而非实际承载组件、导入了SharedModule的LoginModule。路由直接加载路由模块的逻辑完全绕过了LoginModule的依赖导入规则，所以LoginComponent无法获取SharedModule导出的Material组件。

修复步骤

修改AppRoutingModule的路由配置，将loadChildren的导入目标替换为LoginModule：

const routes: Routes = [
  {
    path: 'login',
    loadChildren: () => import('@app/modules/login/login.module').then(m => m.LoginModule)
  }
];

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

确认LoginRoutingModule的配置正确，且仅在LoginModule中被导入：

// login-routing.module.ts 示例
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  { path: '', component: LoginComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LoginRoutingModule { }

在LoginModule中补充导入LoginRoutingModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import {SharedModule} from '@app/modules/shared/shared.module';
import { LoginRoutingModule } from './login-routing.module';

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    LoginRoutingModule
  ]
})
export class LoginModule { }

额外校验点