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

[liujingbreak]

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

[nrandell]

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

[JiaLiPassion]

@liujingbreak, thanks, I will check it!

[angular-automatic-lock-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.}