Angular-cli: Polyfills.ts not getting loaded before scripts when running `ng test`

[justindsmith]

The scripts located in angular-cli.json are giving errors during ng test because the polyfills defined in polyfills.ts are not loaded into the system before the scripts are loaded.

Getting following error:

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  ReferenceError: Can't find variable: Map
  at node_modules/@webcomponents/custom-elements/custom-elements.min.js:10

OS?

 OSX El Capitan

Versions.

@angular/cli: 1.0.0-beta.30
node: 7.1.0
os: darwin x64
@angular/common: 2.4.6
@angular/compiler: 2.4.6
@angular/core: 2.4.6
@angular/forms: 2.4.6
@angular/http: 2.4.6
@angular/platform-browser: 2.4.6
@angular/platform-browser-dynamic: 2.4.6
@angular/router: 3.4.6
@angular/cli: 1.0.0-beta.30
@angular/compiler-cli: 2.4.6

Repro steps.

1. Create new app using ng new angular-cli-test
2. Add @webcomponents/custom-elements and mutationobserver-shim as dependencies in package.json and in the scripts array in angular-cli.json:

"scripts": [
  "../node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
  "../node_modules/@webcomponents/custom-elements/custom-elements.min.js"
],

1. Add karma-phantomjs-launcher as dependency in package.json and update the karma.conf.js to use PhantomJS instead of Chrome.

plugins: [
    require('karma-jasmine'),
    // require('karma-chrome-launcher'),
    require('karma-phantomjs-launcher'),
    require('karma-remap-istanbul'),
    require('@angular/cli/plugins/karma')
],

and

browsers: [
    // 'Chrome',
    'PhantomJS'
],

1. Execute the tests using ng test --watch=false --log-level=debug

The log given by the failure.

Observe that the scripts do not see any polyfills that were added from polyfills.ts:

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  ReferenceError: Can't find variable: Map
  at node_modules/@webcomponents/custom-elements/custom-elements.min.js:10

From the output you can see that

serving (cached): /Users/jsmith/Projects/angular/angular-cli-test/src/polyfills.ts

comes _after_

serving (cached): /Users/jsmith/Projects/angular/angular-cli-test/node_modules/@webcomponents/custom-elements/custom-elements.min.js

Full log output:

$ ng test --watch=false --log-level=debug
08 02 2017 16:19:39.868:DEBUG [config]: Loading config /Users/jsmith/Projects/angular/angular-cli-test/karma.conf.js
08 02 2017 16:19:40.487:DEBUG [config]: autoWatch set to false, because of singleRun
08 02 2017 16:19:40.488:DEBUG [plugin]: Loading inlined plugin (defining framework:jasmine).
08 02 2017 16:19:40.489:DEBUG [plugin]: Loading inlined plugin (defining launcher:PhantomJS).
08 02 2017 16:19:40.489:DEBUG [plugin]: Loading inlined plugin (defining reporter:karma-remap-istanbul).
08 02 2017 16:19:40.489:DEBUG [plugin]: Loading inlined plugin (defining framework:@angular/cli, preprocessor:@angular/cli, webpackPlugin, preprocessor:webpack, middleware:webpackBlocker, preprocessor:sourcemap).
08 02 2017 16:19:40.509:DEBUG [web-server]: Instantiating middleware
08 02 2017 16:19:40.536:WARN [watcher]: Pattern "/Users/jsmith/Projects/angular/angular-cli-test/src/assets/**" does not match any file.
08 02 2017 16:19:46.025:DEBUG [preprocessor.sourcemap]: base64-encoded source map for /Users/jsmith/Projects/angular/angular-cli-test/src/polyfills.ts
08 02 2017 16:19:46.040:DEBUG [preprocessor.sourcemap]: base64-encoded source map for /Users/jsmith/Projects/angular/angular-cli-test/src/test.ts
08 02 2017 16:19:46.089:WARN [karma]: Port 9876 in use
08 02 2017 16:19:46.090:INFO [karma]: Karma v1.2.0 server started at http://localhost:9877/
08 02 2017 16:19:46.090:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
08 02 2017 16:19:46.093:INFO [launcher]: Starting browser PhantomJS
08 02 2017 16:19:46.094:DEBUG [temp-dir]: Creating temp dir at /var/folders/kn/yq62_zln5zx2798408gw_ykw0065w6/T/karma-42408942
08 02 2017 16:19:46.096:DEBUG [launcher]: /Users/jsmith/Projects/angular/angular-cli-test/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs /var/folders/kn/yq62_zln5zx2798408gw_ykw0065w6/T/karma-42408942/capture.js
08 02 2017 16:19:46.670:DEBUG [web-server]: serving: /Users/jsmith/Projects/angular/angular-cli-test/node_modules/karma/static/client.html
08 02 2017 16:19:46.678:DEBUG [web-server]: serving: /Users/jsmith/Projects/angular/angular-cli-test/node_modules/karma/static/karma.js
08 02 2017 16:19:46.728:DEBUG [karma]: A browser has connected on socket /#zkOBO0so6Q09ZN5aAAAA
08 02 2017 16:19:46.731:DEBUG [web-server]: upgrade /socket.io/?EIO=3&transport=websocket&sid=zkOBO0so6Q09ZN5aAAAA
08 02 2017 16:19:46.731:DEBUG [proxy]: NOT upgrading proxyWebSocketRequest /socket.io/?EIO=3&transport=websocket&sid=zkOBO0so6Q09ZN5aAAAA
08 02 2017 16:19:46.759:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#zkOBO0so6Q09ZN5aAAAA with id 42408942
08 02 2017 16:19:46.759:DEBUG [launcher]: PhantomJS (id 42408942) captured in 0.669 secs
08 02 2017 16:19:46.763:DEBUG [phantomjs.launcher]: 

08 02 2017 16:19:46.764:DEBUG [middleware:karma]: custom files null null
08 02 2017 16:19:46.764:DEBUG [middleware:karma]: Serving static request /context.html
08 02 2017 16:19:46.765:DEBUG [web-server]: serving: /Users/jsmith/Projects/angular/angular-cli-test/node_modules/karma/static/context.html
08 02 2017 16:19:46.767:DEBUG [middleware:source-files]: Requesting /base/node_modules/mutationobserver-shim/dist/mutationobserver.min.js?1ad83990b11a736e06d4114f86941190cd115a6d /
08 02 2017 16:19:46.768:DEBUG [middleware:source-files]: Fetching /Users/jsmith/Projects/angular/angular-cli-test/node_modules/mutationobserver-shim/dist/mutationobserver.min.js
08 02 2017 16:19:46.768:DEBUG [web-server]: serving (cached): /Users/jsmith/Projects/angular/angular-cli-test/node_modules/mutationobserver-shim/dist/mutationobserver.min.js
08 02 2017 16:19:46.769:DEBUG [middleware:source-files]: Requesting /base/node_modules/karma-jasmine/lib/adapter.js?7a813cc290d592e664331c573a1a796192cdd1ad /
08 02 2017 16:19:46.769:DEBUG [middleware:source-files]: Fetching /Users/jsmith/Projects/angular/angular-cli-test/node_modules/karma-jasmine/lib/adapter.js
08 02 2017 16:19:46.770:DEBUG [middleware:source-files]: Requesting /base/src/polyfills.ts?6d188ed229b07f992994d332dca77f5c4eb136f2 /
08 02 2017 16:19:46.770:DEBUG [middleware:source-files]: Fetching /Users/jsmith/Projects/angular/angular-cli-test/src/polyfills.ts
08 02 2017 16:19:46.770:DEBUG [middleware:source-files]: Requesting /base/node_modules/@webcomponents/custom-elements/custom-elements.min.js?314ec4931392a099fbf8a4a5ce40ff4cb5622bbf /
08 02 2017 16:19:46.770:DEBUG [middleware:source-files]: Fetching /Users/jsmith/Projects/angular/angular-cli-test/node_modules/@webcomponents/custom-elements/custom-elements.min.js
08 02 2017 16:19:46.770:DEBUG [middleware:source-files]: Requesting /base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d /
08 02 2017 16:19:46.770:DEBUG [middleware:source-files]: Fetching /Users/jsmith/Projects/angular/angular-cli-test/node_modules/jasmine-core/lib/jasmine-core/jasmine.js
08 02 2017 16:19:46.770:DEBUG [middleware:source-files]: Requesting /base/node_modules/karma-jasmine/lib/boot.js?945a38bf4e45ad2770eb94868231905a04a0bd3e /
08 02 2017 16:19:46.770:DEBUG [middleware:source-files]: Fetching /Users/jsmith/Projects/angular/angular-cli-test/node_modules/karma-jasmine/lib/boot.js
08 02 2017 16:19:46.770:DEBUG [web-server]: serving (cached): /Users/jsmith/Projects/angular/angular-cli-test/node_modules/karma-jasmine/lib/adapter.js
08 02 2017 16:19:46.771:DEBUG [web-server]: serving (cached): /Users/jsmith/Projects/angular/angular-cli-test/src/polyfills.ts
08 02 2017 16:19:46.775:DEBUG [web-server]: serving (cached): /Users/jsmith/Projects/angular/angular-cli-test/node_modules/@webcomponents/custom-elements/custom-elements.min.js
08 02 2017 16:19:46.775:DEBUG [web-server]: serving (cached): /Users/jsmith/Projects/angular/angular-cli-test/node_modules/jasmine-core/lib/jasmine-core/jasmine.js
08 02 2017 16:19:46.775:DEBUG [web-server]: serving (cached): /Users/jsmith/Projects/angular/angular-cli-test/node_modules/karma-jasmine/lib/boot.js
08 02 2017 16:19:46.777:DEBUG [middleware:source-files]: Requesting /base/src/test.ts?2f4d3ef773df895dc7746401dae20df32ec488a0 /
08 02 2017 16:19:46.777:DEBUG [middleware:source-files]: Fetching /Users/jsmith/Projects/angular/angular-cli-test/src/test.ts
08 02 2017 16:19:46.778:DEBUG [web-server]: serving (cached): /Users/jsmith/Projects/angular/angular-cli-test/src/test.ts
08 02 2017 16:19:46.788:DEBUG [web-server]: serving: /Users/jsmith/Projects/angular/angular-cli-test/node_modules/karma/static/context.js
08 02 2017 16:19:46.798:DEBUG [phantomjs.launcher]: ReferenceError: Can't find variable: Map


08 02 2017 16:19:46.798:DEBUG [phantomjs.launcher]:   http://localhost:9877/base/node_modules/@webcomponents/custom-elements/custom-elements.min.js?314ec4931392a099fbf8a4a5ce40ff4cb5622bbf:10 in c
  http://localhost:9877/base/node_modules/@webcomponents/custom-elements/custom-elements.min.js?314ec4931392a099fbf8a4a5ce40ff4cb5622bbf:22

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  ReferenceError: Can't find variable: Map
  at node_modules/@webcomponents/custom-elements/custom-elements.min.js:10


08 02 2017 16:19:47.022:DEBUG [karma]: Run complete, exiting.
08 02 2017 16:19:47.022:DEBUG [launcher]: Disconnecting all browsers
08 02 2017 16:19:47.036:DEBUG [launcher]: Process PhantomJS exited with code 0
08 02 2017 16:19:47.036:DEBUG [temp-dir]: Cleaning temp dir /var/folders/kn/yq62_zln5zx2798408gw_ykw0065w6/T/karma-42408942
08 02 2017 16:19:47.039:DEBUG [launcher]: Finished all browsers
error Command failed with exit code 1.

Mention any other details that might be useful.

Might be related to issue #3309?

[pblasco]

I have encountered this same issue.

Downgraded to beta24 and it doesn't occur.

[soates]

I am still getting this issue on rc.1

[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._}