angular · wardbell · Jan 17, 2016 · Jan 18, 2016
diff --git a/public/docs/_examples/architecture/ts/app/sales-tax.component.ts b/public/docs/_examples/architecture/ts/app/sales-tax.component.ts
@@ -13,7 +13,7 @@ import {TaxRateService}  from './tax-rate.service';
     <h2>Sales Tax Calculator</h2>
     Amount: <input #amountBox (change)="0">
 
-    <div *ngIf=amountBox.value>
+    <div *ngIf="amountBox.value">
     The sales tax is
      {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
     </div>

diff --git a/public/docs/_examples/architecture/ts/index.html b/public/docs/_examples/architecture/ts/index.html
@@ -2,6 +2,10 @@
 <html>
   <head>
     <title>Intro to Angular 2</title>
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/_examples/attribute-directives/ts/index.html b/public/docs/_examples/attribute-directives/ts/index.html
@@ -4,6 +4,10 @@
 
 <head>
   <title>Attribute Directives</title>
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/_examples/displaying-data/ts/index.1.html b/public/docs/_examples/displaying-data/ts/index.1.html
@@ -3,13 +3,25 @@
 
   <head>
     <title>Displaying Data</title>
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
+    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="node_modules/rxjs/bundles/Rx.js"></script>
     <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
     <script>
       System.config({
-        packages: {'app': {defaultExtension: 'js'}}
+        packages: {        
+          app: {
+            format: 'register',
+            defaultExtension: 'js'
+          }
+        }
       });
-      System.import('app/boot');
+      System.import('app/boot')
+            .then(null, console.error.bind(console));      
     </script>
   </head>
 

diff --git a/public/docs/_examples/displaying-data/ts/index.html b/public/docs/_examples/displaying-data/ts/index.html
@@ -3,6 +3,10 @@
 
   <head>
     <title>Displaying Data</title>
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/_examples/forms/ts/index.html b/public/docs/_examples/forms/ts/index.html
@@ -10,6 +10,10 @@
      <!-- #docregion styles -->
     <link rel="stylesheet" href="styles.css">
      <!-- #enddocregion styles -->
+
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
 
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>

diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/index.html b/public/docs/_examples/hierarchical-dependency-injection/ts/index.html
@@ -3,6 +3,10 @@
 
   <head>
     <title>Hierarchical Injectors</title>
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/_examples/homepage-hello-world/ts/src/index.html b/public/docs/_examples/homepage-hello-world/ts/src/index.html
@@ -6,6 +6,10 @@
     <title>Angular 2 QuickStart</title>
 
     <!-- 1. Load libraries -->
+    <!-- IE required polyfills (from CDN), in this exact order -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
+
     <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
     <script src="https://code.angularjs.org/tools/typescript.js"></script>
     <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>

diff --git a/public/docs/_examples/homepage-tabs/ts/src/index.html b/public/docs/_examples/homepage-tabs/ts/src/index.html
@@ -7,6 +7,10 @@
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- 1. Load libraries -->
+    <!-- IE required polyfills (from CDN), in this exact order -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
+
     <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
     <script src="https://code.angularjs.org/tools/typescript.js"></script>
     <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>

diff --git a/public/docs/_examples/homepage-todo/ts/src/index.html b/public/docs/_examples/homepage-todo/ts/src/index.html
@@ -7,6 +7,10 @@
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- 1. Load libraries -->
+    <!-- IE required polyfills (from CDN), in this exact order -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
+
     <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
     <script src="https://code.angularjs.org/tools/typescript.js"></script>
     <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>

diff --git a/public/docs/_examples/lifecycle-hooks/ts/index.html b/public/docs/_examples/lifecycle-hooks/ts/index.html
@@ -4,6 +4,10 @@
 
   <head>
     <title>Angular 2 Lifecycle Hooks</title>
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/_examples/pipes/ts/index.html b/public/docs/_examples/pipes/ts/index.html
@@ -3,6 +3,10 @@
 
   <head>
     <title>Pipes</title>
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/_examples/quickstart/ts/index.html b/public/docs/_examples/quickstart/ts/index.html
@@ -6,7 +6,13 @@
     <title>Angular 2 QuickStart</title>
 
     <!-- 1. Load libraries -->
-    <!-- #docregion libraries -->
+    <!-- #docregion libraries -->    
+    <!-- #docregion ie-polyfills -->
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+    <!-- #enddocregion ie-polyfills -->
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/_examples/router/ts/index.1.html b/public/docs/_examples/router/ts/index.1.html
@@ -7,6 +7,12 @@
     <!-- #enddocregion base-href -->
     <title>Router Sample</title>
     <link rel="stylesheet" href="styles.css">
+<!-- #docregion ie-cdn-polyfills -->
+    <!-- IE required polyfills (from CDN), in this exact order -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
+<!-- #enddocregion ie-cdn-polyfills -->
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/_examples/router/ts/index.html b/public/docs/_examples/router/ts/index.html
@@ -9,6 +9,13 @@
 
     <title>Router Sample</title>
     <link rel="stylesheet" href="styles.css">
+
+    <!-- #docregion ie-polyfills -->
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+    <!-- #enddocregion ie-polyfills -->
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/_examples/structural-directives/ts/index.html b/public/docs/_examples/structural-directives/ts/index.html
@@ -4,6 +4,10 @@
 
   <head>
     <title>Angular 2 Structural Directives</title>
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/_examples/styleguide/ts/index.html b/public/docs/_examples/styleguide/ts/index.html
@@ -2,6 +2,10 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
     <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
     <script src="https://jspm.io/system@0.16.js"></script>
     <script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js"></script>

diff --git a/public/docs/_examples/template-syntax/ts/index.html b/public/docs/_examples/template-syntax/ts/index.html
@@ -3,6 +3,11 @@
   <head>
     <title>Template Syntax</title>
     <link rel="stylesheet" href="styles.css">
+
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/_examples/toh-1/ts/index.html b/public/docs/_examples/toh-1/ts/index.html
@@ -2,6 +2,10 @@
 <html>
   <head>
     <title>Angular 2 QuickStart</title>
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/_examples/toh-2/ts/index.html b/public/docs/_examples/toh-2/ts/index.html
@@ -2,6 +2,10 @@
 <html>
   <head>
     <title>Angular 2 QuickStart</title>
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/_examples/toh-3/ts/index.html b/public/docs/_examples/toh-3/ts/index.html
@@ -2,6 +2,10 @@
 <html>
   <head>
     <title>Angular 2 QuickStart</title>
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/_examples/toh-4/ts/index.html b/public/docs/_examples/toh-4/ts/index.html
@@ -2,6 +2,10 @@
 <html>
   <head>
     <title>Angular 2 QuickStart</title>
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/_examples/tutorial/ts/index.html b/public/docs/_examples/tutorial/ts/index.html
@@ -4,6 +4,10 @@
 <head>
   <base href="/">
   <link rel="stylesheet" href="styles.css">
+  <!-- IE required polyfills, in this exact order -->
+  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
   <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
   <script src="node_modules/systemjs/dist/system.src.js"></script>
   <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/_examples/user-input/ts/index.html b/public/docs/_examples/user-input/ts/index.html
@@ -3,6 +3,11 @@
   <head>
     <title>User Input</title>
     <link rel="stylesheet" href="styles.css">
+
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+
     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>

diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
@@ -10,7 +10,7 @@ include ../../../../_includes/_util-fns
   We click the browser's back and forward buttons and the browser navigates
   backward and forward through the history of pages we've seen.
 
-  The Angular "**Component Router**" (AKA "the router") borrows from this model.
+  The Angular "**Component Router**" ("the router") borrows from this model.
   It can interpret a browser URL as an instruction
   to navigate to a client-generated view and pass optional parameters along to the supporting view component
   to help it decide what specific content to present.
@@ -70,9 +70,9 @@ include ../../../../_includes/_util-fns
   When the browser's URL changes, the router looks for a corresponding **`RouteDefinition`**
   from which it can determine the component to display.
 
-  A new router has no route definitions. We have to configure it.
-  The preferred way to configure the router is with a **`@RouteConfig`** [decorator](glossary.html#decorator)
-  applied to a host component.
+  A router has no route definitions until we configure it.
+  The preferred way to simultaneously create a router and add its routes is with a **`@RouteConfig`** [decorator](glossary.html#decorator)
+  applied to the router's host component.
 
   In this example, we configure the top-level `AppComponent` with three route definitions
 +makeExample('router/ts/app/app.component.2.ts', 'route-config', 'app.component.ts (excerpt)')(format=".")
@@ -83,7 +83,8 @@ include ../../../../_includes/_util-fns
     There are several flavors of `RouteDefinition`.
     The most common by far is the named **`Route`** which maps a URL path to a component
 
-    The `name` field is the name of the `Route`. The name **must** be spelled in **PascalCase**.
+    The `name` field is the route name which **must** be spelled in **PascalCase** 
+    to avoid potential confusion with the route `path`.
 
     The `:id` in the third route is a token for a route parameter. In a URL such as `/hero/42`, "42"
     is the value of the `id` parameter. The corresponding `HeroDetailComponent`
@@ -268,13 +269,17 @@ figure.image-display
   <a id="load-library"></a>
   ### Load the Component Router library
   The Component Router is not part of the Angular 2 core. It is in its own library.
-  The router is an optional service and you might prefer a different router someday.
+  The router is an optional service because not all applications need routing and,
+  depending on your requirements, you may need a different routing library.
 
   The Component Router library is part of the Angular npm bundle.
   We make it available by loading its script in our `index.html`, right after
   the Angular core script.
 <a id="base-href"></a>
 +makeExample('router/ts/index.html','router-lib')(format=".")
+.l-sub-section
+  :marked
+    Internet Explorer requires additional polyfill libraries as described [below](#ie-polyfills)
 :marked
   <a id="base-href"></a>
   ### Set the *&lt;base href>*
@@ -287,9 +292,9 @@ figure.image-display
   "HTML 5 style" URLs.
 
   We must **add a [&lt;base href> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag**
-  to the `index.html` to make this work.
-  The `href` value specifies the base URL to use for all *relative* URLs within a document including
-  links to css files, scripts, and images.
+  to the `index.html` to make `pushState` routing work. 
+  The browser also needs the base `href` value to prefix *relative* URLs when downloading and linking to 
+  css files, scripts, and images.
 
   Add the base element just after the  `<head>` tag.
   If the `app` folder is the application root, as it is for our application,
@@ -817,7 +822,7 @@ code-example(format="").
 :marked
   Notice that the **path ends with a slash and three trailing periods (`/...`)**.
 
-  That means this is an incomplete route (AKA a ***non-terminal route***).  The finished route will be some combination of
+  That means this is an incomplete route (a ***non-terminal route***).  The finished route will be some combination of
   the parent `/crisis-center/` route and a route from the **child router** that belongs to the designated component.
 
   All is well.
@@ -1433,3 +1438,17 @@ code-example(format=".", language="bash").
   Then *override* the default strategy defined in `ROUTE_PROVIDERS` by
   providing the `HashLocationStrategy` later in the `bootstrap` providers array argument:
 +makeExample('router/ts/app/boot.2.ts','', 'boot.ts (hash URL strategy)')
+
+<a id="ie-polyfills"></a>
+.l-main-section
+:marked
+  ## Appendix: Internet Explorer polyfills
+  A routed application relies on ES6 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:
++makeExample('router/ts/index.html','ie-polyfills')(format=".")
+:marked
+  We could substitute the following libraries from a CDN:
++makeExample('router/ts/index.1.html','ie-cdn-polyfills')(format=".")
+:marked