angular-cli integrated with primeng makes ng test failed

Created on 24 Oct 2016 · 4Comments · Source: angular/angular-cli

When angular-cli was integrated with primeng(added with npm), ng build & ng serve work fine, but ng test will fail.
It seems that there are source map errors when running test, How to exclude that source map path? Or any other solutions.

OS?

Mac OSX (El Capitan)

Versions.

1.0.0-beta.18

The log given by the failure.

lots of source map errors like this:

WARNING in ./~/primeng/primeng.js
Cannot find source file 'primeng.ts': Error: Can't resolve './primeng.ts' in '/Users/yewei/development/angular-tdd/node_modules/primeng'
 @ ./src/app/app.component.spec.ts 5:16-42
 @ ./src \.spec\.ts
 @ ./src/test.ts

and test cases failed with errors:

24 10 2016 11:38:57.269:INFO [karma]: Karma v1.2.0 server started at http://localhost:9876/
24 10 2016 11:38:57.272:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
24 10 2016 11:38:57.386:INFO [launcher]: Starting browser PhantomJS
24 10 2016 11:39:07.706:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#ggFhilnONsG9UtMtAAAA with id 71304808
PhantomJS 2.1.1 (Mac OS X 0.0.0) App: AngularTdd should create the app FAILED
    Failed: Template parse errors:
    Can't bind to 'ngModel' since it isn't a known property of 'p-dropdown'.
    1. If 'p-dropdown' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
    2. If 'p-dropdown' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
     ("
      {{title}}
    </h1>
    <p-dropdown [options]="cities" [ERROR ->][(ngModel)]="selectedCity"></p-dropdown>
    <button pButton type="button" icon="fa-check" iconPos="left""): AppComponent@3:31
    parse@http://localhost:9876/_karma_webpack_/2.bundle.js:6263:70
    _compileTemplate@http://localhost:9876/_karma_webpack_/2.bundle.js:14402:56
    http://localhost:9876/_karma_webpack_/2.bundle.js:14307:99
    forEach@webpack:///Users/yewei/development/angular-tdd/~/core-js/modules/_collection-strong.js:72:0 <- src/test.ts:27368:12
    compile@http://localhost:9876/_karma_webpack_/2.bundle.js:14307:54
    _compileComponents@http://localhost:9876/_karma_webpack_/2.bundle.js:14309:20
    _compileModuleAndAllComponents@http://localhost:9876/_karma_webpack_/2.bundle.js:14216:55
...

Some files

app.module.ts

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

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

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

app.component.html

<h1>
  {{title}}
</h1>
<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>

app.component.ts

import { Component } from '@angular/core';
import { SelectItem } from 'primeng/primeng';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app working!';
  cities: SelectItem[];
  selectedCity: string;
  constructor() {
    this.cities = [];
    this.cities.push({label: 'Select City', value: null});
    this.cities.push({label: 'New York', value: {id: 1, name: 'New York', code: 'NY'}});
    this.cities.push({label: 'Rome', value: {id: 2, name: 'Rome', code: 'RM'}});
    this.cities.push({label: 'London', value: {id: 3, name: 'London', code: 'LDN'}});
    this.cities.push({label: 'Istanbul', value: {id: 4, name: 'Istanbul', code: 'IST'}});
    this.cities.push({label: 'Paris', value: {id: 5, name: 'Paris', code: 'PRS'}});
  }
}

app.component.spec.ts

/* tslint:disable:no-unused-variable */

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

describe('App: AngularTdd', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        DropdownModule
      ]
    });
  });

  it('should create the app', async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    let app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

  it(`should have as title 'app works!'`, async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    let app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app works!');
  }));

  it('should render title in a h1 tag', async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    let compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('app works!');
  }));
});

Thanks!

Source

ye-will

Most helpful comment

I faced the same issue with p-editor component. In your test file pull formsModule (import { FormsModule } from '@angular/forms';) and add to imports declaration. That solved 'ngModel' input error issue for me.