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

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

错误 :

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

应用程序组件.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 {}

我错过了什么?

回答

您尚未AppComponent在 中声明AppModule

app.module.ts

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


以上是如果'router-outlet'是一个Angular组件,那么验证它是否是这个模块的一部分的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>