Angular 11项目'router-outlet'触发NG8001非已知元素报错排查

抛出的编译报错：
Error: src/app/app.component.html:1:1 - error NG8001: 'router-outlet' is not a known element: If 'router-outlet' is an Angular component, then verify that it is part of this module

现有代码配置 #

• 根组件模板app.component.html内容：

<router-outlet></router-outlet>

• 根模块app.module.ts配置：

@NgModule({
  imports: [
    AppRoutingModule,
    AppStoreModule,
    BrowserModule,
    BrowserAnimationsModule,
    EffectsModule.forRoot(),
    HttpClientModule,
    AngularSvgIconModule.forRoot(),
    NgbModule,
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ApolloInterceptor,
      multi: true,
    },
    {
      provide: ErrorHandler,
      useValue: Sentry.createErrorHandler({
        showDialog: true,
      }),
    },
    {
      provide: Sentry.TraceService,
      deps: [Router],
    },
    {
      provide: APP_INITIALIZER,
      useFactory: () => () => {},
      deps: [Sentry.TraceService],
      multi: true,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

• 路由模块app.routing.ts配置：

import { NgModule } from '@angular/core'
import { Routes, RouterModule } from '@angular/guards'
import { ROUTES } from '@app/config'

const publicModule = () =>
  import('@app/components/pages/public/public.module').then((module) => module.PublicModule)
const privateModule = () =>
  import('@app/components/pages/private/private.module').then((module) => module.PrivateModule)

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: ROUTES.pages.public.children.signIn.path,
  },
  {
    path: '',
    children: [
      {
        path: ROUTES.pages.private.path,
        loadChildren: privateModule,
        canActivate: [PrivateGuard],
        canActivateChild: [PrivateGuard],
      },
      {
        path: ROUTES.pages.public.path,
        loadChildren: publicModule,
        canActivate: [PublicGuard],
        canActivateChild: [PublicGuard],
      },
    ],
  },
  {
    path: '**',
    redirectTo: ROUTES.pages.public.children.signIn.path,
  },
]

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
      relativeLinkResolution: 'legacy',
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

问题根因 #

逐行核对配置可以定位到，这个报错和网上常见的“忘了导入RouterModule”、“漏声明组件”这类通用问题无关，核心触发点是路由模块的导入路径笔误：

• Angular 11 官方API中，Routes接口、RouterModule模块、所有路由守卫类，全部是从@angular/router包导出的，根本不存在@angular/guards这个独立的官方包入口。
• 因为导入路径写偏，TypeScript编译时实际加载的是不存在的模块引用，哪怕代码里写了exports: [RouterModule]，导出的也是空值。连锁反应就是AppRoutingModule根本没把RouterModule包含的router-outlet组件注册到模板编译上下文，编译器自然会报“不识别该标签”的错误。
• 这个错误的隐蔽性在于：如果项目TypeScript配置没开严格的模块解析校验，导入不存在的包路径时不会立刻抛出“找不到模块”的错误，反而会先抛出依赖该模块的组件识别问题，很容易被误导去尝试各种常规修复操作，一直找不到真正的问题点。
• 连带影响：当前路由配置里用到的PrivateGuard、PublicGuard两个守卫类，因为路径错误的导入语句的干扰，也会在修正完导入路径后出现未定义的报错，需要单独补齐正常的导入路径。

修复步骤 #

1. 把app.routing.ts里错误的路由模块导入路径修正：
   错误写法：

   import { Routes, RouterModule } from '@angular/guards'
   

   正确写法：

   import { Routes, RouterModule } from '@angular/router'
   

2. 为路由配置里用到的两个守卫类补齐对应的正常导入语句，避免修正路径后出现新的未定义报错。
3. 保存修改后重启本地开发服务，重新完成全量编译，router-outlet的识别报错就会消失。

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