angular-cn/aio/content/examples/upgrade-phonecat-2-hybrid
JiaLiPassion 583a9d38a1 feat(zone.js): upgrade zone.js to angular package format(APF) (#36540)
Close #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, o5376a8b139/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 #36540
2020-06-11 11:08:48 -07:00
..
aot feat(zone.js): upgrade zone.js to angular package format(APF) (#36540) 2020-06-11 11:08:48 -07:00
app docs: migrate examples from @angular/http to @angular/common/http (#28296) 2019-03-11 10:52:17 -07:00
README.md docs(aio): minor fixes for the upgrade guide 2017-06-23 09:03:28 -07:00
bs-config.aot.json docs(aio): update migrated content from anguar.io 2017-03-28 10:21:46 +01:00
copy-dist-files.js feat(zone.js): upgrade zone.js to angular package format(APF) (#36540) 2020-06-11 11:08:48 -07:00
e2e-spec.ts docs(aio): delay ngUpgrade e2e test to avoid flakes 2017-07-28 15:28:28 -07:00
example-config.json build(aio): change examples to CLI (#19248) 2017-09-21 17:05:54 -07:00
index.html feat(zone.js): upgrade zone.js to angular package format(APF) (#36540) 2020-06-11 11:08:48 -07:00
karma-test-shim.1.js docs: migrate examples from @angular/http to @angular/common/http (#28296) 2019-03-11 10:52:17 -07:00
karma-test-shim.js docs: migrate examples from @angular/http to @angular/common/http (#28296) 2019-03-11 10:52:17 -07:00
karma.conf.ajs.js feat(zone.js): upgrade zone.js to angular package format(APF) (#36540) 2020-06-11 11:08:48 -07:00
karma.conf.js feat(zone.js): upgrade zone.js to angular package format(APF) (#36540) 2020-06-11 11:08:48 -07:00
rollup-config.js test(docs-infra): re-enable upgrade-phonecat-2-hybrid example e2e tests (#36969) 2020-05-13 16:02:29 -07:00
run-unit-tests.sh docs(aio): update migrated content from anguar.io 2017-03-28 10:21:46 +01:00
systemjs.config.1.js docs: migrate examples from @angular/http to @angular/common/http (#28296) 2019-03-11 10:52:17 -07:00
tsconfig-aot.json build(docs-infra): switch docs examples to Ivy (#36143) 2020-04-06 15:31:07 -07:00
tsconfig.json build(docs-infra): switch docs examples to Ivy (#36143) 2020-04-06 15:31:07 -07:00

README.md

This is the Angular Phonecat application adjusted to fit our boilerplate project structure.

The following changes from vanilla Phonecat are applied:

  • Karma config for unit tests is in karma.conf.ajs.js because the boilerplate Karma config is not compatible with the way AngularJS tests need to be run. The shell script run-unit-tests.sh can be used to run the unit tests.
  • Also for the Karma shim, there is a karma-test-shim.1.js file which isn't used but is shown in the test appendix.
  • Instead of using Bower, AngularJS and its dependencies are fetched from a CDN in index.html and karma.conf.ajs.js.
  • E2E tests have been moved to the parent directory, where run-e2e-tests can discover and run them along with all the other examples.
  • Most of the phone JSON and image data removed in the interest of keeping repo weight down. Keeping enough to retain testability of the app.

Running the app

Start like any example

npm run start

Running unit tests

./run-unit-tests.sh

Running E2E tests

Like for any example (at the project root):

gulp run-e2e-tests --filter=phonecat-2