docs(zone.js): update zone.js readme for the bundle format (#39508)

There is a typo in zone.js bundle format breaking change part,
the correct version should be `0.11.1` not `0.11.11`, and add
more clear text to explain the new bundle format directory structure.

PR Close #39508
This commit is contained in:
JiaLiPassion 2020-10-30 13:21:07 +09:00 committed by Andrew Kushnir
parent 5b45fab19d
commit 1951342124
1 changed files with 17 additions and 11 deletions

View File

@ -21,27 +21,33 @@ Read up on [Zone Primer](https://docs.google.com/document/d/1F5Ug0jcrm031vhSMJEO
Prior to `v0.11.1`, Zone.js provided two distribution bundle formats in the `dist` folder.
They were (1) `ES5` bundle distributed as `zone.js` and (2) `ES2015` bundle distributed as `zone-evergreen.js`.
These bundles are used for Angular's differential-loading mechanism.
Both of these bundles were in `UMD` format, and are used for Angular's differential-loading mechanism.
Prior to `v0.11.11` the following code
Starting with `v0.11.1`, Zone.js follows the [Angular Package Format](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs). Therefor the new Zone.js file layout is:
- `bundles`: `ES5` bundle in `UMD` format.
- `fesm2015`: `ES5` bundle in `ESM` format.
- `dist`: `ES5` bundle in `UMD` format. This directory is present to keep backward compatibility.
If you are using `Angular CLI`, the `polyfills.ts` file will contain:
```
import 'zone.js/dist/zone';
```
Starting with Zone.js `v0.11.1+` the import changes to:
```
import 'zone.js';
```
would load the `ES5` bundle from `dist/zone.js`.
Starting with `v0.11.1`, Zone.js follows the [Angular Package Format](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs), so the folder structure of the Zone.js bundles is updated to match `Angular Package Format`.
So the same code
```
import 'zone.js';
```
now loads the `ES2015` bundle instead.
Prior to `v0.11.1` the import would load the `ES5` bundle in `UMD` format from `dist/zone.js`.
Starting with `v0.11.1` the import loads the `ES2015` bundle in `ESM` format instead.
This is a breaking change for legacy browsers such as `IE11`.
For backwards compatibility `zone.js` continues to distribute the same bundles under `dist`.
To restore the old behavior change the `polyfills.ts` generated by `Angular CLI` to import like so:
To restore the old behavior import from the `dist` directory instead like so:
```
import 'zone.js/dist/zone';