feat(zone.js): upgrade zone.js to angular package format(APF) #36540

JiaLiPassion · 2020-04-09T11:59:23Z

In the current version of zone.js, zone.js uses it's own package format, and it is not following the rule
of Angualr package format(APF), so it is not easily to be consumed by Angular CLI or other bundle tools.
For example, zone.js npm package has two bundles,

zone.js/dist/zone.js, this is a es5 bundle.
zone.js/dist/zone-evergreen.js, this is a es2015 bundle.

And Angular CLI has to add some hard-coding code to handle this case, ohttps://github.com/angular/angular-cli/blob/5376a8b1392ac7bd252782d8474161ce03a4d1cb/packages/schematics/angular/application/files/src/polyfills.ts.template#L55-L58

This PR upgrade zone.js npm package format to follow APF rule, https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#heading=h.k0mh3o8u5hx

The updated points are:

in package.json, update all bundle related properties

  "main": "./bundles/zone.umd.js",
  "module": "./fesm2015/zone.js",
  "es2015": "./fesm2015/zone.js",
  "fesm2015": "./fesm2015/zone.js",

re-organize dist folder, for example for zone.js bundle, now we have

  dist/
      bundles/
             zone.js            // this is the es5 bundle
      fesm2015/
             zone.js            // this is the es2015 bundle (in the old version is `zone-evergreen.js`)

have several sub-packages.
zone-testing, provide zone-testing bundles include zone.js and testing libraries
zone-node, provide zone.js implemention for NodeJS
zone-mix, provide zone.js patches for both Browser and NodeJS

All those sub-packages will have their own package.json and the bundle will reference bundles(es5) and fesm2015(es2015).

typings property are removed from package.json, instead using files property, because now we have several d.ts files as typings.

"files": [
    "./zone.js.d.ts",
    "./zone.api.extensions.ts",
    "./zone.configurations.api.ts"
  ],

Does this PR introduce a breaking change?

Yes
No

All zone.js npm package folder and file name are changed, so we need to

create PR for angular/cli to migrate the changes.
make announcement for the users not using angular/cli.

I created a sample repo to show the contents of the new npm package contents.
https://github.com/JiaLiPassion/zone-new-package-format/tree/master/npm_package

package.json, https://github.com/JiaLiPassion/zone-new-package-format/blob/master/npm_package/package.json
bundles folder, https://github.com/JiaLiPassion/zone-new-package-format/tree/master/npm_package/bundles
fesm2015 folder, https://github.com/JiaLiPassion/zone-new-package-format/tree/master/npm_package/bundles
node sub package, https://github.com/JiaLiPassion/zone-new-package-format/tree/master/npm_package/node
mix sub package, https://github.com/JiaLiPassion/zone-new-package-format/tree/master/npm_package/mix
testing, https://github.com/JiaLiPassion/zone-new-package-format/tree/master/npm_package/testing

Please check whether the output satisfy the requirements.

And the following up tasks will be.

make angular repo work with the new format.
add PR for angular cli for migration.
update documentation involving the import 'zone.js/dist/zone' of polyfills.ts.

IgorMinar

this looks quite good! thanks @JiaLiPassion!

Can you please do me a favor a fix one big issue: in order not to make this a breaking change, can you please ensure that the built npm package contains dist/package.json which redirects the tools trying to resolve zone.js/dist/zone to the right place? essentially you need to resolver redirect fromzone.js/dist/zone to zone.js/.

This will ensure that all Angular CLI apps remain operational, in spite of them having the following in polyfills.ts

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

packages/zone.js/lib/zone-spec/fake-async-test.ts

JiaLiPassion · 2020-05-07T04:19:06Z

@IgorMinar , thank you for the review.

Can you please do me a favor a fix one big issue: in order not to make this a breaking change, can you please ensure that the built npm package contains dist/package.json which redirects the tools trying to resolve zone.js/dist/zone to the right place? essentially you need to resolver redirect from zone.js/dist/zone to zone.js/.

To do that, in my understanding I need to output additional bundles to dist/ folder, since current in the polyfill.ts, the code is

import 'zone.js/dist/zone';  // Included with Angular CLI.

So it expect that there is a zone.js file under node_modules/zone.js/dist/ folder, if the import is import 'zone.js', I think I can change the main/browser field in package.json to do the redirect, but since now the import is the specified file, I still need to put all bundles under the zone.js/dist folder, is my understanding correct?

IgorMinar · 2020-05-08T17:54:58Z

Nope. I know that this is tricky because it's not common to have multiple package.jsons in a single package. But that is really what I'm asking for in this case. Ommitting all the other files the package should have these two package.jsons:

/package.json
/dist/zone/package.json

The first one will be used by yarn/npm and should contain all the normal fields. the second one will be used just by webpack (and other build tools) and will redirect the resolution of imports to "zone.js/dist/zone" to the new file location.

Does that make sense?

JiaLiPassion · 2020-05-11T01:35:10Z

@IgorMinar , thank you for the detailed instruction, I now know how to do it, I will continue to work on this.

IgorMinar · 2020-05-11T03:25:33Z

Sounds great. Thanks!

IgorMinar · 2020-06-03T17:18:10Z

@JiaLiPassion please rerequest a review once the PR is rebased.

JiaLiPassion · 2020-06-04T03:36:14Z

@IgorMinar , thank you for the review, I have rebased the PR.

IgorMinar · 2020-06-09T20:34:56Z

I rebased this PR and force pushed because the PR was red due to being too far behind the master@HEAD. Hopefully the CI will now go green.

Close angular#35157 In the current version of zone.js, zone.js uses it's own package format, and it is not following the rule of Angualr package format(APF), so it is not easily to be consumed by Angular CLI or other bundle tools. For example, zone.js npm package has two bundles, 1. zone.js/dist/zone.js, this is a `es5` bundle. 2. zone.js/dist/zone-evergreen.js, this is a `es2015` bundle. And Angular CLI has to add some hard-coding code to handle this case, ohttps://github.com/angular/angular-cli/blob/5376a8b1392ac7bd252782d8474161ce03a4d1cb/packages/schematics/angular/application/files/src/polyfills.ts.template#L55-L58 This PR upgrade zone.js npm package format to follow APF rule, https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#heading=h.k0mh3o8u5hx The updated points are: 1. in package.json, update all bundle related properties ``` "main": "./bundles/zone.umd.js", "module": "./fesm2015/zone.js", "es2015": "./fesm2015/zone.js", "fesm2015": "./fesm2015/zone.js", ``` 2. re-organize dist folder, for example for `zone.js` bundle, now we have ``` dist/ bundles/ zone.js // this is the es5 bundle fesm2015/ zone.js // this is the es2015 bundle (in the old version is `zone-evergreen.js`) ``` 3. have several sub-packages. 1. `zone-testing`, provide zone-testing bundles include zone.js and testing libraries 2. `zone-node`, provide zone.js implemention for NodeJS 3. `zone-mix`, provide zone.js patches for both Browser and NodeJS All those sub-packages will have their own `package.json` and the bundle will reference `bundles(es5)` and `fesm2015(es2015)`. 4. keep backward compatibility, still keep the `zone.js/dist` folder, and all bundles will be redirected to `zone.js/bundles` or `zone.js/fesm2015` folders.

Zone.js has a lot of optional bundles, such as `zone-patch-message-port`, those bundles are monkey patch for specified APIs usually for soem experimental APIs or some old APIs only available for specified platforms. Those bundles will not be loaded by default. In this commit, since we have several main `sub packages` such as `zone`, `zone-node`, `zone-testing`, I put all the optional bundles under `plugins` folders for consistency.

JiaLiPassion · 2020-06-10T01:22:28Z

@IgorMinar, I just rebased again, now the CI is green, thanks.

IgorMinar

LGTM! Thank you!

Reviewed-for: global-approvers

) Zone.js has a lot of optional bundles, such as `zone-patch-message-port`, those bundles are monkey patch for specified APIs usually for soem experimental APIs or some old APIs only available for specified platforms. Those bundles will not be loaded by default. In this commit, since we have several main `sub packages` such as `zone`, `zone-node`, `zone-testing`, I put all the optional bundles under `plugins` folders for consistency. PR Close #36540

…r#36540) Close angular#35157 In the current version of zone.js, zone.js uses it's own package format, and it is not following the rule of Angualr package format(APF), so it is not easily to be consumed by Angular CLI or other bundle tools. For example, zone.js npm package has two bundles, 1. zone.js/dist/zone.js, this is a `es5` bundle. 2. zone.js/dist/zone-evergreen.js, this is a `es2015` bundle. And Angular CLI has to add some hard-coding code to handle this case, ohttps://github.com/angular/angular-cli/blob/5376a8b1392ac7bd252782d8474161ce03a4d1cb/packages/schematics/angular/application/files/src/polyfills.ts.template#L55-L58 This PR upgrade zone.js npm package format to follow APF rule, https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#heading=h.k0mh3o8u5hx The updated points are: 1. in package.json, update all bundle related properties ``` "main": "./bundles/zone.umd.js", "module": "./fesm2015/zone.js", "es2015": "./fesm2015/zone.js", "fesm2015": "./fesm2015/zone.js", ``` 2. re-organize dist folder, for example for `zone.js` bundle, now we have ``` dist/ bundles/ zone.js // this is the es5 bundle fesm2015/ zone.js // this is the es2015 bundle (in the old version is `zone-evergreen.js`) ``` 3. have several sub-packages. 1. `zone-testing`, provide zone-testing bundles include zone.js and testing libraries 2. `zone-node`, provide zone.js implemention for NodeJS 3. `zone-mix`, provide zone.js patches for both Browser and NodeJS All those sub-packages will have their own `package.json` and the bundle will reference `bundles(es5)` and `fesm2015(es2015)`. 4. keep backward compatibility, still keep the `zone.js/dist` folder, and all bundles will be redirected to `zone.js/bundles` or `zone.js/fesm2015` folders. PR Close angular#36540

…ular#36540) Zone.js has a lot of optional bundles, such as `zone-patch-message-port`, those bundles are monkey patch for specified APIs usually for soem experimental APIs or some old APIs only available for specified platforms. Those bundles will not be loaded by default. In this commit, since we have several main `sub packages` such as `zone`, `zone-node`, `zone-testing`, I put all the optional bundles under `plugins` folders for consistency. PR Close angular#36540

angular-automatic-lock-bot · 2020-07-12T16:13:21Z

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

…r#36540) Close angular#35157 In the current version of zone.js, zone.js uses it's own package format, and it is not following the rule of Angualr package format(APF), so it is not easily to be consumed by Angular CLI or other bundle tools. For example, zone.js npm package has two bundles, 1. zone.js/dist/zone.js, this is a `es5` bundle. 2. zone.js/dist/zone-evergreen.js, this is a `es2015` bundle. And Angular CLI has to add some hard-coding code to handle this case, ohttps://github.com/angular/angular-cli/blob/5376a8b1392ac7bd252782d8474161ce03a4d1cb/packages/schematics/angular/application/files/src/polyfills.ts.template#L55-L58 This PR upgrade zone.js npm package format to follow APF rule, https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#heading=h.k0mh3o8u5hx The updated points are: 1. in package.json, update all bundle related properties ``` "main": "./bundles/zone.umd.js", "module": "./fesm2015/zone.js", "es2015": "./fesm2015/zone.js", "fesm2015": "./fesm2015/zone.js", ``` 2. re-organize dist folder, for example for `zone.js` bundle, now we have ``` dist/ bundles/ zone.js // this is the es5 bundle fesm2015/ zone.js // this is the es2015 bundle (in the old version is `zone-evergreen.js`) ``` 3. have several sub-packages. 1. `zone-testing`, provide zone-testing bundles include zone.js and testing libraries 2. `zone-node`, provide zone.js implemention for NodeJS 3. `zone-mix`, provide zone.js patches for both Browser and NodeJS All those sub-packages will have their own `package.json` and the bundle will reference `bundles(es5)` and `fesm2015(es2015)`. 4. keep backward compatibility, still keep the `zone.js/dist` folder, and all bundles will be redirected to `zone.js/bundles` or `zone.js/fesm2015` folders. PR Close angular#36540

…ular#36540) Zone.js has a lot of optional bundles, such as `zone-patch-message-port`, those bundles are monkey patch for specified APIs usually for soem experimental APIs or some old APIs only available for specified platforms. Those bundles will not be loaded by default. In this commit, since we have several main `sub packages` such as `zone`, `zone-node`, `zone-testing`, I put all the optional bundles under `plugins` folders for consistency. PR Close angular#36540

JiaLiPassion added state: WIP area: zones Issues related to zone.js target: major This PR is targeted for the next major release risk: high labels Apr 9, 2020

JiaLiPassion requested a review from IgorMinar April 9, 2020 11:59

ngbot bot added this to the needsTriage milestone Apr 9, 2020

googlebot added the cla: yes label Apr 9, 2020

JiaLiPassion mentioned this pull request Apr 9, 2020

zone.js ES2015 distribution can't be easily consumed #35157

Closed

JiaLiPassion force-pushed the zone-format branch from 5d1f5bd to a9621aa Compare April 9, 2020 12:01

JiaLiPassion added the breaking changes label Apr 10, 2020

JiaLiPassion force-pushed the zone-format branch 4 times, most recently from c31024e to 252818c Compare April 15, 2020 09:05

IgorMinar suggested changes May 6, 2020

View reviewed changes

packages/zone.js/lib/zone-spec/fake-async-test.ts Show resolved Hide resolved

JiaLiPassion force-pushed the zone-format branch 11 times, most recently from a6a3d3e to 0d3fba6 Compare May 13, 2020 04:36

JiaLiPassion force-pushed the zone-format branch 2 times, most recently from 3a66cfd to 206a347 Compare June 4, 2020 03:12

JiaLiPassion requested a review from IgorMinar June 4, 2020 03:35

IgorMinar added the PR action: rerun CI at HEAD label Jun 9, 2020

ngbot bot removed the PR action: rerun CI at HEAD label Jun 9, 2020

IgorMinar force-pushed the zone-format branch from 8fc2655 to b4056f6 Compare June 9, 2020 20:33

JiaLiPassion added 2 commits June 10, 2020 09:40

JiaLiPassion force-pushed the zone-format branch from b4056f6 to 472df98 Compare June 10, 2020 00:41

IgorMinar approved these changes Jun 10, 2020

View reviewed changes

IgorMinar removed request for mhevery, atscott, kyliau, gkalpak and AndrewKushnir June 10, 2020 05:27

IgorMinar added the action: merge The PR is ready for merge by the caretaker label Jun 10, 2020

mhevery closed this in 583a9d3 Jun 11, 2020

JiaLiPassion mentioned this pull request Jul 3, 2020

docs(zone.js): update zone.js bundle doc since the APF change #37919

Closed

12 tasks

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 12, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(zone.js): upgrade zone.js to angular package format(APF) #36540

feat(zone.js): upgrade zone.js to angular package format(APF) #36540

Uh oh!

JiaLiPassion commented Apr 9, 2020 •

edited

Loading

Uh oh!

IgorMinar left a comment •

edited

Loading

Uh oh!

Uh oh!

JiaLiPassion commented May 7, 2020

Uh oh!

IgorMinar commented May 8, 2020

Uh oh!

JiaLiPassion commented May 11, 2020

Uh oh!

IgorMinar commented May 11, 2020

Uh oh!

IgorMinar commented Jun 3, 2020

Uh oh!

JiaLiPassion commented Jun 4, 2020

Uh oh!

IgorMinar commented Jun 9, 2020

Uh oh!

JiaLiPassion commented Jun 10, 2020

Uh oh!

IgorMinar left a comment

Uh oh!

angular-automatic-lock-bot bot commented Jul 12, 2020

Uh oh!

Uh oh!

feat(zone.js): upgrade zone.js to angular package format(APF) #36540

feat(zone.js): upgrade zone.js to angular package format(APF) #36540

Uh oh!

Conversation

JiaLiPassion commented Apr 9, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Does this PR introduce a breaking change?

Uh oh!

IgorMinar left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

JiaLiPassion commented May 7, 2020

Uh oh!

IgorMinar commented May 8, 2020

Uh oh!

JiaLiPassion commented May 11, 2020

Uh oh!

IgorMinar commented May 11, 2020

Uh oh!

IgorMinar commented Jun 3, 2020

Uh oh!

JiaLiPassion commented Jun 4, 2020

Uh oh!

IgorMinar commented Jun 9, 2020

Uh oh!

JiaLiPassion commented Jun 10, 2020

Uh oh!

IgorMinar left a comment

Choose a reason for hiding this comment

Uh oh!

angular-automatic-lock-bot bot commented Jul 12, 2020

Uh oh!

Uh oh!

JiaLiPassion commented Apr 9, 2020 •

edited

Loading

IgorMinar left a comment •

edited

Loading