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

Posted 2023-03-24

【中文标题】如果 \'router-outlet\' 是一个 Angular 组件，那么验证它是这个模块的一部分

【英文标题】：If 'router-outlet' is an Angular component, then verify that it is part of this module如果 'router-outlet' 是一个 Angular 组件，那么验证它是这个模块的一部分

【发布时间】：2021-04-20 05:26:03

【问题描述】：

我在 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 

我错过了什么？

【问题讨论】：

您是否尝试过停止 ng serve 并再次运行它的常见巫术动作？

您的 AppModule 中缺少 declarations: [AppComponent]。

【参考方案1】：

你还没有在AppModule中声明AppComponent。

app.module.ts

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