Angular 17升级至18后router-outlet未识别问题求助

问题描述 #

将Angular版本从12逐步升级至17后再升级到18，此前无异常，但升级到18后出现以下问题：

• 控制台报错：'router-outlet' is not a known element
• 编译完成后应用停留在主界面，同时出现Cannot read properties of null错误

相关代码 #

app.component.ts #

<router-outlet></router-outlet>

app.module.ts #

@NgModule({ 
  declarations: [
    AppComponent,
    PrivateContainerComponent,
    LogisticaComponent,
    ProductionComponent,
    AdministrationComponent,
    EstadisticasComponent,
    SecurityComponent,
    PublicContainerComponent,
    EvaluacionesComponent,
    ExtranjerosComponent
  ],
  bootstrap: [AppComponent], 
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RoutingModule,
    NgxExtendedPdfViewerModule,
    PdfViewerModule,
    NgxSpinnerModule,
    RouterModule,
    FormsModule,
    ColorPickerModule,
    OverlayModule,
    NgIdleKeepaliveModule.forRoot(),
    ToastrModule.forRoot({
        timeOut: 5000,
        preventDuplicates: true
    }),
    StoreModule.forRoot({}),
    CoreModule,
    SharedModule,
    VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule,
    JwtModule.forRoot({
        config: {
            tokenGetter: getAccessToken
        }
    })
  ], 
  providers: [
    ToastrService,
    MenuService,
    DatePipe,
    { provide: LOCALE_ID, useValue: 'es-CL', },
    provideHttpClient(withInterceptorsFromDi()),
  ] 
})
export class AppModule {
  constructor() {}
}

app-routing.ts #

export const appRoutes: Routes = [
  {
    path: 'public',
    component: PublicContainerComponent,
    children: [
      {
        path: '',
        loadChildren: () => import('../app/features/login-lazy.module').then(m => m.LoginLazyModule),
      }
    ],
  },
  { path: 'login', component: MainLoginComponent },
  {
    path: 'home',
    component: PrivateContainerComponent,
    children: [
      {
        path: 'produccion',
        component: ProductionComponent,
        children: [
          {
            path: '',
            loadChildren: () => import('../app/features/produccion/facturas-lazy.module').then(m => m.FacturasLazyModule),
          },
          {
            path: '',
            loadChildren: () => import('../app/features/produccion/logistica-lazy.module').then(m => m.LogisticaLazyModule),
          },
          {
            path: '',
            loadChildren: () => import('../app/features/produccion/personal-lazy.module').then(m => m.PersonalLazyModule),
          },
          {
            path: '',
            loadChildren: () => import('../app/features/produccion/gestion-produccion-lazy.module').then(m => m.GestionProduccionLazyModule),
          },
          {
            path: '',
            loadChildren: () => import('../app/features/produccion/personal-mantenedores-lazy.module').then(m => m.PersonalMantenedoresLazyModule),
          },
          {
            path: 'miasistencia',
            component: CalendarioAsistenciaComponent,
          },
        ],
      },
      {
        path: 'administracion',
        component: AdministrationComponent,
        children: [
          {
            path: '',
            loadChildren: () => import('../app/features/administracion/logistica-admin-lazy.module').then(m => m.LogisticaAdminLazyModule),
          },
          {
            path: '',
            loadChildren: () => import('../app/features/administracion/aprobaciongg-lazy.module').then(m => m.AprobacionGGLazyModule),
          },
          {
            path: '',
            loadChildren: () => import('../app/features/administracion/facturas-admin-lazy.module').then(m => m.FacturasAdminLazyModule),
          },
          {
            path: '',
            loadChildren: () => import('../app/features/administracion/personal-admin-lazy.module').then(m => m.PersonalAdminLazyModule),
          },
          {
            path: '',
            loadChildren: () => import('../app/features/administracion/documentos-lazy.module').then(m => m.DocumentosLazyModule),
          },
          {
            path: 'miasistencia',
            component: CalendarioAsistenciaComponent,
          },
        ],
      },
      {
        path: 'seguridad',
        component: SecurityComponent,
        children: [
          {
            path: '',
            loadChildren: () => import('../app/features/seguridad/usuarios-lazy.module').then(m => m.UsuariosLazyModule),
          },
          {
            path: '',
            loadChildren: () => import('../app/features/seguridad/sistema-lazy.module').then(m => m.SistemaLazyModule),
          },
          {
            path: 'miasistencia',
            component: CalendarioAsistenciaComponent,
          },
        ],
      },
      {
        path: 'evaluacion',
        component: EvaluacionesComponent,
        children: [
          {
            path: '',
            loadChildren: () => import('../app/features/evaluaciones/evaluaciones-lazy.module').then(m => m.EvaluacionesLazyModule),
          },
        ],
      },   
      {
        path: 'extranjeros',
        component: ExtranjerosComponent,
        children: [
          {
            path: '',
            loadChildren: () => import('../app/features/extranjeros/extranjeros-lazy.module').then(m => m.ExtranjerosLazyModule),
          },
        ],
      },
      {
        path: 'miasistencia',
        component: CalendarioAsistenciaComponent,
      },
      {
        path: 'switch',
        component: SwitchComponent,
      },
    ],
  },
  { path: '**', pathMatch: 'full', redirectTo: '/public/userlogin' },
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, { enableTracing: false })],
  exports: [RouterModule],
})
export class RoutingModule { }

解决方案 #

• 移除重复的RouterModule导入：在app.module.ts的imports数组中，同时存在RoutingModule和RouterModule，而RoutingModule已经导出了RouterModule，重复导入会导致路由模块初始化冲突。删除单独的RouterModule导入项即可。
• 修复路由配置冲突：路由中存在多个子路由使用path: ''的情况（比如produccion下的多个懒加载模块），Angular 18对路由匹配的严格性提升，这种重复配置会导致路由解析异常。给每个懒加载模块分配唯一的子路径，或者调整加载顺序确保只有一个空路径路由。
• 清理缓存并重新构建：升级后残留的缓存可能导致模块加载异常，执行以下命令清理：

  npm clean-install
  ng cache clean
  ng build
  

• 验证第三方库兼容性：确认所有依赖的第三方库（如NgxExtendedPdfViewerModule、NgxSpinnerModule等）是否已适配Angular 18，未适配的旧库可能干扰路由模块的正常加载，需升级对应库到兼容版本。
• 检查HttpClient配置：确保provideHttpClient(withInterceptorsFromDi())的配置符合Angular 18的要求，NgModule模式下该配置放在providers中是正确的，避免混合独立组件的配置方式。

内容的提问来源于stack exchange，提问作者Felipe andres Bustos Sepulveda