Cannot see that router-outlet is an Angular component – router-outlet is not a known element

Issue

I am receiving the error:

'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. ("<div class="container">
        [ERROR ->]<router-outlet></router-outlet>
    </div>

But I cannot figure out why. All I have done is change my app.component.html from:
This

<div class="container">
    <app-login></app-login>
</div>

to this

<div class="container">
    <router-outlet></router-outlet>
</div>

This is my app module
app.module

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomepageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [
    AuthService,
    AuthGuard,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AppHttpInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})

Here is my app routing module just for visibility

app.routing

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

import {HomepageComponent} from './components/homepage/homepage.component';
import {LoginComponent} from './components/login/login.component';
import {AuthGuard} from './guard/auth.guard';

const appRoutes: Routes = [
  {path: '', component: HomepageComponent, canActivate: [AuthGuard]},
  {path: 'login', component: LoginComponent},

  // Otherwise redirect to home
  {path: '**', redirectTo: ''}
];

export const AppRoutingModule = RouterModule.forRoot(appRoutes);

Solution

Import RouterModule module and add it into the imports.

import { RouterModule } from '@angular/router'

imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    RouterModule,
    AppRoutingModule
],

Or of your routes are defined in the AppRoutingModule – you need also to export RouterModule from it.

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

Answered By – Suren Srapyan

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.