如果 'router-outlet' 是一个 Angular 组件，那么验证它是这个模块的一部分

Question

我在 Angular 11 中遇到了这个错误，但我尝试应用我在网上找到的所有修复...

错误：

错误：src/app/app.component.html:1:1 - 错误 NG8001：'router-outlet' 不是已知元素： 如果 'router-outlet' 是一个 Angular 组件，那么验证它是这个模块的一部分

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/router'

import { PublicGuard, PrivateGuard } from '@app/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 {}

我错过了什么？

Answer 1

你还没有在AppModule中声明AppComponent。

app.module.ts

@NgModule({
  declarations: [AppComponent] //add this one
  imports: [...],
  providers: [...],
  bootstrap: [AppComponent],
})
export class AppModule {}