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.

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

Configuring zone.js in `src/polyfills.ts` won't work, comments are misleading #12886

Closed
liujingbreak opened this Issue Nov 7, 2018 · 2 comments

Comments

Projects
None yet
4 participants
@liujingbreak
Copy link

commented Nov 7, 2018

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [X] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Node v8.11.1
NPM 6.3.0
Angular CLI: 7.0.4

Repro steps

Project skeleton file src/polyfills.ts contains incorrect comments about how to configure zone.js.

polyfills.ts contains following comments, but if developer open any of comments like
(window as any).__Zone_disable_requestAnimationFrame = true;, it won't work, since after Webpack compilation, it actually moves import "zone.js/dist/zone"; to the top of this file together with other import statements.

Therefore Browser executes import "zone.js/dist/zone"; earlier than any of lines like (window as any).__Zone_disable_requestAnimationFrame = true;, zone.js will not have chance to read those configuration variables at all.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 */

 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

 /*
 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
 */
// (window as any).__Zone_enable_cross_context_check = true;

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

The log given by the failure

N/A

Desired functionality

Developers should be notified that they need to create a separate file maybe call zone-setting.ts and put actual (window as any).__Zone_disable_requestAnimationFrame = true; in that file. Then import "./zone-setting.ts"; before import 'zone.js/dist/zone'; to make it work.

Mention any other details that might be useful

N/A

@liujingbreak liujingbreak changed the title Configure zone.js in `src/polyfills.ts` won't work, comments are misleading Configuring zone.js in `src/polyfills.ts` won't work, comments are misleading Nov 7, 2018

@nrandell

This comment has been minimized.

Copy link

commented Nov 7, 2018

I was just about to raise the same issue and can confirm the approach mentioned above works! Nice one @liujingbreak

@JiaLiPassion

This comment has been minimized.

Copy link
Contributor

commented Dec 4, 2018

@liujingbreak, thanks, I will check it!

JiaLiPassion added a commit to JiaLiPassion/angular-cli that referenced this issue Dec 4, 2018

JiaLiPassion added a commit to JiaLiPassion/angular-cli that referenced this issue Dec 4, 2018

JiaLiPassion added a commit to JiaLiPassion/angular-cli that referenced this issue Dec 8, 2018

JiaLiPassion added a commit to JiaLiPassion/angular-cli that referenced this issue Dec 8, 2018

JiaLiPassion added a commit to JiaLiPassion/angular-cli that referenced this issue Dec 8, 2018

kyliau added a commit that referenced this issue Dec 11, 2018

kyliau added a commit to kyliau/angular-cli that referenced this issue Dec 11, 2018

Kiku-git added a commit to Kiku-git/angular-cli that referenced this issue Mar 7, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.