Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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);
like image 325
physicsboy Avatar asked Dec 12 '25 17:12

physicsboy


1 Answers

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 {  }
like image 185
Suren Srapyan Avatar answered Dec 15 '25 07:12

Suren Srapyan



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!