Angular-cli: ng test throws 'zone already loaded' error

Created on 3 Mar 2017 · 10Comments · Source: angular/angular-cli

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Windows 7

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:
@angular/cli: 1.0.0-rc.1
node: 7.5.0
os: win32 x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/forms: 2.4.9
@angular/router: 3.4.9
@angular/compiler-cli: 2.4.9
@angular/platform-server: 2.4.9
@angular/language-service: 2.4.9
@angular/cli: 1.0.0-rc.1

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.
C:\Projects\myproj>ng test

The log given by the failure.

Normally this include a stack trace and some more information.
Chrome 56.0.2924 (Windows 7 0.0.0) ERROR
Uncaught Error: Zone already loaded.
at webpack:///~/zone.js/dist/zone.js:24:0 <- src/test.ts:54766

Mention any other details that might be useful.

This started to happen with rc.0 and still with rc.1
Used to work in betas.
Any idea where to look to make sure that zone.js only loads once?

Source

ctrl-brk

Most helpful comment

This happens because zone file is getting loaded multiple times.

To remove this error remove import './polyfills.ts'; from test.ts file, because its getting called twice.

topratiksharma on 4 Mar 2017

👍9

All 10 comments

This happens because zone file is getting loaded multiple times.

To remove this error remove import './polyfills.ts'; from test.ts file, because its getting called twice.

topratiksharma on 4 Mar 2017

👍9

Tnanks, that's helped. The only additional thing I had to do in my case is to add import 'rxjs/add/observable/of' to my test module in order to use Observable.of() (_looks like it actually doesn't matter in which file you import it - works anyway)_. Before it was working without this import.

ctrl-brk on 4 Mar 2017

Edit: The fix for PhantomJS is to:
in polyfills.ts

uncomment the core-js imports at the top of polyfills.ts
uncomment the intl import, npm install --save intl, and add import 'intl/locale-data/jsonp/en.js';

in tsconfig.spec.json

update lib to:

    "lib": [
      "es6",
      "dom"
    ]

update target to es5

JSMike on 7 Mar 2017

This appears to have been resolved, closing.

Brocco on 7 Mar 2017

@ctrl-brk see my edits above, had to make some changes.
Note: my previous post added polyfills to the test.ts file, this isn't the correct approach because the polyfills file listed in .angular-cli.json is automatically imported when running tests.

JSMike on 8 Mar 2017

ok, this is maybe not the best scenario, but for instance, I need to load two angular apps inside another. zone is throwing an error saying it's already defined.

dgroh on 30 Nov 2017

👍1

I am facing same situation as @dgroh

did you find any workaround @dgroh ?

oztek22 on 8 Jan 2018

@oztek22 yes, remove zone from one of your modules in polyfills.ts

dgroh on 8 Jan 2018

@dgroh thanks for the response, But actually I am not sure on what library will parent app will be running.
So If I remove it than it wont work on other apps

oztek22 on 9 Jan 2018

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