X [ERROR] NG8001: 'router-outlet' is not a known element

Question

hello I have a project with an angular frontend and I encounter the following error when I'm trying to compil with "ng serve":

X [ERROR] NG8001: 'router-outlet' is not a known element:

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

2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]

   src/app/app.component.html:12:2: 12 │ <!-- Zone où les composants rou... ╵ ~~~~~~~~~~~~~~~

Error occurs in the template of component AppComponent.

src/app/app.component.ts:5:15:
  5 │   templateUrl: './app.component.html', // le chemin vers le fichier...

app.module.ts : 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module'; // Import correct du AppRoutingModule
import { AppComponent } from './app.component';
// autres imports

@NgModule({
  declarations: [
    AppComponent,
    // autres déclarations
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule // Utilisation correcte ici
    // autres imports
  ],
  // autres métadonnées
})
export class AppModule { }

main.ts :

import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

import { environment } from './environments/environment';
if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent);

app-routing.module.ts :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  // autres routes
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

quick vision of my environment

I tried everything even start a new project with this command :ng new my-app --no-standalone --routing --ssr=false to have app.module.ts because when we just do ng new my-app we that not create this module

Answer 1

You're not bootstraping the AppModule but the AppComponent. You need to define the providers in the bootstrapApplication call.

You should likely have

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)],
};

and

bootstrapApplication(AppComponent, appConfig);

and

@Component({
  ...
  standalone: true,
  imports: [RouterOutlet],
})
export class AppComponent {}

Please have a look at the Angular.dev routing tutorial