feat(zone.js): upgrade zone.js to angular package format(APF) (angular#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

Author: JiaLiPassion

.circleci/config.yml

@@ -731,8 +731,8 @@ jobs:
       - run: yarn --cwd packages/zone.js promisetest
       - run: yarn --cwd packages/zone.js promisefinallytest
       - run: yarn bazel build //packages/zone.js:npm_package &&
-             cp dist/bin/packages/zone.js/npm_package/dist/zone-mix.js ./packages/zone.js/test/extra/ &&
-             cp dist/bin/packages/zone.js/npm_package/dist/zone-patch-electron.js ./packages/zone.js/test/extra/ &&
+             cp dist/bin/packages/zone.js/npm_package/bundles/zone-mix.umd.js ./packages/zone.js/test/extra/ &&
+             cp dist/bin/packages/zone.js/npm_package/bundles/zone-patch-electron.umd.js ./packages/zone.js/test/extra/ &&
              yarn --cwd packages/zone.js electrontest
       - run: yarn --cwd packages/zone.js jesttest
 

BUILD.bazel

@@ -20,9 +20,9 @@ filegroup(
     # do not sort
     srcs = [
         "@npm//:node_modules/core-js/client/core.js",
-        "//packages/zone.js/dist:zone.js",
-        "//packages/zone.js/dist:zone-testing.js",
-        "//packages/zone.js/dist:task-tracking.js",
+        "//packages/zone.js/bundles:zone.umd.js",
+        "//packages/zone.js/bundles:zone-testing.umd.js",
+        "//packages/zone.js/bundles:task-tracking.umd.js",
         "//:test-events.js",
         "//:shims_for_IE.js",
         # Including systemjs because it defines `__eval`, which produces correct stack traces.

aio/content/examples/setup/src/index.html

@@ -11,7 +11,7 @@
     <!-- Polyfills -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
-    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="systemjs.config.js"></script>
     <script>

aio/content/examples/upgrade-module/src/index-a-to-ajs-providers.html

@@ -12,7 +12,7 @@
     <!-- Polyfills -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
-    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.1.js"></script>

aio/content/examples/upgrade-module/src/index-a-to-ajs-transclusion.html

@@ -12,7 +12,7 @@
     <!-- Polyfills -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
-    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.1.js"></script>

aio/content/examples/upgrade-module/src/index-ajs-a-hybrid-bootstrap.html

@@ -12,7 +12,7 @@
     <!-- Polyfills -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
-    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.1.js"></script>

aio/content/examples/upgrade-module/src/index-ajs-to-a-projection.html

@@ -12,7 +12,7 @@
     <!-- Polyfills -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
-    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.1.js"></script>

aio/content/examples/upgrade-module/src/index-ajs-to-a-providers.html

@@ -12,7 +12,7 @@
     <!-- Polyfills -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
-    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.1.js"></script>

aio/content/examples/upgrade-module/src/index-downgrade-io.html

@@ -12,7 +12,7 @@
     <!-- Polyfills -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
-    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.1.js"></script>

aio/content/examples/upgrade-module/src/index-downgrade-static.html

@@ -12,7 +12,7 @@
     <!-- Polyfills -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
-    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.1.js"></script>

aio/content/examples/upgrade-module/src/index-upgrade-io.html

@@ -12,7 +12,7 @@
     <!-- Polyfills -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
-    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.1.js"></script>

aio/content/examples/upgrade-module/src/index-upgrade-static.html

@@ -12,7 +12,7 @@
     <!-- Polyfills -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
-    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.1.js"></script>

aio/content/examples/upgrade-phonecat-2-hybrid/aot/index.html

@@ -26,7 +26,7 @@
     <script src="phone-detail/phone-detail.module.js"></script>
 
     <script src="/node_modules/core-js/client/shim.min.js"></script>
-    <script src="/node_modules/zone.js/dist/zone.min.js"></script>
+    <script src="/node_modules/zone.js/bundles/zone.umd.min.js"></script>
 
     <script>window.module = 'aot';</script>
   </head>

aio/content/examples/upgrade-phonecat-2-hybrid/copy-dist-files.js

@@ -3,7 +3,7 @@ var fsExtra = require('fs-extra');
 var resources = [
   // polyfills
   'node_modules/core-js/client/shim.min.js',
-  'node_modules/zone.js/dist/zone.min.js',
+  'node_modules/zone.js/bundles/zone.umd.min.js',
   // css
   'app/app.css',
   'app/app.animations.css',
@@ -20,6 +20,7 @@ var resources = [
   'app/phone-detail/phone-detail.module.js'
 ];
 resources.map(function(sourcePath) {
-  var destPath = `aot/${sourcePath}`;
+  // Need to rename zone.umd.min.js to zone.min.js
+  var destPath = `aot/${sourcePath}`.replace('.umd.min.js', '.min.js');
   fsExtra.copySync(sourcePath, destPath);
 });

aio/content/examples/upgrade-phonecat-2-hybrid/index.html

@@ -27,7 +27,7 @@
 
     <!-- #docregion angular -->
     <script src="/node_modules/core-js/client/shim.min.js"></script>
-    <script src="/node_modules/zone.js/dist/zone.js"></script>
+    <script src="/node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="/node_modules/systemjs/dist/system.src.js"></script>
     <!-- #enddocregion angular -->
     <script src="/systemjs.config.1.js"></script>

aio/content/examples/upgrade-phonecat-2-hybrid/karma.conf.ajs.js

@@ -21,8 +21,8 @@ module.exports = function(config) {
       'node_modules/core-js/client/shim.js',
 
       // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/zone-testing.js',
+      'node_modules/zone.js/bundles/zone.umd.js',
+      'node_modules/zone.js/bundles/zone-testing.umd.js',
 
       // RxJs.
       { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },

aio/content/examples/upgrade-phonecat-2-hybrid/karma.conf.js

@@ -31,8 +31,8 @@ module.exports = function(config) {
       'node_modules/core-js/client/shim.js',
 
       // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/zone-testing.js',
+      'node_modules/zone.js/bundles/zone.umd.js',
+      'node_modules/zone.js/bundles/zone-testing.umd.js',
 
       // RxJs
       { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },

aio/content/examples/upgrade-phonecat-3-final/index.html

@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="app.css" />
 
     <script src="/node_modules/core-js/client/shim.min.js"></script>
-    <script src="/node_modules/zone.js/dist/zone.js"></script>
+    <script src="/node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="/node_modules/systemjs/dist/system.src.js"></script>
     <!-- #enddocregion full -->
     <script src="/systemjs.config.1.js"></script>

aio/content/examples/upgrade-phonecat-3-final/karma.conf.js

@@ -31,8 +31,8 @@ module.exports = function(config) {
       'node_modules/core-js/client/shim.js',
 
       // zone.js
-      'node_modules/zone.js/dist/zone.js',
-      'node_modules/zone.js/dist/zone-testing.js',
+      'node_modules/zone.js/bundles/zone.umd.js',
+      'node_modules/zone.js/bundles/zone-testing.umd.js',
 
       // RxJs
       { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },

aio/content/guide/browser-support.md

@@ -526,7 +526,7 @@ For example:
     // __Zone_enable_cross_context_check = true;
   </script>
   <!-- zone.js required by Angular -->
-  <script src="node_modules/zone.js/dist/zone.js"></script>
+  <script src="node_modules/zone.js/bundles/zone.umd.js"></script>
 
   <!-- application polyfills -->
 </code-example>

aio/content/guide/universal.md

@@ -227,7 +227,7 @@ as a navigation URL intended for the router.
 
 Fortunately, application routes have something in common: their URLs lack file extensions.
 (Data requests also lack extensions but they're easy to recognize because they always begin with `/api`.)
-All static asset requests have a file extension (such as `main.js` or `/node_modules/zone.js/dist/zone.js`).
+All static asset requests have a file extension (such as `main.js` or `/node_modules/zone.js/bundles/zone.umd.js`).
 
 Because we use routing, we can easily recognize the three types of requests and handle them differently.
 

dev-infra/benchmark/component_benchmark/component_benchmark.bzl

@@ -129,7 +129,7 @@ def component_benchmark(
     # The server for our application.
     ts_devserver(
         name = server,
-        bootstrap = ["//packages/zone.js/dist:zone.js"],
+        bootstrap = ["//packages/zone.js/bundles:zone.umd.js"],
         port = 4200,
         static_files = assets + styles,
         deps = [":" + app_main + ".min_debug.es2015.js"],

integration/bazel/package.json

@@ -16,7 +16,7 @@
     "reflect-metadata": "0.1.12",
     "rxjs": "file:../../node_modules/rxjs",
     "tslib": "file:../../node_modules/tslib",
-    "zone.js": "0.10.3"
+    "zone.js": "file:../../dist/zone.js-dist"
   },
   "devDependencies": {
     "@angular/bazel": "file:../../dist/packages-dist/bazel",

integration/bazel/src/BUILD.bazel

@@ -46,7 +46,7 @@ ts_devserver(
     serving_path = "/bundle.min.js",
     static_files = [
         "index.html",
-        "@npm//:node_modules/zone.js/dist/zone.min.js",
+        "@npm//:node_modules/zone.js/bundles/zone.umd.min.js",
     ],
     deps = ["//src"],
 )
@@ -72,7 +72,7 @@ pkg_web(
     srcs = [
         "index.html",
         ":bundle.min",
-        "@npm//:node_modules/zone.js/dist/zone.min.js",
+        "@npm//:node_modules/zone.js/bundles/zone.umd.min.js",
     ],
 )
 

integration/bazel/src/hello-world/BUILD.bazel

@@ -49,7 +49,7 @@ ts_library(
 karma_web_test_suite(
     name = "test",
     bootstrap = [
-        "@npm//:node_modules/zone.js/dist/zone-testing-bundle.js",
+        "@npm//:node_modules/zone.js/bundles/zone-testing-bundle.umd.js",
         "@npm//:node_modules/reflect-metadata/Reflect.js",
     ],
     browsers = [

integration/bazel/src/index.html

@@ -9,7 +9,7 @@
   <body>
     <!-- The Angular application will be bootstrapped into this element. -->
     <app-component></app-component>
-    <script src="/npm/node_modules/zone.js/dist/zone.min.js"></script>
+    <script src="/npm/node_modules/zone.js/bundles/zone.umd.min.js"></script>
     <script src="/bundle.min.js"></script>
   </body>
 </html>