Angular2 Cli Test (Webpack) Erros: "Error: Template parse errors"

Question

This is my AppModule:

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

import { AppComponent } from './app.component';
import { CitiesComponent } from './cities/cities.component';

@NgModule({
  declarations: [
    AppComponent,
    CitiesComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

CitiesComponent is a very simple module. And I use the component inside AppComponent.

Application builds and works without any errors; But when I Execute ng test it fails with error:

Error: Template parse errors:
'app-cities' is not a known element:
1. If 'app-cities' is an Angular component, then verify that it is part of this module.
2. If 'app-cities' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<main> <h1>Hello from Angular 2 App with Webpack</h1> <div class="ui segment raised"> Hello </div> [ERROR ->]<app-cities></app-cities> </main> "): AppComponent@0:99 in config/karma-test-shim.js (line 181)
parse@webpack:///~/@angular/compiler/bundles/compiler.umd.js:8813:0 <- config/karma-test-shim.js:181:50110
_compileTemplate@webpack:///~/@angular/compiler/bundles/compiler.umd.js:16978:0 <- config/karma-test-shim.js:186:8984
webpack:///~/@angular/compiler/bundles/compiler.umd.js:17065:0 <- config/karma-test-shim.js:186:10862
forEach@webpack:///~/core-js/modules/_typed-array.js:467:0 <- config/karma-test-shim.js:2:50965
s@webpack:///~/@angular/compiler/bundles/compiler.umd.js:17061:62 <- config/karma-test-shim.js:186:10831
_compileComponents@webpack:///~/@angular/compiler/bundles/compiler.umd.js:16887:0 <- config/karma-test-shim.js:186:6610
_compileModuleAndAllComponents@webpack:///~/@angular/compiler/bundles/compiler.umd.js:16828:37 <- config/karma-test-shim.js:186:4786
compileModuleAndAllComponentsSync@webpack:///~/@angular/compiler/bundles/compiler.umd.js:16804:0 <- config/karma-test-shim.js:186:4350
compileModuleAndAllComponentsSync@webpack:///~/@angular/compiler/bundles/compiler.umd.js:1:0 <- config/karma-test-shim.js:150:24366
_initIfNeeded@webpack:///~/@angular/core/bundles/core.umd.js:1:0 <- config/karma-test-shim.js:78:22512
createComponent@webpack:///~/@angular/core/bundles/core.umd.js:1:0 <- config/karma-test-shim.js:78:25044
createComponent@webpack:///~/@angular/core/bundles/core.umd.js:1:0 <- config/karma-test-shim.js:78:20648
webpack:///~/@angular/core/bundles/core-testing.umd.js:1:0 <- config/karma-test-shim.js:66:10991
invoke@webpack:///config/karma-test-shim.js:8711:32 <- config/karma-test-shim.js:24:40262
onInvoke@webpack:///~/zone.js/dist/proxy.js:75:0 <- config/karma-test-shim.js:38:1630
invoke@webpack:///config/karma-test-shim.js:8711:32 <- config/karma-test-shim.js:24:40216
run@webpack:///config/karma-test-shim.js:8711:32 <- config/karma-test-shim.js:24:34612
webpack:///~/zone.js/dist/jasmine-patch.js:28:0 <- config/karma-test-shim.js:52:655
execute@webpack:///config/karma-test-shim.js:9163:32 <- config/karma-test-shim.js:52:3370
execute@webpack:///config/karma-test-shim.js:9163:32 <- config/karma-test-shim.js:52:3370
webpack:///config/karma-test-shim.js:9163:32 <- config/karma-test-shim.js:52:3480
invokeTask@webpack:///config/karma-test-shim.js:8711:32 <- config/karma-test-shim.js:24:40940
runTask@webpack:///config/karma-test-shim.js:8711:32 <- config/karma-test-shim.js:24:35224
drainMicroTaskQueue@webpack:///~/zone.js/dist/zone.js:584:0 <- config/karma-test-shim.js:24:19813
s@webpack:///~/core-js/modules/_typed.js:25:0 <- config/karma-test-shim.js:2:22237
webpack:///~/core-js/modules/_typed-buffer.js:12:0 <- config/karma-test-shim.js:2:22359
u@webpack:///~/core-js/modules/_microtask.js:18:0 <- config/karma-test-shim.js:2:15867

Any Idea? Using Angular2-2.0 and "angular-cli": "1.0.0-beta.15"

Can you post your test. – Paul Samsotha Sep 22 '16 at 13:58 — Paul Samsotha, Sep 22 '16 at 13:58

score 4 · Answer 1 · answered Feb 23 '17 at 01:36

In your app.component.spec.ts, you should declare for the CitiesComponent:

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { CitiesComponent } from './cities/cities.component';

describe('AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        CitiesComponent // => add to here
      ],
    });
    TestBed.compileComponents();
  });

  // 
});

score 2 · Answer 2 · answered Sep 22 '16 at 18:05

You have forgotten to add CitiesComponent to the TestModule, here is an example test of mine

import {
    ComponentFixture, TestBed, inject, async
} from '@angular/core/testing';
import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RouterModule, RouterOutletMap } from '@angular/router';

let comp: AppComponent;
let fixture: ComponentFixture<AppComponent>;
let el: DebugElement;

describe('AppComponent', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [AppComponent], // declare the test component
        });

        fixture = TestBed.createComponent(AppComponent);

        comp = fixture.componentInstance; // AppComponent test instance

        it('should instantiate the component', () => {
            expect(fixture.debugElement).toBeDefined();
        });
    });

});

In the line TestBed.configureTestingModule you want to declare the CitiesComponent again, since the module you are testing is different, than the actual one.

Angular2 Cli Test (Webpack) Erros: "Error: Template parse errors"

2 Answers2

Linked