angular 4 ng test Failed: Template parse errors: 'router-outlet' is not a known element:

Question

Failed: Template parse errors: '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. ("[ERROR ->]<router-outlet></router-outlet>"): ng:///DynamicTestModule/***.html@0:0

angular 4 ng test Failed: Template parse errors: 'router-outlet' is not a known element

Answer 1

Try this: In (app.component.spec.ts) Add imports:[RouterTestingModule], into your TestBed from @angular/router/testing, like this:

import { RouterTestingModule } from '@angular/router/testing'; // <= here
...
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [RouterTestingModule], // <= and here
        declarations: [
            AppComponent,

        ],
    }).compileComponents();
  }));
});

OR Sometime, it's just one line of code that will fix this problem. Add: exports: [ RouterModule ], into the @NgModule of your routing.module.ts and it'll fix this. This is my routing.module.ts, I have to add it manually because when I do ng g m routing, the Angular CLI didn't add this.

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

const routes: Routes = 
[
    // Your paths to the components
]

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),

  ],
  declarations: [],
  exports: [ RouterModule ], // <= Add this line 
})
export class ComponentRoutingModule { }

Import the RoutingModule into your app.module.ts.

Hope it helps.