Solvedangular starter Unit test error: Router outlet is not a known element

Note: for support questions, please use one of these channels: Chat: AngularClass.slack or Twitter: @AngularClass

  • I'm submitting a ...
    [x ] bug report

I am getting following error when running a unit test:

Error: 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.

My unit test code:

import {
    inject,
    TestBed
} from '@angular/core/testing';

// Load the implementations that should be tested
import { App } from './app.component';
import { AppState } from './app.service';
import { Renderer } from '@angular/core';
import { Router, RouterOutlet } from "@angular/router";

class MockRouter { public navigate() {}; }

describe('App', () => {

    // provide our implementations or mocks to the dependency injector
    beforeEach(() => TestBed.configureTestingModule({
        declarations: [ App ],
        providers: [
            AppState,
            Renderer,
            {provide: Router,  useClass: MockRouter },
            RouterOutlet
        ]}));

    it('should have a url', inject([ App ], (app: App) => {
        expect(app.name).toEqual('test');
    }));

});

My app.html has router outlet:

        <router-outlet></router-outlet>

I tried removing RouterOutlet as well in unit test and it did not work. Has anyone experienced this issue and help me with the solution?

15 Answers

✔️Accepted Answer

@eamell - I am still on rc6 and I changed my configuration to RouterTestingModule and it still works. Thanks for the help as this will not break my tests when I will move to 2.0.0

I am doing it this way now. Is that correct?

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

  beforeEach(() => {

        TestBed.configureTestingModule({
            providers: [
                App,
                AppState,
                Renderer,
                {provide: Router,  useClass: MockRouter }
            ],
            imports: [ RouterTestingModule ]
        });

    });

Other Answers:

That didn't work for me (using 2.0.0). What worked for me was importing RouterTestingModule instead.

I resolved this by importing RouterModule in spec file.

Hi @eamell,

Tried your approach and it worked! Going to leave what I did here to help someone down the road hopefully.

    @Component({
        template:''
    })
    class MockLoginComponent { }

    @NgModule({
        declarations: [MockLoginComponent],
        exports:      [MockLoginComponent]
    })
    class MockModule { }

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                AppComponent
            ],
            providers: [
                //...
            ],
            imports: [
                MockModule,
                RouterTestingModule.withRoutes([
                    {
                        path: 'login',
                        component: MockLoginComponent
                    }
                ]),
            ]
        });
    }));

    it(...
       spyOn(appComponent.router, 'navigate');
       expect(appComponent.router.navigate).toHaveBeenCalledWith(['/login']);
       expect(appComponent.router.navigate).toHaveBeenCalledTimes(1);
    );

Had to make the router public in AppComponent to be able to spy on it (not sure if that's best practice). Thanks for your help!

I tried make testing with different inject but the principal problem es that the router is not recognized.
somebody can I help with what I have that add into describe or in other site.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { SearchComponent } from './search/search.component';

@NgModule({
declarations: [
AppComponent,
SearchComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot([
{ path: '', component: SearchComponent },
])
],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }


import { Component, OnInit } from '@angular/core';

@component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css'],
})
export class SearchComponent implements OnInit {

constructor() { }

ngOnInit() {
}

}


describe('Component: Search', () => {
it('should create an instance de router', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
SearchComponent, RouterModule
]
});
});


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. ("

[ERROR ->]"): AppComponent@6:0

More Issues: