CODEWITHSUNDEEP
angularjasmine
Hemant Vishwakarma
Hemant Vishwakarma

Reputation: 81

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

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

enter image description here

Upvotes: 4

Views: 2124

Answers (2)

Mr. Dang
Mr. Dang

Reputation: 575

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.

Upvotes: 9

NitinSingh
NitinSingh

Reputation: 2068

Please check if the answer to this works in your scenario SO Link

Important... Open the NG Test Guide and then click the link for "Tests". This will open the test sample. Copy the files "Testing\activated-route-stub.ts" and "Testing\router-link-directive-stub.ts" in your project (better in a separate folder).

Now move to "app.component.spec.ts" and notice how these two files are added as declarations for each test module... Also notice the @Component declaration for the router-option, without it, the stub won't work.

The spec also tells how to use the stubs to test out the router links actually..

Do the same and enjoy... Let me know if it helps :) If there are any errors, make sure you are importing all items

(My spec file as follows)

import { RouterLinkDirectiveStub } from '../router-stubs.module';

@Component({ selector: 'router-outlet', template: '' })

class RouterOutletStubComponent { }

...

declarations: [
MyOwnComponent,
RouterLinkDirectiveStub, here we add our component and stub RouterOutletStubComponent
],

Upvotes: 2

Related Questions