docs(quickstart): JS IE Polyfill; change ES6->ES2015
closes #715, incorporates #684
This commit is contained in:
parent
44f84daadc
commit
a01e0cc6e2
|
@ -7,6 +7,11 @@
|
|||
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- #docregion libraries -->
|
||||
<!-- #docregion ie-polyfills -->
|
||||
<!-- IE required polyfill -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<!-- #enddocregion ie-polyfills -->
|
||||
|
||||
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
|
||||
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
|
||||
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
|
||||
|
|
|
@ -247,7 +247,7 @@ code-example(format="").
|
|||
:marked
|
||||
There are three noteworthy sections of HTML:
|
||||
|
||||
1. We load the JavaScript libraries we need. `angular2-polyfills.js` and `Rx.js` are needed by Angular 2.<br/>
|
||||
1. We load the JavaScript libraries we need; learn about them [below](#libraries).
|
||||
|
||||
2. We load our JavaScript files, paying attention to their order (`boot.js` needs `app.component.js` to be there first).
|
||||
|
||||
|
@ -279,7 +279,7 @@ figure.image-display
|
|||
.alert.is-helpful
|
||||
:marked
|
||||
If you see `Loading...` displayed instead, see the
|
||||
[Browser ES6 support appendix](#es6support).
|
||||
[Browser ES2015 support appendix](#es6support).
|
||||
:marked
|
||||
### Make some changes
|
||||
|
||||
|
@ -346,18 +346,37 @@ figure.image-display
|
|||
elaborate some of the points we covered quickly above.
|
||||
|
||||
There is no essential material here. Continued reading is for the curious.
|
||||
|
||||
|
||||
<a id="ie-polyfills"></a>
|
||||
<a id="es6support"></a>
|
||||
<a id="libraries"></a>
|
||||
.l-main-section
|
||||
:marked
|
||||
<a id="es6support"></a>
|
||||
### Appendix: Browser ES6 support
|
||||
Angular 2 relies on some ES2015 features, most of them found in modern
|
||||
browsers. Some browsers (including IE 11) require a shim to support the
|
||||
the needed functionality.
|
||||
Try loading the following shim *above* the other scripts in the `index.html`:
|
||||
### Appendix: Libraries
|
||||
We loaded the following scripts
|
||||
+makeExample('quickstart/js/index.html', 'libraries', 'index.html')(format=".")
|
||||
:marked
|
||||
We began with an Internet Explorer polyfill.
|
||||
IE requires a polyfill to run
|
||||
an application that relies on ES2015 promises and dynamic module loading.
|
||||
Most applications need those capabilities and most applications
|
||||
should run in Internet Explorer.
|
||||
|
||||
code-example(language="html" format=".").
|
||||
<script src="node_modules/es6-shim/es6-shim.js"></script>
|
||||
Next are the polyfills for Angular2, `angular2-polyfills.js`,
|
||||
followed by the Reactive Extensions RxJS library.
|
||||
.l-sub-section
|
||||
:marked
|
||||
Our QuickStart doesn't use the Reactive Extensions
|
||||
but any substantial application will want them
|
||||
when working with observables.
|
||||
We added the library here in QuickStart so we don't forget later.
|
||||
:marked
|
||||
Finally, we loaded the web development version of Angular 2 itself.
|
||||
|
||||
We'll make different choices as we gain experience and
|
||||
become more concerned about production qualities such as
|
||||
load times and memory footprint.
|
||||
.l-main-section
|
||||
:marked
|
||||
|
||||
|
||||
|
@ -406,7 +425,7 @@ code-example(format="").
|
|||
<a id="npm-errors"></a>
|
||||
### Appendix: Npm errors and warnings
|
||||
|
||||
All is well if there are no console messages starting with `npm ERR!` *at the end* of an **npm install**.
|
||||
All is well if there are no console messages starting with `npm ERR!` *at the end* of **npm install**.
|
||||
There might be a few `npm WARN` messages along the way — and that is perfectly fine.
|
||||
|
||||
We often see an `npm WARN` message after a series of `gyp ERR!` messages.
|
||||
|
@ -414,7 +433,7 @@ code-example(format="").
|
|||
If the re-compile fails, the package recovers (typically with a pre-built version)
|
||||
and everything works.
|
||||
|
||||
We are in good shape as long as there are no `npm ERR!` messages at the very end of `npm install`.
|
||||
Just make sure there are no `npm ERR!` messages at the very end of `npm install`.
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
|
|
|
@ -1443,7 +1443,7 @@ code-example(format=".", language="bash").
|
|||
.l-main-section
|
||||
:marked
|
||||
## Appendix: Internet Explorer polyfills
|
||||
A routed application relies on ES6 promises and dynamic module loading.
|
||||
A routed application relies on ES2015 promises and dynamic module loading.
|
||||
IE needs help with that.
|
||||
Make sure the following polyfill libraries are loaded in the `index.html`
|
||||
***above*** the Angular polyfill:
|
||||
|
|
|
@ -343,6 +343,7 @@ figure.image-display
|
|||
|
||||
<a id="ie-polyfills"></a>
|
||||
<a id="es6support"></a>
|
||||
<a id="libraries"></a>
|
||||
.l-main-section
|
||||
:marked
|
||||
### Appendix: Libraries
|
||||
|
@ -351,7 +352,7 @@ figure.image-display
|
|||
:marked
|
||||
We began with Internet Explorer polyfills.
|
||||
IE requires polyfills to run
|
||||
an application that relies on ES6 promises and dynamic module loading.
|
||||
an application that relies on ES2015 promises and dynamic module loading.
|
||||
Most applications need those capabilities and most applications
|
||||
should run in Internet Explorer.
|
||||
.l-sub-section
|
||||
|
@ -423,7 +424,7 @@ code-example(format="").
|
|||
<a id="npm-errors"></a>
|
||||
### Appendix: Npm errors and warnings
|
||||
|
||||
All is well if there are no console messages starting with `npm ERR!` *at the end* of an **npm install**.
|
||||
All is well if there are no console messages starting with `npm ERR!` *at the end* of **npm install**.
|
||||
There might be a few `npm WARN` messages along the way — and that is perfectly fine.
|
||||
|
||||
We often see an `npm WARN` message after a series of `gyp ERR!` messages.
|
||||
|
@ -431,7 +432,7 @@ code-example(format="").
|
|||
If the re-compile fails, the package recovers (typically with a pre-built version)
|
||||
and everything works.
|
||||
|
||||
We are in good shape as long as there are no `npm ERR!` messages at the very end of `npm install`.
|
||||
Just make sure there are no `npm ERR!` messages at the very end of `npm install`.
|
||||
|
||||
<!-- Move this to the Style Guide when we have one -->
|
||||
.l-main-section
|
||||
|
|
Loading…
Reference in New Issue