If 'router-outlet' is an Angular component, then verify that it is part of this module

Question

I am stuck with this error in angular 11, but I tried to apply all the fix I found online...

error :

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/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 {}

What am I missing ?

Answer 1

You have not declared AppComponent in AppModule.

app.module.ts

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