Angular-cli: Cannot run npm run test on Chrome or PhantomJS

[zwolej]

I have almost fresh new project based on:

@angular/cli: 1.0.0-beta.31
node: 6.2.1
os: win32 x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.31
@angular/compiler-cli: 2.4.7

When I am trying to run npm run test with defaults, I am getting.

...
Can't bind to 'routerLink' since it isn't a known property of 'a'.
...

wird is that in npm run start everything works fine including routings, since I have impoterd in imports RouterModule in app.module.ts.

So I've tried to change to PhantomJS by installing:

npm i --save-dev phantomjs-prebuilt
npm install --save-dev karma-phantomjs-launcher

In Karma i added:

require('karma-phantomjs-launcher'),
...
browsers: ['PhantomJS'],

and I am getting

 TypeError: undefined is not an object (evaluating '(_a = ((Object))).assign.ap                                                                                                                                                 ply')
  at webpack:///~/@angular/common/src/pipes/intl.js:187:0 <- src/test.ts:34435

I added also in pollyfills.ts (after npm run install --save-dev intl)

import 'intl';
import 'intl/locale-data/jsonp/en';

but still I cannot run tests, any ideas?

[ruffiem]

@zwolej you need to uncomment those from your polyfills.ts

import 'core-js/es6/object';
import 'core-js/es6/array';
import 'intl';  // Run `npm install --save intl`.

[zwolej]

@ruffiem now I am getting on PhantomJS

Failed: undefined is not a constructor (evaluating 'suffix.startsWith('{' + BLOCK_PLACEHOLDER)')
webpack:///~/@angular/compiler/src/shadow_css.js:462:0 <- src/test.ts:57570:40

chrome

Can't bind to 'routerLinkActive' since it isn't a known property of 'a'.

[ruffiem]

Also, you do not have to import import 'intl/locale-data/jsonp/en';in your polyfills since intl imports it already.

[ruffiem]

uncomment import 'core-js/es6/set'; since startsWith use get & set but if you keep having such issues, just uncomment the whole es6 suite 👍

[ruffiem]

As for Can't bind to 'routerLink' since it isn't a known property of 'a'. means your component does not have access to the RouterModule.

[zwolej]

I uncommented all core-js/es6 imports. Now I am getting on phantomjs and chrome

Can't bind to 'routerLinkActive' since it isn't a known property of 'a'.

I would like only remind that npm run start works great. I can easly naviagte and so on using those routerLinks

[Meligy]

This is not a CLI problem. This is an Angular testing StackOverflow type question.

In testing, you get a testing module that is different from your normal module. That's why npm start works.

Check the component that has routeLink, go to the test for that, and add

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

And in the actual test:

    TestBed.configureTestingModule({
      imports: [RouterTestingModule, ....],
      ...
    });

Please check the official testing guide for more:
https://angular.io/docs/ts/latest/guide/testing.html

Cheers,

[zwolej]

Thanks! I didnt used TestBed.createComponent in tests before. Work like a charm.

[pabagan]

Same issue here with Angular2 CLI and Phantom.

TypeError: undefined is not an object (evaluating '(_a = ((Object))).assign.ap                                                                                                                                          ply')  at webpack:/

Solved thanks to @ruffiem but for me worked uncomenting just:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/array';

Edit: needed to uncomment import 'core-js/es6/string'; or lot of my test breaks (don't know why...)

[sarathsaleem]

I have enabled all the polyfills and change es5 as target, but still getting the the DOM Exception error

LOG: 'Attempting to configure 'innerHTML' with descriptor '{"configurable":true}' on object '[object HTMLUnknownElement]' and got error, giving up: TypeError: Attempting to configurable attribute of unconfigurable property.

PhantomJS 2.1.1 (Mac OS X 0.0.0) AppComponent should create the app FAILED
        NotFoundError: NotFoundError: DOM Exception 8 in src/test.ts (line 83723)
        appendChild@[native code]

Angular version

@angular/cli: 1.0.1
node: 7.7.1
os: darwin x64
@angular/common: 2.4.0
@angular/compiler: 2.4.0
@angular/core: 2.4.0
@angular/forms: 2.4.0
@angular/http: 2.4.0
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.0
@angular/platform-browser-dynamic: 2.4.0
@angular/router: 3.4.0
@angular/cli: 1.0.1
@angular/compiler-cli: 2.4.0

any idea?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}