Angular – Jasmine – Error: NG0304: ‘router-outlet’ is not a known element (used in the ‘Component’ component template)

Jasmine is a Behavior Driven Development testing framework for JavaScript. It does not rely on browsers, DOM, or any JavaScript framework. Thus it’s suited for websites, Node.js projects, or anywhere that JavaScript can run.

How to reproduce it

component.spec.ts

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ Component ],
    })
      .compileComponents();

Error

Error: NG0304: 'router-outlet' is not a known element (used in the 'Component' component template):
1. If 'router-outlet' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
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 properties: Object({ code: 304 })
    at validateElementIsKnown (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:4941:23)
    at ɵɵelementStart (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:13624:9)
    at ɵɵelement (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:13696:5)
    at templateFn (ng:///InboxComponent.js:12:9)
    at executeTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:10482:9)
    at renderView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:10304:13)
    at renderComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:11475:5)
    at renderChildComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:10163:9)
    at renderView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:10329:13)
    at ComponentFactory.create (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:12219:13)

Solution

Import RouterModule.

component.spec.ts

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ RouterModule ],
      declarations: [ Component ]
    })
      .compileComponents();

• Share on Facebook