angular · filipesilva · Jan 27, 2017 · Dec 28, 2016 · Jan 10, 2017 · Jan 21, 2017
diff --git a/public/docs/_examples/deployment/ts/.gitignore b/public/docs/_examples/deployment/ts/.gitignore
@@ -0,0 +1 @@
+!systemjs.config.server.js
diff --git a/public/docs/_examples/deployment/ts/app/app.component.ts b/public/docs/_examples/deployment/ts/app/app.component.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <h1>Simple Deployment</h1>
+    <nav>
+      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
+      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/deployment/ts/app/app.module.ts b/public/docs/_examples/deployment/ts/app/app.module.ts
@@ -0,0 +1,29 @@
+// #docregion
+import { NgModule }             from '@angular/core';
+import { BrowserModule }        from '@angular/platform-browser';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AppComponent }           from './app.component';
+import { CrisisListComponent }    from './crisis-list.component';
+import { HeroListComponent }      from './hero-list.component';
+
+const appRoutes: Routes = [
+  { path: 'crisis-center', component: CrisisListComponent },
+  { path: 'heroes',        component: HeroListComponent },
+
+  { path: '', redirectTo: '/heroes', pathMatch: 'full' }
+];
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forRoot(appRoutes)
+  ],
+  declarations: [
+    AppComponent,
+    CrisisListComponent,
+    HeroListComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/deployment/ts/app/crisis-list.component.ts b/public/docs/_examples/deployment/ts/app/crisis-list.component.ts
@@ -0,0 +1,9 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  template: `
+    <h2>CRISIS CENTER</h2>
+    <p>Get your crisis here</p>`
+})
+export class CrisisListComponent { }
diff --git a/public/docs/_examples/deployment/ts/app/hero-list.component.ts b/public/docs/_examples/deployment/ts/app/hero-list.component.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  template: `
+    <h2>HEROES</h2>
+    <p>Get your heroes here</p>
+  `
+})
+export class HeroListComponent { }
diff --git a/public/docs/_examples/deployment/ts/app/main.ts b/public/docs/_examples/deployment/ts/app/main.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+// #docregion enableProdMode
+import { enableProdMode } from '@angular/core';
+
+// Enable production mode unless running locally
+if (!/localhost/.test(document.location.host)) {
+  enableProdMode();
+}
+// #enddocregion enableProdMode
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/deployment/ts/example-config.json b/public/docs/_examples/deployment/ts/example-config.json
diff --git a/public/docs/_examples/deployment/ts/index.html b/public/docs/_examples/deployment/ts/index.html
@@ -0,0 +1,38 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <!- Doesn't load from node_modules! -->
+
+    <!-- Set the base href -->
+    <base href="/">
+    <title>Simple Deployment</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- #docregion node-module-scripts -->
+    <!-- Polyfills for older browsers -->
+    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
+
+    <!-- Update these package versions as needed -->
+    <script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
+    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
+    <!-- #enddocregion node-module-scripts -->
+
+    <!-- #docregion systemjs-config -->
+    <!-- This SystemJS configuration loads umd packages from the web -->
+    <script src="systemjs.config.server.js"></script>
+    <!-- #enddocregion systemjs-config -->
+
+    <script>
+      System.import('app')
+            .catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app>loading...</my-app>
+  </body>
+
+</html>
diff --git a/public/docs/_examples/deployment/ts/systemjs.config.server.js b/public/docs/_examples/deployment/ts/systemjs.config.server.js
@@ -0,0 +1,46 @@
+// #docregion
+/**
+ * System configuration for deployment without installing node_modules
+ * Loads umd packages from the web instead
+ * Adjust as necessary for your application needs.
+ */
+(function (global) {
+  System.config({
+    // #docregion paths
+    paths: {
+      'npm:': 'https://unpkg.com/' // path serves as alias
+    },
+    // #enddocregion paths
+    // map tells the System loader where to look for things
+    map: {
+      app: 'app', // location of transpiled app files
+
+      // angular minimized umd bundles
+      '@angular/core': 'npm:@angular/core/bundles/core.umd.min.js',
+      '@angular/common': 'npm:@angular/common/bundles/common.umd.min.js',
+      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js',
+      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js',
+      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js',
+      '@angular/http': 'npm:@angular/http/bundles/http.umd.min.js',
+      '@angular/router': 'npm:@angular/router/bundles/router.umd.min.js',
+      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.min.js',
+      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js',
+      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.min.js',
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.min.js',
+
+      // other libraries
+      'rxjs':                      'npm:rxjs@5.0.1',
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
+    },
+    // packages tells the System loader how to load when no filename and/or no extension
+    packages: {
+      app: {
+        main: './main.js',
+        defaultExtension: 'js'
+      },
+      rxjs: {
+        defaultExtension: 'js'
+      }
+    }
+  });
+  })(this);
diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json
@@ -153,6 +153,11 @@
     "intro": "Pipes transform displayed values within a template."
   },
 
+  "production-deploy": {
+    "title": "Deployment",
+    "intro": "Learn how to deploy your Angular app."
+  },
+
   "router": {
     "title": "Routing & Navigation",
     "intro": "Discover the basics of screen navigation with the Angular Router."