Give this a shot:

Integrate RouterModule within your app.module.ts

import { RouterModule } from '@angular/router';

Include RouterModule in your imports []

similar to this:

 imports: [    RouterModule,  ]

If you already have the MainComponent imported in the parent module, one common issue may arise from not including the component with

 <router-outlet></router-outlet> 

main.component.html

<router-outlet></router-outlet>

main.module.ts

import { MainComponent } from './main.component';
import { SharedModule } from './../shared/shared.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { MainRoutingModule } from './main-routing.module';
import { RouterModule } from '@angular/router';


@NgModule({
  declarations: [
    MainComponent // <----- DON'T FORGET TO DECLARE THIS
  ],
  imports: [
    CommonModule,
    SharedModule,
    RouterModule,
    MainRoutingModule
  ]
})
export class MainModule { }

If you encounter an error while conducting unit testing, make sure to include RouterTestingModule in your app.component.spec.ts file or in the spec.ts of your featured components:

import { RouterTestingModule } from '@angular/router/testing';

Insert RouterTestingModule into the imports: [] section like so:

describe('AppComponent', () => {

  beforeEach(async(() => {    
    TestBed.configureTestingModule({    
      imports: [    
        RouterTestingModule    
      ],
      declarations: [    
        AppComponent    
      ],    
    }).compileComponents();    
  }));

If you are working with Angular 6 using angular-cli and have set up a separate routing module to handle routing tasks, configure your routes within the Routes array. Ensure that you include RouterModule in the exports array. Here's an example of how the code would appear:

@NgModule({
      imports: [
      RouterModule,
      RouterModule.forRoot(appRoutes)
     // other imports here
     ],
     exports: [RouterModule]
})
export class AppRoutingModule { }

My solution to this issue was to include the code snippet below in my app.module.ts file:

@NgModule({
...,
   imports: [
     AppRoutingModule
    ],
...
})

There are instances when this issue seems to pop up out of nowhere, but a simple fix involves restarting your IDE.

Appreciation for the helpful guidance from Hero Editor example, where I came across the accurate definition:

Upon creating the app routing module:

ng generate module app-routing --flat --module=app

and making adjustments to the app-routing.ts file by including:

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

Presented below is the complete example:

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent }   from './dashboard/dashboard.component';
import { HeroesComponent }      from './heroes/heroes.component';
import { HeroDetailComponent }  from './hero-detail/hero-detail.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes', component: HeroesComponent }
];

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

following which, include AppRoutingModule in app.module.ts imports section:

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [...],
  bootstrap: [AppComponent]
})

Create a dedicated routing component to manage all your routes for better organization, following best practices as recommended in the Angular website documentation.

ng generate module app-routing --flat --module=app

Using the above CLI command will generate a routing module and automatically integrate it into your app module. After generating the component, make sure to declare your routes and include the following code snippet:

exports: [
    RouterModule
  ],

Remember to add this snippet to your ng-module decorator manually, as it is not included by default in the generated app-routing module!

There are various possible reasons for encountering this error:

To begin with, ensure that you include AppRoutingModule in the app.module.ts file

app.module.ts:

imports: [AppRoutingModule]

If you have created a new routing module, make sure to import and export RouterModule within this routing module:

@NgModule({
  declarations: [],
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class NewRoutingModule {}

Then, remember to add NewRoutingModule to the main module file:

@NgModule({
  declarations: [NewComponent],               //--> Add NewComponent
  imports: [CommonModule, NewRoutingModule ]  //--> Add NewRoutingModule 
})
export class NewModule{}

Finally, add this module to the app.module.ts file:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, 
            BrowserAnimationsModule, 
            NewModule],       //--> Add NewModule
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

For individuals who create a new module and attempt to use <router-outlet> without a new routing module, don't forget to include RouterModule in the newly created module's imports and exports arrays.

newModule.module.ts:

import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [NewComponent],          //--> Add NewComponent
  imports: [CommonModule, RouterModule]  //--> Add RouterModule
  exports: [RouterModule],               //--> Add RouterModule
})
export class NewModule{}

Additionally, ensure to include the newly created module in the app.module.ts imports array.

app.module.ts:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, 
            BrowserAnimationsModule, 
            NewModule],       //--> Add NewModule
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

In my experience, I encountered this issue specifically while using VS Code. Interestingly, when running ng serve or ng build --prod, everything functioned correctly.

The solution that worked for me involved disabling the Angular Language Service extension (angular.ng-template) and then re-enabling it. This simple step resolved the problem entirely.

My issue stemmed from an error in lazy loading configuration. I incorrectly referenced the routing module instead of the module that contains the routing module.

Mistake

const routes: Routes = [
  {
    path: 'Login',
    loadChildren: ()=> import('./login/login-routing.module.ts').then(m=> m.LoginRoutingModule)
  }
]

Correction

const routes: Routes = [
  {
    path: 'Login',
    loadChildren: ()=> import('./login/login.module.ts').then(m=> m.LoginModule)
  }
]

Ensure you follow these steps to resolve the issue:

1. Import the RouterModule module into the appropriate module.
2. Add the component to the declarations array in the module.
3. Check if you have imported the router module if it was explicitly defined.

Refer to the examples below for guidance:

app.component.html

<router-outlet></router-outlet>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// Component imports here
const routes: Routes = [
// Route configurations here
];
@NgModule({
imports: [
    // Module imports here
],
exports: [
    RouterModule
],
providers: []
})
export class AppRoutingModule { }

app.module.ts:

import { NgModule} from '@angular/core';
// Other necessary imports here
@NgModule({
  imports: [
    // Module imports here
 ],
declarations: [Components here],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}

This solution has been successful for me!

The reason for the error in my scenario was due to the absence of the RouterModule import.

After encountering an error, I decided to try a solution that ultimately resolved the issue for me. As part of my testing process, I commenced by creating a new project that functioned properly. From there, I gradually removed all content in the app.component.html file until only the router-outlet line remained.

This consistently triggered the error message.

If you have manually created the file app-routing.module.ts or used a different tool instead of the CLI, you will need to make sure to import AppRoutingModule into your app.module.ts file and add it to the imports array of the NgModule. To generate the app-routing.module.ts file using the CLI, simply run this command:

ng generate module app-routing --flat --module=app

If you encounter this error while working with Angular 17 and have created a new project using ng new name-app, and then manually added app-routing.module.ts, there is a simple solution. Instead of starting over, you can modify the command by adding the --no-standalone argument. The corrected command should look like this:

ng new name-app --no-standalone

There are a couple of ways to set up routing in Angular.

// Option 1: Implementing routing in app.module.ts file

import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'user', component: UserComponent },
  { path: 'server', component: ServerComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ]
})
export class AppModule { }

2. Option 2: Using a Separated Routing Module (app-routing.module.ts file)

//app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UsersComponent },
  { path: 'servers', component: ServersComponent }
];

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

//.....................................................................

//app.module.ts
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    AppRoutingModule
  ]
})
export class AppModule { }

My mistake involved unintentionally removing the AppComponent from the @NgModule declarations in app.modules.ts

All you need to do is include the "RouterModule" in either your "app.module" or the "parent module". Here is an example:

import {RouterModule} from "@angular/router";;

@NgModule({
  declarations: [
     ....
  ],
 imports: [
    ....
    RouterModule
 ]
})
export class LayoutsModule { }

@NgModule({
  declarations: [
    SessionmagementComComponent, // Remember to register the main component for the HTML file you are using with <router-outlet>...
    LocalvssessionStorageComponent,
    SessionvslocallStorageComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    SessionManagementStorageRoutingModule,
    RouterModule,
    AppRoutingModule
  ],
  exports: [
    LocalvssessionStorageComponent,
    SessionvslocallStorageComponent
  ]
})
export class SessionmagementModule { }

It is possible for this error to appear when there is an issue with the app.module.ts file. For example, I encountered this issue when trying to import a component that had been deleted.

I encountered a similar issue and made a change

 template: `<router-outlet></router-outlet>`, 

instead of

 templateUrl: `<router-outlet></router-outlet>`, 

Also, please ensure that your component is included in the declaration array of your module.

Make sure to include the "router-outlet" component if your main module is including the router module.

If you're encountering issues, try refreshing the language server in your integrated development environment (IDE). In my situation, restarting the TypeScript language service did the trick.