3

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);
physicsboy
  • 5,656
  • 17
  • 70
  • 119

1 Answers1

3

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 {  }
Suren Srapyan
  • 66,568
  • 14
  • 114
  • 112
  • 1
    Should you add that he also needs to use `RouterModule.forRoot(routes)` –  Aug 02 '18 at 07:24
  • @trichetriche I have added another variant also. I think he can also export it from the `AppRoutingModule` - maybe routes are there – Suren Srapyan Aug 02 '18 at 07:25
  • @SurenSrapyan - none of what you suggested changed the error I was receiving :-( – physicsboy Aug 02 '18 at 07:29
  • @trichetriche - RouterModule.forRoot(routes) cannot see a definition for `routes` – physicsboy Aug 02 '18 at 07:29
  • @physicsboy Have you added `RouterModule` in the imports. Try to stop `ng` and run again – Suren Srapyan Aug 02 '18 at 07:31
  • Ah, I think I've found why. I hadn't read the stacktrace properly. It appears that the problem is with the app.module test file. I have added RouterTestingModule and all is resolved! Your solutions would work if it were the actual app that was failing. – physicsboy Aug 02 '18 at 07:34