Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 8a537b1

Browse files
filipesilvafilipesilva
authored
feat(deployment): add deployment chapter (#3043)
This PR adds the Deployment Chapter.
1 parent 878dfa6 commit 8a537b1

11 files changed

+681
-0
lines changed

‎public/docs/_examples/deployment/ts/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
!systemjs.config.server.js

‎public/docs/_examples/deployment/ts/app/app.component.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
selector: 'my-app',
6+
template: `
7+
<h1>Simple Deployment</h1>
8+
<nav>
9+
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
10+
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
11+
</nav>
12+
<router-outlet></router-outlet>
13+
`
14+
})
15+
export class AppComponent { }

‎public/docs/_examples/deployment/ts/app/app.module.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// #docregion
2+
import { NgModule } from '@angular/core';
3+
import { BrowserModule } from '@angular/platform-browser';
4+
import { RouterModule, Routes } from '@angular/router';
5+
6+
import { AppComponent } from './app.component';
7+
import { CrisisListComponent } from './crisis-list.component';
8+
import { HeroListComponent } from './hero-list.component';
9+
10+
const appRoutes: Routes = [
11+
{ path: 'crisis-center', component: CrisisListComponent },
12+
{ path: 'heroes', component: HeroListComponent },
13+
14+
{ path: '', redirectTo: '/heroes', pathMatch: 'full' }
15+
];
16+
17+
@NgModule({
18+
imports: [
19+
BrowserModule,
20+
RouterModule.forRoot(appRoutes)
21+
],
22+
declarations: [
23+
AppComponent,
24+
CrisisListComponent,
25+
HeroListComponent
26+
],
27+
bootstrap: [ AppComponent ]
28+
})
29+
export class AppModule { }

‎public/docs/_examples/deployment/ts/app/crisis-list.component.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
template: `
6+
<h2>CRISIS CENTER</h2>
7+
<p>Get your crisis here</p>`
8+
})
9+
export class CrisisListComponent { }

‎public/docs/_examples/deployment/ts/app/hero-list.component.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
template: `
6+
<h2>HEROES</h2>
7+
<p>Get your heroes here</p>
8+
`
9+
})
10+
export class HeroListComponent { }

‎public/docs/_examples/deployment/ts/app/main.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// #docregion
2+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3+
4+
import { AppModule } from './app.module';
5+
6+
// #docregion enableProdMode
7+
import { enableProdMode } from '@angular/core';
8+
9+
// Enable production mode unless running locally
10+
if (!/localhost/.test(document.location.host)) {
11+
enableProdMode();
12+
}
13+
// #enddocregion enableProdMode
14+
15+
platformBrowserDynamic().bootstrapModule(AppModule);

‎public/docs/_examples/deployment/ts/example-config.json

Whitespace-only changes.

‎public/docs/_examples/deployment/ts/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!-- #docregion -->
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<!- Doesn't load from node_modules! -->
6+
7+
<!-- Set the base href -->
8+
<base href="/">
9+
<title>Simple Deployment</title>
10+
<meta charset="UTF-8">
11+
<meta name="viewport" content="width=device-width, initial-scale=1">
12+
<link rel="stylesheet" href="styles.css">
13+
14+
<!-- #docregion node-module-scripts -->
15+
<!-- Polyfills for older browsers -->
16+
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
17+
18+
<!-- Update these package versions as needed -->
19+
<script src="https://unpkg.com/[email protected]?main=browser"></script>
20+
<script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>
21+
<!-- #enddocregion node-module-scripts -->
22+
23+
<!-- #docregion systemjs-config -->
24+
<!-- This SystemJS configuration loads umd packages from the web -->
25+
<script src="systemjs.config.server.js"></script>
26+
<!-- #enddocregion systemjs-config -->
27+
28+
<script>
29+
System.import('app')
30+
.catch(function(err){ console.error(err); });
31+
</script>
32+
</head>
33+
34+
<body>
35+
<my-app>loading...</my-app>
36+
</body>
37+
38+
</html>

‎public/docs/_examples/deployment/ts/systemjs.config.server.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// #docregion
2+
/**
3+
* System configuration for deployment without installing node_modules
4+
* Loads umd packages from the web instead
5+
* Adjust as necessary for your application needs.
6+
*/
7+
(function (global) {
8+
System.config({
9+
// #docregion paths
10+
paths: {
11+
'npm:': 'https://unpkg.com/' // path serves as alias
12+
},
13+
// #enddocregion paths
14+
// map tells the System loader where to look for things
15+
map: {
16+
app: 'app', // location of transpiled app files
17+
18+
// angular minimized umd bundles
19+
'@angular/core': 'npm:@angular/core/bundles/core.umd.min.js',
20+
'@angular/common': 'npm:@angular/common/bundles/common.umd.min.js',
21+
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js',
22+
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js',
23+
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js',
24+
'@angular/http': 'npm:@angular/http/bundles/http.umd.min.js',
25+
'@angular/router': 'npm:@angular/router/bundles/router.umd.min.js',
26+
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.min.js',
27+
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js',
28+
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.min.js',
29+
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.min.js',
30+
31+
// other libraries
32+
'rxjs': 'npm:[email protected]',
33+
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
34+
},
35+
// packages tells the System loader how to load when no filename and/or no extension
36+
packages: {
37+
app: {
38+
main: './main.js',
39+
defaultExtension: 'js'
40+
},
41+
rxjs: {
42+
defaultExtension: 'js'
43+
}
44+
}
45+
});
46+
})(this);

‎public/docs/ts/latest/guide/_data.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,11 @@
153153
"intro": "Pipes transform displayed values within a template."
154154
},
155155

156+
"production-deploy": {
157+
"title": "Deployment",
158+
"intro": "Learn how to deploy your Angular app."
159+
},
160+
156161
"router": {
157162
"title": "Routing & Navigation",
158163
"intro": "Discover the basics of screen navigation with the Angular Router."

0 commit comments

Comments
 (0)