Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Polyfills.ts not getting loaded before scripts when running ng test #4545

Closed
justindsmith opened this issue Feb 9, 2017 · 3 comments
Closed

Polyfills.ts not getting loaded before scripts when running ng test #4545

justindsmith opened this issue Feb 9, 2017 · 3 comments
Assignees
@filipesilva
Labels
P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful type: bug/fix

Comments

@justindsmith
Copy link

justindsmith commented Feb 9, 2017 •
edited

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
Copy link

pblasco commented Feb 9, 2017

I have encountered this same issue.

Downgraded to beta24 and it doesn't occur.

@filipesilva filipesilva added P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful type: bug/fix labels Feb 10, 2017
@filipesilva filipesilva self-assigned this Feb 10, 2017
filipesilva added a commit to filipesilva/angular-cli that referenced this issue Feb 13, 2017
@filipesilva
fix(@angular/cli): include polyfills before scripts in ng test
e89cd0e 
Fix angular#4545
filipesilva added a commit to filipesilva/angular-cli that referenced this issue Feb 13, 2017
@filipesilva
fix(@angular/cli): include polyfills before scripts in ng test
bda22ef 
Fix angular#4545
@filipesilva filipesilva mentioned this issue Feb 13, 2017
Closed
@soates
Copy link

soates commented Mar 7, 2017

I am still getting this issue on rc.1

asnowwolf pushed a commit to asnowwolf/angular-cli that referenced this issue Apr 12, 2017
@filipesilva
fix(@angular/cli): include polyfills before scripts in ng test
8e8af4c 
Fix angular#4545
Close angular#4656
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@filipesilva filipesilva

Labels
P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful type: bug/fix
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(@angular/cli): include polyfills before scripts in ng test filipesilva/angular-cli
4 participants
@justindsmith @pblasco @filipesilva @soates