ERROR NG8001, router-outlet is not a known element

Question

None of the answers here solved the problem:'router-outlet' is not a known element

[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:336:0: 336 │ ╵ ~~~~~~~~~~~~~~~

Error occurs in the template of component AppComponent.

src/app/app.component.ts:5:15:
  5 │   templateUrl: './app.component.html',
    ╵                ~~~~~~~~~~~~~~~~~~~~~~

Application bundle generation failed. [0.216 seconds]

Angular CLI: 17.0.6 Node: 18.16.0 Package Manager: npm 9.5.1 OS: win32 x64

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { RouterModule} from '@angular/router';
    import { CommonModule } from '@angular/common';

    import { AppRoutingModule, routes } from './app.routes';
    import { AppComponent } from './app.component';
    import { DataBindingComponent } from './data-binding/data-binding.component';
    import { NgIfNgforComponent } from './ng-if-ngfor/ng-if-ngfor.component';
    import { HttpClient, HttpClientModule } from '@angular/common/http';
    import { SegundoComponenteComponent } from './segundo-componente/segundo-componente.component';

    @NgModule({
      declarations: [
        DataBindingComponent,
        AppComponent,
        SegundoComponenteComponent,
        NgIfNgforComponent
      ],

      imports: [
        BrowserModule,
        RouterModule.forRoot(routes),
        AppRoutingModule,
        CommonModule,
        HttpClientModule
      ],
      providers: [HttpClient],
      bootstrap: [AppComponent]
    })
    export class AppModule { }`

app.routes.ts

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { DataBindingComponent } from './data-binding/data-binding.component';
    import { SegundoComponenteComponent } from './segundo-componente/segundo-componente.component';
    import { NgIfNgforComponent } from './ng-if-ngfor/ng-if-ngfor.component';

    export const routes: Routes = [
        {path: 'primeiro-componente', component: DataBindingComponent},
        {path: 'segundo-componente', component: SegundoComponenteComponent},
        {path: 'teste', component: NgIfNgforComponent}
    ];

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

app.component.ts

    import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'] // Corrigido aqui
    })
    export class AppComponent {
      title = 'cursoAngular';
    }

Answer 1

I think you don't need RouterModule.forRoot(routes) in the imports in app.module.ts. You're already importing AppRoutingModule there which covers the RouterModule import.

So it would look like this in app.module.ts:

imports: [
        BrowserModule,
        AppRoutingModule,
        CommonModule,
        HttpClientModule
      ]