element');
- });
-
- it('should display the absolute path text', function () {
- expect(page.absComp.getText()).toContain('Absolute');
- });
-
- it('should display the component-relative path text', function () {
- expect(page.relComp.getText()).toContain('Component-relative');
- });
-});
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/plnkr.json b/public/docs/_examples/cb-component-relative-paths/ts/plnkr.json
deleted file mode 100644
index 21002e1d2f..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/plnkr.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "description": "Module-relative Paths",
- "basePath": "src/",
- "files": [
- "!**/*.d.ts",
- "!**/*.js"
- ],
- "tags": [ "cookbook" ]
-}
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/src/app/app.component.ts b/public/docs/_examples/cb-component-relative-paths/ts/src/app/app.component.ts
deleted file mode 100644
index 8b469886ee..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/src/app/app.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-selector: 'my-app',
-template:
- `Absolute & Component-Relative Paths
-
-
- `
-})
-export class AppComponent {}
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/src/app/app.module.ts b/public/docs/_examples/cb-component-relative-paths/ts/src/app/app.module.ts
deleted file mode 100644
index a13f4b144f..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/src/app/app.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { SomeAbsoluteComponent, SomeRelativeComponent } from './some.component';
-
-@NgModule({
- imports: [
- BrowserModule
- ],
- declarations: [
- AppComponent,
- SomeAbsoluteComponent,
- SomeRelativeComponent
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.css b/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.css
deleted file mode 100644
index f43e11f60e..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/* #docregion */
-div.absolute {
- background: beige;
- border: 1px solid darkred;
- color: red;
- margin: 8px;
- max-width: 20em;
- padding: 4px;
- text-align: center;
-}
-
-div.relative {
- background: powderblue;
- border: 1px solid darkblue;
- color: Blue;
- font-style: italic;
- margin: 8px;
- max-width: 20em;
- padding: 4px;
- text-align: center;
-}
-
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.html b/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.html
deleted file mode 100644
index 027741ce55..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
- {{type}}
{{path}}
-
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.ts b/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.ts
deleted file mode 100644
index 327727873c..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-///////// Using Absolute Paths ///////
-
-// #docregion absolute-config
-@Component({
- selector: 'absolute-path',
- templateUrl: 'app/some.component.html',
- styleUrls: ['app/some.component.css']
-})
-// #enddocregion absolute-config
-export class SomeAbsoluteComponent {
- class = 'absolute';
- type = 'Absolute template & style URLs';
- path = 'app/path.component.html';
-}
-
-///////// Using Relative Paths ///////
-
-// #docregion relative-config
-@Component({
- // #docregion module-id
- moduleId: module.id,
- // #enddocregion module-id
- selector: 'relative-path',
- templateUrl: './some.component.html',
- styleUrls: ['./some.component.css']
-})
-// #enddocregion relative-config
-
-export class SomeRelativeComponent {
- class = 'relative';
- type = 'Component-relative template & style URLs';
- path = 'path.component.html';
-
-}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/app.component.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/app.component.ts
index a3b938f7e5..3045893c58 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/src/app/app.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/app.component.ts
@@ -7,7 +7,6 @@ import { UserContextService } from './user-context.service';
import { UserService } from './user.service';
@Component({
- moduleId: module.id,
selector: 'my-app',
templateUrl: './app.component.html',
// #docregion providers
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/date-logger.service.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/date-logger.service.ts
index e5b597db02..875779be40 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/src/app/date-logger.service.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/date-logger.service.ts
@@ -4,29 +4,10 @@ import { Injectable } from '@angular/core';
import { LoggerService } from './logger.service';
-// #docregion minimal-logger
-// class used as a restricting interface (hides other public members)
-export abstract class MinimalLogger {
- logInfo: (msg: string) => void;
- logs: string[];
-}
-// #enddocregion minimal-logger
-
-/*
-// Transpiles to:
-// #docregion minimal-logger-transpiled
- var MinimalLogger = (function () {
- function MinimalLogger() {}
- return MinimalLogger;
- }());
- exports("MinimalLogger", MinimalLogger);
-// #enddocregion minimal-logger-transpiled
- */
-
// #docregion date-logger-service
@Injectable()
// #docregion date-logger-service-signature
-export class DateLoggerService extends LoggerService implements MinimalLogger
+export class DateLoggerService extends LoggerService
// #enddocregion date-logger-service-signature
{
logInfo(msg: any) { super.logInfo(stamp(msg)); }
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.1.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.1.ts
new file mode 100644
index 0000000000..da2c57aeaf
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.1.ts
@@ -0,0 +1,26 @@
+// Illustrative (not used), mini-version of the actual HeroOfTheMonthComponent
+// Injecting with the MinimalLogger "interface-class"
+import { Component, NgModule } from '@angular/core';
+import { LoggerService } from './logger.service';
+import { MinimalLogger } from './minimal-logger.service';
+
+// #docregion
+@Component({
+ selector: 'hero-of-the-month',
+ templateUrl: './hero-of-the-month.component.html',
+ // Todo: move this aliasing, `useExisting` provider to the AppModule
+ providers: [{ provide: MinimalLogger, useExisting: LoggerService }]
+})
+export class HeroOfTheMonthComponent {
+ logs: string[] = [];
+ constructor(logger: MinimalLogger) {
+ logger.logInfo('starting up');
+ }
+}
+// #enddocregion
+
+// This NgModule exists only to avoid the Angular language service's "undeclared component" error
+@NgModule({
+ declarations: [ HeroOfTheMonthComponent ]
+})
+class NoopModule {}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.html b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.html
new file mode 100644
index 0000000000..f0ae619d6a
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.html
@@ -0,0 +1,9 @@
+{{title}}
+Winner: {{heroOfTheMonth.name}}
+Reason for award: {{heroOfTheMonth.description}}
+Runners-up: {{runnersUp}}
+
+Logs:
+
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.ts
index c5bafca36d..90ad13d639 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.ts
@@ -1,19 +1,19 @@
/* tslint:disable:one-line:check-open-brace*/
// #docplaster
-// #docregion opaque-token
-import { OpaqueToken } from '@angular/core';
+// #docregion injection-token
+import { InjectionToken } from '@angular/core';
-export const TITLE = new OpaqueToken('title');
-// #enddocregion opaque-token
+export const TITLE = new InjectionToken('title');
+// #enddocregion injection-token
// #docregion hero-of-the-month
import { Component, Inject } from '@angular/core';
-import { DateLoggerService,
- MinimalLogger } from './date-logger.service';
+import { DateLoggerService } from './date-logger.service';
import { Hero } from './hero';
import { HeroService } from './hero.service';
import { LoggerService } from './logger.service';
+import { MinimalLogger } from './minimal-logger.service';
import { RUNNERS_UP,
runnersUpFactory } from './runners-up';
@@ -22,28 +22,16 @@ import { RUNNERS_UP,
const someHero = new Hero(42, 'Magma', 'Had a great month!', '555-555-5555');
// #enddocregion some-hero
-const template = `
- {{title}}
- Winner: {{heroOfTheMonth.name}}
- Reason for award: {{heroOfTheMonth.description}}
- Runners-up: {{runnersUp}}
-
- Logs:
-
- `;
-
// #docregion hero-of-the-month
@Component({
selector: 'hero-of-the-month',
- template: template,
+ templateUrl: './hero-of-the-month.component.html',
providers: [
// #docregion use-value
{ provide: Hero, useValue: someHero },
- // #docregion provide-opaque-token
+ // #docregion provide-injection-token
{ provide: TITLE, useValue: 'Hero of the Month' },
- // #enddocregion provide-opaque-token
+ // #enddocregion provide-injection-token
// #enddocregion use-value
// #docregion use-class
{ provide: HeroService, useClass: HeroService },
@@ -52,9 +40,9 @@ const template = `
// #docregion use-existing
{ provide: MinimalLogger, useExisting: LoggerService },
// #enddocregion use-existing
- // #docregion provide-opaque-token, use-factory
+ // #docregion provide-injection-token, use-factory
{ provide: RUNNERS_UP, useFactory: runnersUpFactory(2), deps: [Hero, HeroService] }
- // #enddocregion provide-opaque-token, use-factory
+ // #enddocregion provide-injection-token, use-factory
]
})
export class HeroOfTheMonthComponent {
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/minimal-logger.service.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/minimal-logger.service.ts
new file mode 100644
index 0000000000..d87fa594d1
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/minimal-logger.service.ts
@@ -0,0 +1,22 @@
+// #docregion
+// Class used as a "narrowing" interface that exposes a minimal logger
+// Other members of the actual implementation are invisible
+export abstract class MinimalLogger {
+ logs: string[];
+ logInfo: (msg: string) => void;
+}
+// #enddocregion
+
+/*
+// Transpiles to:
+// #docregion minimal-logger-transpiled
+ var MinimalLogger = (function () {
+ function MinimalLogger() {}
+ return MinimalLogger;
+ }());
+ exports("MinimalLogger", MinimalLogger);
+// #enddocregion minimal-logger-transpiled
+*/
+
+// See http://stackoverflow.com/questions/43154832/unexpected-token-export-in-angular-app-with-systemjs-and-typescript/
+export const _ = 0;
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/runners-up.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/runners-up.ts
index 0bc3069883..0ce81ca55c 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/src/app/runners-up.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/runners-up.ts
@@ -1,13 +1,13 @@
// #docplaster
// #docregion
-import { OpaqueToken } from '@angular/core';
+import { InjectionToken } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';
// #docregion runners-up
-export const RUNNERS_UP = new OpaqueToken('RunnersUp');
-// #docregion runners-up
+export const RUNNERS_UP = new InjectionToken('RunnersUp');
+// #enddocregion runners-up
// #docregion factory-synopsis
export function runnersUpFactory(take: number) {
diff --git a/public/docs/_examples/cb-dynamic-component-loader/ts/plnkr.json b/public/docs/_examples/cb-dynamic-component-loader/ts/plnkr.json
new file mode 100644
index 0000000000..c43fb15c12
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-component-loader/ts/plnkr.json
@@ -0,0 +1,9 @@
+{
+ "description": "Dynamic Component Loader",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js"
+ ],
+ "tags":["cookbook component"]
+}
diff --git a/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad-banner.component.ts b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad-banner.component.ts
index 293d31dea9..8489fce5b2 100644
--- a/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad-banner.component.ts
+++ b/public/docs/_examples/cb-dynamic-component-loader/ts/src/app/ad-banner.component.ts
@@ -11,11 +11,12 @@ import { AdComponent } from './ad.component';
template: `
Advertisements
-
+
`
- // #enddocregion ad-host
+ // #enddocregion ad-host
})
+// #docregion class
export class AdBannerComponent implements AfterViewInit, OnDestroy {
@Input() ads: AdItem[];
currentAddIndex: number = -1;
@@ -53,3 +54,4 @@ export class AdBannerComponent implements AfterViewInit, OnDestroy {
}, 3000);
}
}
+// #enddocregion class
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.ts b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.ts
index 24d0bd168b..024571a7c2 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.ts
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.ts
@@ -5,7 +5,6 @@ import { FormGroup } from '@angular/forms';
import { QuestionBase } from './question-base';
@Component({
- moduleId: module.id,
selector: 'df-question',
templateUrl: './dynamic-form-question.component.html'
})
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.ts b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.ts
index 32aaf73114..8d95c0d3a4 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.ts
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.ts
@@ -6,7 +6,6 @@ import { QuestionBase } from './question-base';
import { QuestionControlService } from './question-control.service';
@Component({
- moduleId: module.id,
selector: 'dynamic-form',
templateUrl: './dynamic-form.component.html',
providers: [ QuestionControlService ]
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts b/public/docs/_examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts
index d4924e7ef9..241ff1e782 100644
--- a/public/docs/_examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts
@@ -8,7 +8,6 @@ import { Hero } from '../shared/hero';
import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
@Component({
- moduleId: module.id,
selector: 'hero-form-reactive3',
templateUrl: './hero-form-reactive.component.html'
})
@@ -33,7 +32,7 @@ export class HeroFormReactiveComponent implements OnInit {
// to be removed/re-added in a tick via NgIf
// TODO: Workaround until NgForm has a reset method (#6822)
active = true;
-// #docregion
+// #docregion class
// #docregion add-hero
addHero() {
this.hero = new Hero(42, '', '');
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/shared/forbidden-name.directive.ts b/public/docs/_examples/cb-form-validation/ts/src/app/shared/forbidden-name.directive.ts
index a8f6c03d33..870f514842 100644
--- a/public/docs/_examples/cb-form-validation/ts/src/app/shared/forbidden-name.directive.ts
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/shared/forbidden-name.directive.ts
@@ -39,5 +39,5 @@ export class ForbiddenValidatorDirective implements Validator, OnChanges {
return this.valFn(control);
}
}
-// #docregion directive
+// #enddocregion directive
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.ts b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.ts
index b096ca8cf4..1bc29db44d 100644
--- a/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.ts
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.ts
@@ -7,7 +7,6 @@ import { Component } from '@angular/core';
import { Hero } from '../shared/hero';
@Component({
- moduleId: module.id,
selector: 'hero-form-template1',
templateUrl: './hero-form-template1.component.html'
})
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.ts b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.ts
index 8b3e150347..320ef09efd 100644
--- a/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.ts
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.ts
@@ -7,7 +7,6 @@ import { NgForm } from '@angular/forms';
import { Hero } from '../shared/hero';
@Component({
- moduleId: module.id,
selector: 'hero-form-template2',
templateUrl: './hero-form-template2.component.html'
})
diff --git a/public/docs/_examples/cb-i18n/ts/plnkr.json b/public/docs/_examples/cb-i18n/ts/plnkr.json
index e2cbd40afe..36f2685129 100644
--- a/public/docs/_examples/cb-i18n/ts/plnkr.json
+++ b/public/docs/_examples/cb-i18n/ts/plnkr.json
@@ -10,6 +10,7 @@
"!**/*.[1].*",
+ "main.ts",
"styles.css",
"systemjs-text-plugin.js",
"index.html"
diff --git a/public/docs/_examples/cb-i18n/ts/src/app/app.component.ts b/public/docs/_examples/cb-i18n/ts/src/app/app.component.ts
index 09adc99d2a..09b8722e9b 100644
--- a/public/docs/_examples/cb-i18n/ts/src/app/app.component.ts
+++ b/public/docs/_examples/cb-i18n/ts/src/app/app.component.ts
@@ -2,7 +2,6 @@
import { Component } from '@angular/core';
@Component({
- moduleId: module.id,
selector: 'my-app',
templateUrl: './app.component.html'
})
@@ -10,7 +9,7 @@ export class AppComponent {
wolves = 0;
gender = 'f';
fly = true;
- logo = 'https://angular.io/resources/images/logos/angular2/angular.png';
+ logo = 'https://angular.io/resources/images/logos/angular/angular.png';
inc(i: number) {
this.wolves = Math.min(5, Math.max(0, this.wolves + i));
}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6
index 8e65fff539..d425788f46 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6
@@ -1,7 +1,6 @@
import { Component } from '@angular/core';
@Component({
- moduleId: module.id,
selector: 'my-app',
templateUrl: './app.component.html',
styles: [
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/confirm.component.es6
index c9be28c44c..f01fa4de40 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/confirm.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/confirm.component.es6
@@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
// #docregion
@Component({
- moduleId: module.id,
selector: 'app-confirm',
templateUrl: './confirm.component.html'
})
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6
index 32988dcdda..04c14a9631 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6
@@ -3,7 +3,6 @@ import { Attribute, Component, Inject, Optional } from '@angular/core';
// #docregion
// #docregion templateUrl
@Component({
- moduleId: module.id,
selector: 'hero-title',
templateUrl: './hero-title.component.html'
})
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/app.component.es6
index 3084439b2a..6079f7f246 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/app.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/app.component.es6
@@ -8,7 +8,6 @@ export class AppComponent {
AppComponent.annotations = [
new Component({
- moduleId: module.id,
selector: 'my-app',
templateUrl: './app.component.html',
styles: [
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/confirm.component.es6
index 3e72036952..296268dda4 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/confirm.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/confirm.component.es6
@@ -16,7 +16,6 @@ export class ConfirmComponent {
ConfirmComponent.annotations = [
new Component({
- moduleId: module.id,
selector: 'app-confirm',
templateUrl: './confirm.component.html',
inputs: [
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-host.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-host.component.es6
index 092cd1a1ce..b06701ee8d 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-host.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-host.component.es6
@@ -46,5 +46,5 @@ HeroHostComponent.annotations = [
styles: ['.active {background-color: yellow;}']
})
];
-// #docregion metadata
+// #enddocregion metadata
// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6
index 1656226602..4b89dfba83 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6
@@ -16,7 +16,6 @@ export class HeroTitleComponent {
// #docregion templateUrl
HeroTitleComponent.annotations = [
new Component({
- moduleId: module.id,
selector: 'hero-title',
templateUrl: './hero-title.component.html'
})
diff --git a/public/docs/_examples/cb-ts-to-js/js/example-config.json b/public/docs/_examples/cb-ts-to-js/js/example-config.json
index e69de29bb2..81f31aaf0d 100644
--- a/public/docs/_examples/cb-ts-to-js/js/example-config.json
+++ b/public/docs/_examples/cb-ts-to-js/js/example-config.json
@@ -0,0 +1,3 @@
+{
+ "build": "build:babel"
+}
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/app.component.ts b/public/docs/_examples/cb-ts-to-js/ts/src/app/app.component.ts
index 8e7afad0df..912c9e1a80 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/src/app/app.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/app.component.ts
@@ -1,7 +1,6 @@
import { Component } from '@angular/core';
@Component({
- moduleId: module.id,
selector: 'my-app',
templateUrl: './app.component.html',
styles: [
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/confirm.component.ts b/public/docs/_examples/cb-ts-to-js/ts/src/app/confirm.component.ts
index c9be28c44c..f01fa4de40 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/src/app/confirm.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/confirm.component.ts
@@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
// #docregion
@Component({
- moduleId: module.id,
selector: 'app-confirm',
templateUrl: './confirm.component.html'
})
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.ts b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.ts
index e8e68684e2..48aaae7d44 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.ts
@@ -3,7 +3,6 @@ import { Attribute, Component, Inject, Optional } from '@angular/core';
// #docregion
// #docregion templateUrl
@Component({
- moduleId: module.id,
selector: 'hero-title',
templateUrl: './hero-title.component.html'
})
diff --git a/public/docs/_examples/cli-quickstart/ts/angular-cli.json b/public/docs/_examples/cli-quickstart/ts/.angular-cli.json
similarity index 59%
rename from public/docs/_examples/cli-quickstart/ts/angular-cli.json
rename to public/docs/_examples/cli-quickstart/ts/.angular-cli.json
index 9f23ed85fb..49a6b93bd0 100644
--- a/public/docs/_examples/cli-quickstart/ts/angular-cli.json
+++ b/public/docs/_examples/cli-quickstart/ts/.angular-cli.json
@@ -1,7 +1,7 @@
{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
- "version": "1.0.0-beta.25.5",
- "name": "my-app"
+ "name": "master-project"
},
"apps": [
{
@@ -13,28 +13,38 @@
],
"index": "index.html",
"main": "main.ts",
+ "polyfills": "polyfills.ts",
"test": "test.ts",
- "tsconfig": "tsconfig.json",
+ "tsconfig": "tsconfig.app.json",
+ "testTsconfig": "tsconfig.spec.json",
"prefix": "app",
- "mobile": false,
"styles": [
"styles.css"
],
"scripts": [],
+ "environmentSource": "environments/environment.ts",
"environments": {
- "source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
- "addons": [],
- "packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
+ "lint": [
+ {
+ "project": "src/tsconfig.app.json"
+ },
+ {
+ "project": "src/tsconfig.spec.json"
+ },
+ {
+ "project": "e2e/tsconfig.e2e.json"
+ }
+ ],
"test": {
"karma": {
"config": "./karma.conf.js"
@@ -42,18 +52,6 @@
},
"defaults": {
"styleExt": "css",
- "prefixInterfaces": false,
- "inline": {
- "style": false,
- "template": false
- },
- "spec": {
- "class": false,
- "component": true,
- "directive": true,
- "module": false,
- "pipe": true,
- "service": true
- }
+ "component": {}
}
}
diff --git a/public/docs/_examples/cli-quickstart/ts/.editorconfig b/public/docs/_examples/cli-quickstart/ts/.editorconfig
new file mode 100644
index 0000000000..6e87a003da
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/public/docs/_examples/cli-quickstart/ts/.gitignore b/public/docs/_examples/cli-quickstart/ts/.gitignore
index fd172dea98..04a48dc643 100644
--- a/public/docs/_examples/cli-quickstart/ts/.gitignore
+++ b/public/docs/_examples/cli-quickstart/ts/.gitignore
@@ -14,9 +14,10 @@
.c9/
*.launch
.settings/
+*.sublime-workspace
# IDE - VSCode
-.vscode/
+.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
@@ -40,3 +41,5 @@ testem.log
Thumbs.db
!src/styles.css
+!karma.conf.js
+!protractor.conf.js
diff --git a/public/docs/_examples/cli-quickstart/ts/README.md b/public/docs/_examples/cli-quickstart/ts/README.md
index ae9b1a3643..efe9ec67ae 100644
--- a/public/docs/_examples/cli-quickstart/ts/README.md
+++ b/public/docs/_examples/cli-quickstart/ts/README.md
@@ -1,6 +1,6 @@
-# MyApp
+# MasterProject
-This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.25.5.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.0.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
@@ -22,10 +22,6 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.
-## Deploying to GitHub Pages
-
-Run `ng github-pages:deploy` to deploy to GitHub Pages.
-
## Further help
-To get more help on the `angular-cli` use `ng help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/public/docs/_examples/cli-quickstart/ts/e2e/tsconfig.e2e.json b/public/docs/_examples/cli-quickstart/ts/e2e/tsconfig.e2e.json
new file mode 100644
index 0000000000..74c2bca131
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/e2e/tsconfig.e2e.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "sourceMap": true,
+ "declaration": false,
+ "moduleResolution": "node",
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": [
+ "es2016"
+ ],
+ "outDir": "../dist/out-tsc-e2e",
+ "module": "commonjs",
+ "target": "es6",
+ "types":[
+ "jasmine",
+ "node"
+ ]
+ }
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/karma.conf.js b/public/docs/_examples/cli-quickstart/ts/karma.conf.js
new file mode 100644
index 0000000000..84b4cd5aca
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/karma.conf.js
@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+ config.set({
+ basePath: '',
+ frameworks: ['jasmine', '@angular/cli'],
+ plugins: [
+ require('karma-jasmine'),
+ require('karma-chrome-launcher'),
+ require('karma-jasmine-html-reporter'),
+ require('karma-coverage-istanbul-reporter'),
+ require('@angular/cli/plugins/karma')
+ ],
+ client:{
+ clearContext: false // leave Jasmine Spec Runner output visible in browser
+ },
+ files: [
+ { pattern: './src/test.ts', watched: false }
+ ],
+ preprocessors: {
+ './src/test.ts': ['@angular/cli']
+ },
+ mime: {
+ 'text/x-typescript': ['ts','tsx']
+ },
+ coverageIstanbulReporter: {
+ reports: [ 'html', 'lcovonly' ],
+ fixWebpackSourcePaths: true
+ },
+ angularCli: {
+ environment: 'dev'
+ },
+ reporters: config.angularCli && config.angularCli.codeCoverage
+ ? ['progress', 'coverage-istanbul']
+ : ['progress', 'kjhtml'],
+ port: 9876,
+ colors: true,
+ logLevel: config.LOG_INFO,
+ autoWatch: true,
+ browsers: ['Chrome'],
+ singleRun: false
+ });
+};
diff --git a/public/docs/_examples/cli-quickstart/ts/protractor.conf.js b/public/docs/_examples/cli-quickstart/ts/protractor.conf.js
new file mode 100644
index 0000000000..2cbc329391
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/protractor.conf.js
@@ -0,0 +1,31 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+/*global jasmine */
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+ allScriptsTimeout: 11000,
+ specs: [
+ './e2e/**/*.e2e-spec.ts'
+ ],
+ capabilities: {
+ 'browserName': 'chrome'
+ },
+ directConnect: true,
+ baseUrl: 'http://localhost:4200/',
+ framework: 'jasmine',
+ jasmineNodeOpts: {
+ showColors: true,
+ defaultTimeoutInterval: 30000,
+ print: function() {}
+ },
+ beforeLaunch: function() {
+ require('ts-node').register({
+ project: 'e2e/tsconfig.e2e.json'
+ });
+ },
+ onPrepare() {
+ jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+ }
+};
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/app.component.spec.ts b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.spec.ts
index 72ee705d0b..c740bcd745 100644
--- a/public/docs/_examples/cli-quickstart/ts/src/app/app.component.spec.ts
+++ b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.spec.ts
@@ -1,18 +1,15 @@
-/* tslint:disable:no-unused-variable */
-
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
- beforeEach(() => {
+ beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
- });
- TestBed.compileComponents();
- });
+ }).compileComponents();
+ }));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/app.module.ts b/public/docs/_examples/cli-quickstart/ts/src/app/app.module.ts
index 33ec868232..67ae49119b 100644
--- a/public/docs/_examples/cli-quickstart/ts/src/app/app.module.ts
+++ b/public/docs/_examples/cli-quickstart/ts/src/app/app.module.ts
@@ -1,7 +1,7 @@
import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
diff --git a/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts b/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts
index 00313f1664..b7f639aeca 100644
--- a/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts
+++ b/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts
@@ -1,7 +1,7 @@
// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
-// The list of which env maps to which file can be found in `angular-cli.json`.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
export const environment = {
production: false
diff --git a/public/docs/_examples/cli-quickstart/ts/src/main.ts b/public/docs/_examples/cli-quickstart/ts/src/main.ts
index ac78a713c2..a9ca1caf8c 100644
--- a/public/docs/_examples/cli-quickstart/ts/src/main.ts
+++ b/public/docs/_examples/cli-quickstart/ts/src/main.ts
@@ -1,9 +1,8 @@
-import './polyfills.ts';
-
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
-import { environment } from './environments/environment';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
diff --git a/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts b/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts
index 4749399c2d..53bdaf1b86 100644
--- a/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts
+++ b/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts
@@ -1,19 +1,68 @@
-// This file includes polyfills needed by Angular and is loaded before
-// the app. You can add your own extra polyfills to this file.
-import 'core-js/es6/symbol';
-import 'core-js/es6/object';
-import 'core-js/es6/function';
-import 'core-js/es6/parse-int';
-import 'core-js/es6/parse-float';
-import 'core-js/es6/number';
-import 'core-js/es6/math';
-import 'core-js/es6/string';
-import 'core-js/es6/date';
-import 'core-js/es6/array';
-import 'core-js/es6/regexp';
-import 'core-js/es6/map';
-import 'core-js/es6/set';
-import 'core-js/es6/reflect';
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ * file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js'; // Run `npm install --save classlist.js`.
+/** IE10 and IE11 requires the following to support `@angular/animation`. */
+// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
+
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
+
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl'; // Run `npm install --save intl`.
diff --git a/public/docs/_examples/cli-quickstart/ts/src/test.ts b/public/docs/_examples/cli-quickstart/ts/src/test.ts
index f9d51efd05..9bf72267e9 100644
--- a/public/docs/_examples/cli-quickstart/ts/src/test.ts
+++ b/public/docs/_examples/cli-quickstart/ts/src/test.ts
@@ -1,4 +1,4 @@
-import './polyfills.ts';
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
diff --git a/public/docs/_examples/cli-quickstart/ts/src/tsconfig.app.json b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.app.json
new file mode 100644
index 0000000000..9f12c4b849
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.app.json
@@ -0,0 +1,22 @@
+{
+ "compilerOptions": {
+ "sourceMap": true,
+ "declaration": false,
+ "moduleResolution": "node",
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": [
+ "es2016",
+ "dom"
+ ],
+ "outDir": "../out-tsc/app",
+ "target": "es5",
+ "module": "es2015",
+ "baseUrl": "",
+ "types": []
+ },
+ "exclude": [
+ "test.ts",
+ "**/*.spec.ts"
+ ]
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/src/tsconfig.spec.json b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.spec.json
new file mode 100644
index 0000000000..6c5160e12e
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.spec.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "sourceMap": true,
+ "declaration": false,
+ "moduleResolution": "node",
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": [
+ "es2016"
+ ],
+ "outDir": "../out-tsc/spec",
+ "module": "commonjs",
+ "target": "es6",
+ "baseUrl": "",
+ "types": [
+ "jasmine",
+ "node"
+ ]
+ },
+ "files": [
+ "test.ts"
+ ],
+ "include": [
+ "**/*.spec.ts"
+ ]
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/tsconfig.json b/public/docs/_examples/cli-quickstart/ts/tsconfig.json
new file mode 100644
index 0000000000..cde5e35054
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/tsconfig.json
@@ -0,0 +1,14 @@
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "outDir": "./dist/out-tsc",
+ "sourceMap": true,
+ "declaration": false,
+ "moduleResolution": "node",
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": [
+ "es2016"
+ ]
+ }
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/zipper.json b/public/docs/_examples/cli-quickstart/ts/zipper.json
new file mode 100644
index 0000000000..70bf41659e
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/zipper.json
@@ -0,0 +1,11 @@
+{
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!**/*.[0-9].*",
+ ".angular-cli.json",
+ "protractor.conf.js"
+ ],
+ "removeSystemJsConfig": true,
+ "type": "cli"
+}
diff --git a/public/docs/_examples/component-styles/e2e-spec.ts b/public/docs/_examples/component-styles/e2e-spec.ts
index 28a44221a4..32bd30832c 100644
--- a/public/docs/_examples/component-styles/e2e-spec.ts
+++ b/public/docs/_examples/component-styles/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node
+'use strict'; // necessary for es6 output in node
import { browser, element, by } from 'protractor';
@@ -65,9 +65,4 @@ describe('Component Style Tests', function () {
expect(externalLi.getCssValue('listStyleType')).not.toEqual('square');
});
- it('supports relative loading with moduleId', function() {
- let host = element(by.css('quest-summary'));
- expect(host.getCssValue('color')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
- });
-
});
diff --git a/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.ts b/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.ts
index c43239e368..2a2dc65fe0 100644
--- a/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.ts
+++ b/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.ts
@@ -4,7 +4,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
// #docregion
@Component({
- moduleId: module.id,
selector: 'quest-summary',
// #docregion urls
templateUrl: './quest-summary.component.html',
diff --git a/public/docs/_examples/dependency-injection/e2e-spec.ts b/public/docs/_examples/dependency-injection/e2e-spec.ts
index 28fe22a9cb..5b46dd77d9 100644
--- a/public/docs/_examples/dependency-injection/e2e-spec.ts
+++ b/public/docs/_examples/dependency-injection/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node
+'use strict'; // necessary for es6 output in node
import { browser, element, by, ElementFinder } from 'protractor';
@@ -163,7 +163,7 @@ describe('Dependency Injection Tests', function () {
describe('after button click', function() {
- beforeAll(function (done) {
+ beforeAll(function (done: any) {
let buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0);
buttonEle.click().then(done, done);
});
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/app.component.ts b/public/docs/_examples/dependency-injection/ts/src/app/app.component.ts
index dd83963a4b..3563fdc070 100644
--- a/public/docs/_examples/dependency-injection/ts/src/app/app.component.ts
+++ b/public/docs/_examples/dependency-injection/ts/src/app/app.component.ts
@@ -3,7 +3,7 @@
// #docregion imports
import { Component, Inject } from '@angular/core';
-import { APP_CONFIG, AppConfig } from './app.config';
+import { APP_CONFIG, AppConfig } from './app.config';
import { Logger } from './logger.service';
import { UserService } from './user.service';
// #enddocregion imports
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/app.config.ts b/public/docs/_examples/dependency-injection/ts/src/app/app.config.ts
index 7626c46e5b..f224e6e1ab 100644
--- a/public/docs/_examples/dependency-injection/ts/src/app/app.config.ts
+++ b/public/docs/_examples/dependency-injection/ts/src/app/app.config.ts
@@ -1,7 +1,7 @@
// #docregion token
-import { OpaqueToken } from '@angular/core';
+import { InjectionToken } from '@angular/core';
-export let APP_CONFIG = new OpaqueToken('app.config');
+export let APP_CONFIG = new InjectionToken('app.config');
// #enddocregion token
// #docregion config
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/injector.component.ts b/public/docs/_examples/dependency-injection/ts/src/app/injector.component.ts
index 7c9e8a56e5..1b1a065e4c 100644
--- a/public/docs/_examples/dependency-injection/ts/src/app/injector.component.ts
+++ b/public/docs/_examples/dependency-injection/ts/src/app/injector.component.ts
@@ -1,6 +1,6 @@
// #docplaster
// #docregion
-import { Component, Injector } from '@angular/core';
+import { Component, Injector, OnInit } from '@angular/core';
import { Car, Engine, Tires } from './car/car';
import { Hero } from './heroes/hero';
@@ -19,16 +19,22 @@ import { Logger } from './logger.service';
`,
providers: [Car, Engine, Tires, heroServiceProvider, Logger]
})
-export class InjectorComponent {
- car: Car = this.injector.get(Car);
+export class InjectorComponent implements OnInit {
+ car: Car;
// #docregion get-hero-service
- heroService: HeroService = this.injector.get(HeroService);
+ heroService: HeroService;
// #enddocregion get-hero-service
- hero: Hero = this.heroService.getHeroes()[0];
+ hero: Hero;
constructor(private injector: Injector) { }
+ ngOnInit() {
+ this.car = this.injector.get(Car);
+ this.heroService = this.injector.get(HeroService);
+ this.hero = this.heroService.getHeroes()[0];
+ }
+
get rodent() {
let rousDontExist = `R.O.U.S.'s? I don't think they exist!`;
return this.injector.get(ROUS, rousDontExist);
diff --git a/public/docs/_examples/deployment/ts/src/index.html b/public/docs/_examples/deployment/ts/src/index.html
index ba6ba3dea6..770e64bc4d 100644
--- a/public/docs/_examples/deployment/ts/src/index.html
+++ b/public/docs/_examples/deployment/ts/src/index.html
@@ -16,7 +16,7 @@
-
+
diff --git a/public/docs/_examples/forms/js/example-config.json b/public/docs/_examples/forms/js/example-config.json
index e69de29bb2..81f31aaf0d 100644
--- a/public/docs/_examples/forms/js/example-config.json
+++ b/public/docs/_examples/forms/js/example-config.json
@@ -0,0 +1,3 @@
+{
+ "build": "build:babel"
+}
diff --git a/public/docs/_examples/forms/js/src/app/hero-form.component.html b/public/docs/_examples/forms/js/src/app/hero-form.component.html
index fbe6ee917f..279ded0866 100644
--- a/public/docs/_examples/forms/js/src/app/hero-form.component.html
+++ b/public/docs/_examples/forms/js/src/app/hero-form.component.html
@@ -81,6 +81,7 @@ You submitted the following:
+
+
+
+ |
+ Load Time |
+ Time Allocation |
+
+
+ | JIT |
+ 1.01s |
+  |
+
+
+ | AOT |
+ 0.29s |
+  |
+
+
+ | Universal |
+ 0.04s |
+  |
+
+
+
+You can see that the AOT-compiled version loaded faster than the JIT version (288ms versus 1000ms), and that most of the difference was in JavaScript execution. The universal version was the fastest (40ms), with no JavaScript to execute.
+
+The difference may not seem significant, since all are sufficiently fast. But how would the app perform on a slower device with a slower network connection? [CPU Throttling](https://developers.google.com/web/updates/2016/09/devtools-digest#cpu_throttling_for_a_mobile-first_world) and [Network Throttling](https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#throttling) can help you find out.
+
+The test was repeated using a simulated 5x slower CPU and simulated 3G network (750kb/s).
+
+
+
+ |
+ Load Time |
+ Time Allocation |
+
+
+ | JIT |
+ 37.3s |
+  |
+
+
+ | AOT |
+ 5.5s |
+  |
+
+
+ | Universal |
+ 0.4s |
+  |
+
+
+
+In this mobile scenario, the JIT app spends almost 30 seconds just waiting for its many files to load, followed by 6.5 seconds executing JavaScript. The AOT-compiled app is much better, spending just 4 seconds to load the bundle and 1.3 seconds to execute it, but still much more than the 3-second limit.
+
+The Universal app displays the Dashboard page in just 0.4 seconds, since it displays without waiting for the JavaScript to load. The app would not be fully functional until its JavaScript bundles have loaded, which would be comparable to the load time for the AOT app, but the user can view the first page immediately.
+
+> If you want your app to be usable on slow networks, AOT is a must. Universal should be considered if first impressions are important.
+
+## The Example
+
+This guide uses the _Tour of Heroes_ app as an example. The app files remain the same, but additional support files are created to support building and serving the AOT and Universal versions.
+
+The AOT and Universal versions of the app are both compiled by the AOT compiler. The difference is that AOT version gets compiled into a bundle that is sent to the client, while the Universal version is compiled into a web server that serves pages that are rendered from the app.
+
+To build and run the AOT version, you need to create:
+
+ * an `index-aot.html` file
+ * a main entry point, `main-aot.ts`
+ * a TypeScript config file, `tsconfig-aot.json`
+ * a Webpack config file, `webpack.config.aot.js`
+ * a lite-server config file, `bs-config.aot.js`
+
+ To build and run the Universal version, you need to create:
+
+ * a server-side app module, `app.server.ts`
+ * a Universal app renderer, `universal-engine.ts`
+ * an express web server to handle requests, `server-aot.ts`
+ * a TypeScript config file, `tsconfig-uni.json`
+ * a Webpack config file, `webpack.config.uni.js`
+
+The folder structure will look like this:
+
+```shell
+src/ index.html index file for JIT version
+ index-aot.html index file for AOT version *
+ main.ts bootstrapper for JIT version
+ main-aot.ts bootstrapper for AOT version *
+ style.css styles for JIT version
+ systemjs.config.js SystemJS configuration for JIT version
+ systemjs-angular-loader.js component loader that allows relative paths
+ tsconfig.json TypeScript configuration for JIT version
+ app/ app.module.ts application code
+ ... ...
+ uni/ app.server.ts server-side application module *
+ server-aot.ts express web server *
+ universal-engine.ts server-side app renderer *
+ dist/ build.js AOT-compiled application bundle *
+ server.js AOT-compiled server bundle *
+bs-config.json config file for lite server, JIT version
+bs-config.aot.js config file for lite server, AOT version *
+package.json npm configuration
+tsconfig-aot.json TypeScript configuration for AOT version *
+tsconfig-uni.json TypeScript configuration for Universal version *
+webpack.config.aot.js Webpack configuration for AOT version *
+webpack.config.uni.js Webpack configuration for Universal version *
+```
+The files marked with * are new and not in the original Tour of Heroes demo. This guide covers the new files in the sections below.
+
+# Preparation
+
+## Installing the tools
+
+To get started, you need to install the necessary modules for AOT and Webpack.
+
+ * `@angular/compiler-cli` - The ngc compiler that compiles Angular applications
+ * `@angular/platform-server` - Server-side components needed for compilation
+ * `webpack` - The Webpack JavaScript bundler
+ * `@ngtools/webpack` - The Webpack loader and plugin for bundling compiled applications
+ * `raw-loader` - The Webpack loader for text files
+ * `express` - The web server for serving the Universal application
+
+You can install them with the following commands:
+
+```
+npm install @angular/compiler-cli @angular/platform-server --save-dev
+npm install webpack @ngtools/webpack raw-loader express --save-dev
+```
+
+## Component-relative URLs
+
+The AOT compiler requires that `@Component` URLs for external templates and css files be *component-relative*.
+That means that the value of @Component.templateUrl is a URL value relative to the component class file.
+For example, an `'./app.component.html'` URL means that the template file is a sibling of its companion app.component.ts file.
+(The leading `./` is needed by Webpack to recognize that the string represents a path and not a module name.)
+
+SystemJS allows both absolute and relative URLs (via [systemjs-angular-loader]()), so you could have both in your app. Before building your app with AOT and Universal, you will need to convert them.
+
+From this:
+
+```ts
+ @Component({
+ selector: 'my-component',
+ templateUrl: 'app/demo/components/my.component.html'
+ })
+```
+To this:
+
+```ts
+ @Component({
+ selector: 'my-component',
+ templateUrl: './my.component.html'
+ })
+```
+
+## Server Transition
+
+When a client-side Angular app bootstraps into a Universal page, it replaces the HTML that was there with its own rendered components. This transition is enabled by a shared id between the client and server apps. The id is defined using `BrowserModule.withServerTransition` in the AppModule that is shared by the client and server.
+
+Open file `src/app.module.ts` and find the `BrowserModule` import. Then replace this:
+
+```ts
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ ...
+```
+
+with this:
+```ts
+@NgModule({
+ imports: [
+ BrowserModule.withServerTransition({
+ appId: 'toh-universal'
+ }),
+ FormsModule,
+ ...
+```
+
+# Configuration - AOT
+
+## Main Entry Point
+
+In the JIT-compiled app, `main.ts` is the entry point that bootstraps the app module.
+An AOT-compiled app bootstraps differently, using `platformBrowser` instead of `platformBrowserDynamic` and using the *factory* that is created by pre-compiling the app module. A separate main entry point is needed.
+
+In the `src` directory, create a `main-aot.ts` like the one shown here:
+
+```ts
+import { platformBrowser } from '@angular/platform-browser';
+import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
+```
+
+There's a chicken-and-egg problem here.
+The `AppModuleNgFactory` won't exist until the app is compiled, but the `main-aot.ts` won't compile because `AppModuleNgFactory` doesn't exist yet.
+
+One way around this problem is to compile `app.module.ts` before `main-aot.ts`. You can tell the compiler to do that using the `files` array in the `tsconfig-aot.json`, which you will create in the next section.
+
+```json
+"files": [
+ "src/app/app.module.ts",
+ "src/main-aot.ts"
+],
+```
+
+Since `app.module.ts` appears first in the array, it will be compiled into an `ngfactory` first. So `AppModuleNgFactory` will be available for `main-aot.ts`.
+
+## Creating the tsconfig-aot.json
+
+The AOT compiler transpiles TypeScript into JavaScript (like `tsc`), and compiles your app's components, services, etc. into executable JavaScript code.
+You configure it using a JSON file similar to `tsconfig.json`. There are a few differences:
+
+ * The `module` setting must be `es2015`.
+ This creates JavaScript output with `import` statements (instead of `require()`) that can be compiled and bundled.
+ * The `files` setting includes the app module and the main AOT bootstrapper. See more about this in the section below.
+ * There is a new `angularCompilerOptions` section with the following settings:
+
+ * `genDir` - the output directory that will contain the compiled `ngfactory` code. When compiling via Webpack, this is used as a temporary directory.
+ * `entryModule` - the root module of the app, expressed as **path/to/file#ClassName**.
+ * `skipMetadataEmit` - set to `true` because you don't need metadata in the bundled application
+
+Create a `tsconfig-aot.json` file in the project rood directory by copying your `tsconfig.json` and applying the changes described above. It should look like this:
+
+```json
+{
+ "compilerOptions": {
+ "target": "es5",
+ "module": "es2015",
+ "moduleResolution": "node",
+ "sourceMap": true,
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": ["es2015", "dom"],
+ "noImplicitAny": true,
+ "suppressImplicitAnyIndexErrors": true,
+ "typeRoots": [ "node_modules/@types/" ]
+ },
+
+ "files": [
+ "src/app/app.module.ts",
+ "src/main-aot.ts"
+ ],
+
+ "angularCompilerOptions": {
+ "genDir": "aot",
+ "entryModule": "./src/app/app.module#AppModule",
+ "skipMetadataEmit" : true
+ }
+}
+```
+
+## Webpack Configuration
+
+The [Webpack Introduction](webpack.html) explains how to configure Webpack to bundle your Angular application.
+Using Webpack for AOT is similar, but uses different [loaders](webpack.html#loaders) and [plugins](webpack.html#plugins).
+
+Create a `webpack.config.aot.js` file in the project root directory, and add the content shown below. The salient parts are explained in the following sections.
+
+```ts
+const ngtools = require('@ngtools/webpack');
+const webpack = require('webpack');
+
+module.exports = {
+ devtool: 'source-map',
+ entry: {
+ main: './src/main-aot.ts'
+ },
+ resolve: {
+ extensions: ['.ts', '.js']
+ },
+ target: 'node',
+ output: {
+ path: 'src/dist',
+ filename: 'build.js'
+ },
+ plugins: [
+ new ngtools.AotPlugin({
+ tsConfigPath: './tsconfig-aot.json'
+ }),
+ new webpack.optimize.UglifyJsPlugin({ sourceMap: true })
+ ],
+ module: {
+ rules: [
+ { test: /\.css$/, loader: 'raw-loader' },
+ { test: /\.html$/, loader: 'raw-loader' },
+ { test: /\.ts$/, loader: '@ngtools/webpack' }
+ ]
+ }
+}
+```
+
+### Loader
+For AOT, the **loader** to use for TypeScript files is `@ngtools/webpack`.
+This loads TypeScript files and interprets the Angular decorators to prepare for AOT compilation.
+Since it is used for TypeScript files, configure the loader for `*.ts`:
+
+```ts
+module: {
+ rules: [
+ ...
+ { test: /\.ts$/, loader: '@ngtools/webpack' } // use ngtools loader for typescript
+ ]
+}
+```
+
+When CSS and HTML files are encountered while processing the TypeScript, the [raw-loader](https://webpack.js.org/loaders/raw-loader/) is used.
+It simply loads the file as a string, allowing Webpack to include it in the bundle.
+
+For more complex loading scenarios, see the [Webpack Introduction](https://angular.io/docs/ts/latest/guide/webpack.html#loaders).
+
+### Plugin
+
+The AOT **plugin** is called `ngtools.AotPlugin`, and performs TypeScript compilation and Angular compilation
+using the same underlying compiler as `ngc`.
+The plugin accepts [several options](https://www.npmjs.com/package/@ngtools/webpack#options), but the only required option is `tsConfigPath`.
+
+> Despite the [ngtools documentation](https://www.npmjs.com/package/@ngtools/webpack#options), the `entryModule` option must be in the `tsconfig-aot.json`, not inside the Webpack config.
+
+```ts
+plugins: [
+ new ngtools.AotPlugin({
+ tsConfigPath: './tsconfig-aot.json'
+ }),
+ new webpack.optimize.UglifyJsPlugin({ sourceMap: true })
+],
+```
+
+The `tsConfigPath` tells the plugin where to find the TypeScript configuration file to use when compiling.
+This should be the AOT-specific `tsconfig-aot.json` described above.
+
+The `UglifyJsPlugin` minifies the JavaScript output by removing spaces and shortening names. It slows down the build, so you can leave it off during development.
+
+### Input
+
+Webpack's inputs are the source files for your application.
+You just need to give it the [entry point(s)](webpack.html#entries-outputs), and
+Webpack follows the dependency graph to find what files it needs to bundle.
+
+When performing AOT, the entry point is the `main-aot.ts` file described above.
+Starting there, Webpack will pull in your app code and imported dependencies.
+It will pull in the Angular libraries used by the app, but it will *not* pull in the Angular compiler, since it's not needed in an AOT-compiled app.
+
+```ts
+entry: {
+ main: './src/main-aot.ts'
+},
+```
+
+The [Webpack Introduction](webpack.html#entries-outputs) describes how to create separate bundles for
+app code, vendor libraries, and polyfills. For simplicity, this example shows a single-bundle scenario.
+
+### Output
+
+After the plugin compiles the app files, Webpack bundles them into one or more output bundles.
+These are the JavaScript files that will be loaded by the browser to run the app. Tell Webpack where to put the bundles:
+
+```ts
+output: {
+ path: 'src/dist',
+ filename: 'build.js'
+},
+```
+
+We put them in a `dist` directory under `src`, so the server can find them.
+
+# Build - AOT
+
+Now that you've created the TypeScript and Webpack config files, you can build the application. First add the build command to the `scripts` section of your `package.json`.
+
+```json
+"scripts": {
+ "build:aot": "webpack --config webpack.config.aot.js"
+ ...
+}
+```
+
+Then, from the command prompt, type
+
+```shell
+npm run build:aot
+```
+
+to build the output bundle.
+
+As configured above, this transpiles the TypeScript files, Angular-compiles the components, and
+Webpacks the results into a single output file, `src/dist/build.js`.
+It also generates a [source map](https://webpack.js.org/configuration/devtool/), `src/dist/build.js.map` that
+relates the bundle code to the source code.
+
+## Source Maps
+
+Source maps let you use the browser's [dev tools](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) to set breakpoints in your source code, even though the browser is actually running an AOT-compiled bundle.
+
+Examining the source map is a useful exercise because it shows the names of the files that are included in the bundle,
+in the order that Webpack included them.
+
+Look at the `src/dist/build.js.map`:
+
+```js
+{"version":3,"sources":[
+"webpack:///webpack/bootstrap 097108a2a4bbafeb64bb",
+"webpack:///./~/rxjs/Observable.js",
+"webpack:///./~/rxjs/Subscriber.js",
+"webpack:///./~/@angular/core/@angular/core.es5.js",
+"webpack:///./~/@angular/common/@angular/common.es5.js",
+"webpack:///./~/@angular/router/@angular/router.es5.js",
+"webpack:///./~/rxjs/util/root.js",
+"webpack:///./~/@angular/http/@angular/http.es5.js",
+"webpack:///./src/app/hero.service.ts",
+...
+```
+
+This shows that Webpack has included `rxjs` and `@angular` libraries ahead of the app's own `hero.service.ts`.
+
+If you create [multiple bundles](webpack.html#multiple-bundles),
+look at the source maps to make sure the same file isn't included in more than one bundle.
+
+# Serve - AOT
+
+Now you've built the app bundle, so its time to test out the app.
+
+## Lite Server Configuration
+
+The [lite-server](https://github.com/johnpapa/lite-server) is used in the [Quickstart](../quickstart.html) and
+Tour of Heroes examples to run and test the application in development.
+To use it for the AOT app-compiled app, create a new configuration file, `bs-config.aot.js`.
+It's different from the JIT version because it uses the `index-aot.html` as its default file.
+It also uses a new port number so you can run the versions side-by-side. Here's the file:
+
+```ts
+module.exports = {
+ port: 3100,
+ server: {
+ baseDir: "src",
+ routes: {
+ "/node_modules": "node_modules"
+ },
+ middleware: {
+ // overrides the fallback middleware to use index-aot
+ 1: require('connect-history-api-fallback')({ index: '/index-aot.html' })
+ }
+ }
+};
+```
+> Note that the above must be a JavaScript file, not JSON, because of the call to `require`.
+
+## Serve Command
+
+Add the serve command to the `scripts` section of your `package.json`. The command launches lite-server using the configuration file created above.
+
+```json
+"scripts": {
+ "serve:aot": "lite-server -c=bs-config.aot.js",
+ ...
+}
+```
+
+Then, from the command prompt, type
+
+```shell
+npm run serve:aot
+```
+
+The server starts with BrowserSync, so it starts the browser and loads the page showing the Tour of Heroes app. You can use the app and test that it behaves the same as the JIT version.
+
+Now you've built a working app using Webpack and AOT.
+
+# Configuration - Universal
+
+Now you can use a similar approach to build the Universal app.
+
+## Server Code
+
+The code specific to Universal is in three files:
+
+ 1. The app server module
+ 2. The Universal engine
+ 3. The web server
+
+We'll go through these one at a time.
+
+### App Server Module
+
+The app server module is an Angular module that imports both the client-side app module and Angular's ServerModule. It tells Angular how to bootstrap the application when running on the server.
+
+Create an `app.server.ts` file in the `src/uni` directory and add the following code:
+
+```ts
+import { NgModule } from '@angular/core';
+import { APP_BASE_HREF } from '@angular/common';
+import { ServerModule } from '@angular/platform-server';
+import { AppComponent } from '../app/app.component';
+import { AppModule } from '../app/app.module';
+
+@NgModule({
+ imports: [
+ ServerModule,
+ AppModule
+ ],
+ bootstrap: [
+ AppComponent
+ ],
+ providers: [
+ {provide: APP_BASE_HREF, useValue: '/'}
+ ]
+})
+export class AppServerModule {
+}
+```
+
+### Universal Engine
+
+The Universal Engine is the heart of a Universal application. It is the code that takes an HTML template and a route url, and renders the HTML for the page. The HTML output is the result of rendering the components that are displayed for the given route.
+
+The rendered output could be stored as static HTML files to be served later. The demo code below serves the rendered pages directly, but it caches the output in memory, so that a given route only needs to be rendered once.
+
+Create the `universal-engine.ts` file in the `src/uni` directory, and add the following code:
+
+```ts
+import * as fs from 'fs';
+import { renderModuleFactory } from '@angular/platform-server';
+
+const templateCache = {}; // cache for page templates
+const outputCache = {}; // cache for rendered pages
+
+export function ngUniversalEngine(setupOptions: any) {
+
+ return function (filePath: string, options: { req: Request }, callback: (err: Error, html: string) => void) {
+ let url: string = options.req.url;
+ let html: string = outputCache[url];
+ if (html) {
+ // return already-built page for this url
+ console.log('from cache: ' + url);
+ callback(null, html);
+ return;
+ }
+
+ console.log('building: ' + url);
+ if (!templateCache[filePath]) {
+ let file = fs.readFileSync(filePath);
+ templateCache[filePath] = file.toString();
+ }
+
+ // render the page via angular platform-server
+ let appModuleFactory = setupOptions.bootstrap[0];
+ renderModuleFactory(appModuleFactory, {
+ document: templateCache[filePath],
+ url: url
+ }).then(str => {
+ outputCache[url] = str;
+ callback(null, str);
+ });
+ };
+}
+
+```
+
+### Web Server
+
+The web server accepts HTTP requests and sends back the response. For requests that are routes within the app, it creates the response by calling the Universal engine to render a page. For static file requests, it returns the file contents.
+
+This web server is based on the popular [Express](https://expressjs.com/) web framework. Other web serving techniques would work for Universal, as long as they can send the appropriate requests to the universal engine.
+
+Create the `server-aot.ts` file in the `src/uni` directory, and add the following code:
+
+```ts
+import 'zone.js/dist/zone-node';
+import { enableProdMode } from '@angular/core';
+import { AppServerModuleNgFactory } from '../../aot/src/uni/app.server.ngfactory';
+import * as express from 'express';
+import { ngUniversalEngine } from './universal-engine';
+
+enableProdMode();
+
+const server = express();
+
+// set our angular engine as the handler for html files, so it will be used to render them.
+server.engine('html', ngUniversalEngine({
+ bootstrap: [AppServerModuleNgFactory]
+}));
+
+// set default view directory
+server.set('views', 'src');
+
+// handle requests for routes in the app. ngExpressEngine does the rendering.
+server.get(['/', '/dashboard', '/heroes', '/detail/:id'], (req, res) => {
+ res.render('index-aot.html', {req});
+});
+
+// handle requests for static files
+server.get(['/*.js', '/*.css'], (req, res, next) => {
+ let fileName: string = req.originalUrl;
+ console.log(fileName);
+ let root = fileName.startsWith('/node_modules/') ? '.' : 'src';
+ res.sendFile(fileName, { root: root }, function (err) {
+ if (err) {
+ next(err);
+ }
+ });
+});
+
+// start the server
+server.listen(3200, () => {
+ console.log('listening on port 3200...');
+});
+
+```
+
+Note that the server depends on `AppServerModuleNgFactory`, which has not been built yet. We have a compilation problem similar to that faced in `main-aot.ts`. We solve it the same way, in `tsconfig-uni.json`.
+
+## Creating the tsconfig-uni.json
+
+The TypeScript configuration file for Universal is almost the same as for AOT. The difference is the `files` section. For Universal, the `files` section lists the files for the server-side app module and the web server.
+
+Create a `tsconfig-uni.json` file in the project root directory by copying your `tsconfig-aot.json` and changing the `files` section as shown below.
+
+```json
+ "files": [
+ "src/uni/app.server.ts",
+ "src/uni/server-aot.ts"
+ ],
+ ```
+
+The `app.server.ts` file appears first, so it can be compiled before the `server-aot.ts` file requires it for its compilation.
+
+## Creating the webpack.config.uni.js
+
+The Webpack configuration file for Universal is almost the same as for AOT. There are two differences:
+
+1. The entry points
+2. The output file name
+
+> You can share code between webpack configurations. See the [Webpack Introduction](webpack.html#!#configure-webpack) for more information.
+
+Create a `webpack.config.uni.js` in the project root directory by copying the `webpack.config.aot.js`. Then make the changes described in the sections below.
+
+### The entry points
+
+For Universal, we name two entry points: the app server module and the web server. This ensures that the code for both appears in the final bundle.
+
+```ts
+ entry: {
+ main: ['./src/uni/app.server.ts', './src/uni/server-aot.ts']
+ },
+```
+
+### The output file
+
+The output contains the all the code necessary to run the web server and serve the app. Put it in `src/dist` alongside the client AOT bundle.
+
+```ts
+ output: {
+ path: 'src/dist',
+ filename: 'server.js'
+ },
+```
+
+# Build and Serve - Universal
+
+Now you can build and run the Universal application. First add the build and serve commands to the `scripts` section of your `package.json`.
+
+```json
+"scripts": {
+ "build:uni": "webpack --config webpack.config.uni.js",
+ "serve:uni": "node src/dist/server.js",
+ ...
+}
+```
+
+Then, from the command prompt, type
+
+```shell
+npm run build:uni
+```
+
+to build the server bundle. Once it is created, type
+
+```shell
+npm run serve:uni
+```
+
+to start the server. The console window should say
+
+```shell
+listening on port 3200...
+```
+
+## Exercising Universal
+
+Open a browser to http://localhost:3200/ and you should be greeted by the familiar Tour of Heroes dashboard page. Meanwhile, the console window shows:
+
+```shell
+building: /
+/styles.css
+/node_modules/core-js/client/shim.min.js
+/node_modules/zone.js/dist/zone.min.js
+/dist/build.js
+```
+
+The first line shows that the server received a request for '/' and passed it to the Universal engine, which then built the HTML page from your Angular application. If you reload the page for the same URL, the console will report 'from cache' instead of 'building', and the server will return HTML that was previously rendered for that URL.
+
+The remaining lines in the console show static files that were requested and returned by the server. The three .js files are needed for running the AOT version of the app. When the .js files are loaded into the browser, the Universal-rendered page is replaced by the Angular client app.
+
+### Disabling the Client App
+
+To see how the Universal app behaves on its own, go to the `src/dist` directory and temporarily rename the `build.js` file to `build.tmp.js`. Then reload the browser, and the Universal app will display without loading the Angular code.
+
+Now you can see the limitations of the Universal app. Navigation using `routerLink` works correctly: you can go from the Dashboard to the Heroes page and back, and you can click on a hero on the Dashboard page to display the Details page. But you cannot go to the Details from the Heroes page, because that uses a click event rather than a router link. The Hero Search on the Dashboard page does not work, nor does saving changes.
+
+### Throttling
+
+Now rename `build.tmp.js` back to `build.js` so the app can load again. Then open the Chrome Dev Tools and go to the Network tab, and find the [Network Throttling](https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#throttling) dropdown. Try 3G and other network speeds to see how long it takes for the app to load under various conditions.
+
+# Conclusion
+
+Angular Universal can greatly improve the perceived startup performance of your app. The slower the network, the more advantageous it becomes to have Universal display the first page to the user.
diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade
index 650bb1d44d..8be24d6098 100644
--- a/public/docs/ts/latest/guide/upgrade.jade
+++ b/public/docs/ts/latest/guide/upgrade.jade
@@ -27,11 +27,14 @@ include ../_util-fns
make incremental upgrading seamless.
1. [Preparation](#preparation)
+
1. [Follow the Angular Style Guide](#follow-the-angular-style-guide)
2. [Using a Module Loader](#using-a-module-loader)
3. [Migrating to TypeScript](#migrating-to-typescript)
4. [Using Component Directives](#using-component-directives)
+
2. [Upgrading with The Upgrade Module](#upgrading-with-the-upgrade-module)
+
1. [How The Upgrade Module Works](#how-the-upgrade-module-works)
2. [Bootstrapping hybrid](#bootstrapping-hybrid-applications)
3. [Using Angular Components from AngularJS Code](#using-angular-components-from-angularjs-code)
@@ -42,7 +45,9 @@ include ../_util-fns
8. [Making Angular Dependencies Injectable to AngularJS](#making-angular-dependencies-injectable-to-angularjs)
9. [Using Ahead-of-time compilation with hybrid apps](#using-ahead-of-time-compilation-with-hybrid-apps)
10. [Dividing routes between Angular and AngularJS](#dividing-routes-between-angular-and-angularjs)
+
3. [PhoneCat Upgrade Tutorial](#phonecat-upgrade-tutorial)
+
1. [Switching to TypeScript](#switching-to-typescript)
2. [Installing Angular](#installing-angular)
3. [Bootstrapping a hybrid PhoneCat](#bootstrapping-a-hybrid-phonecat)
@@ -51,6 +56,7 @@ include ../_util-fns
6. [AoT compile the hybrid app](#aot-compile-the-hybrid-app)
7. [Adding The Angular Router And Bootstrap](#adding-the-angular-router-and-bootstrap)
8. [Say Goodbye to AngularJS](#say-goodbye-to-angularjs)
+
3. [Appendix: Upgrading PhoneCat Tests](#appendix-upgrading-phonecat-tests)
.l-main-section
@@ -79,6 +85,7 @@ include ../_util-fns
aligned with Angular*.
There are a few rules in particular that will make it much easier to do
+
*an incremental upgrade* using the Angular `upgrade` module:
* The [Rule of 1](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility)
@@ -270,11 +277,12 @@ table
interoperability. The `UpgradeModule` resolves the differences and makes
everything work seamlessly:
- * We can make AngularJS services available for injection to Angular code
+ * You can make AngularJS services available for injection to Angular code
by *upgrading* them. The same singleton instance of each service is shared
between the frameworks. In Angular these services will always be in the
*root injector* and available to all components.
- * We can also make Angular services available for injection to AngularJS code
+
+ * You can also make Angular services available for injection to AngularJS code
by *downgrading* them. Only services from the Angular root injector can
be downgraded. Again, the same singleton instances are shared between the frameworks.
When we register a downgrade, we explicitly specify a *string token* that we want to
@@ -300,6 +308,7 @@ figure.image-display
frameworks. The other framework ignores it. If an element is
owned by AngularJS, Angular treats it as if it didn't exist,
and vice versa.
+
2. The root of the application *is always an AngularJS template*.
So a hybrid application begins life as an AngularJS application,
@@ -316,6 +325,7 @@ figure.image-display
1. By using a component from the other framework: An AngularJS template
using an Angular component, or an Angular template using an
AngularJS component.
+
2. By transcluding or projecting content from the other framework. The
`UpgradeModule` bridges the related concepts of AngularJS transclusion
and Angular content projection together.
@@ -504,7 +514,7 @@ figure
All Angular components, directives and pipes must be declared in an NgModule.
:marked
- The net resulit is an AngularJS directive called `heroDetail`, that we can
+ The net result is an AngularJS directive called `heroDetail`, that we can
use like any other directive in our AngularJS templates.
+makeExample('upgrade-module/ts/src/index-downgrade-static.html', 'usecomponent')
@@ -1391,7 +1401,7 @@ code-example(format="").
This is similar to the phone list component.
The new wrinkle is the `RouteParams` type annotation that identifies the `routeParams` dependency.
- The AngularJS injector has an AngularJS router dependency called `$routeParams`.
+ The AngularJS injector has an AngularJS router dependency called `$routeParams`,
which was injected into `PhoneDetails` when it was still an AngularJS controller.
We intend to inject it into the new `PhoneDetailsComponent`.
diff --git a/public/docs/ts/latest/guide/webpack.jade b/public/docs/ts/latest/guide/webpack.jade
index 365583e98a..87d3c961bc 100644
--- a/public/docs/ts/latest/guide/webpack.jade
+++ b/public/docs/ts/latest/guide/webpack.jade
@@ -7,94 +7,125 @@ style.
:marked
[**Webpack**](https://webpack.github.io/) is a popular module bundler,
- a tool for bundling application source code in convenient _chunks_
+ a tool for bundling application source code in convenient _chunks_
and for loading that code from a server into a browser.
-
+
It's an excellent alternative to the *SystemJS* approach used elsewhere in the documentation.
This guide offers a taste of Webpack and explains how to use it with Angular applications.
-
-
- ## Table of contents
-
- [What is Webpack?](#what-is-webpack)
-
+
+a#top
+:marked
+ # Contents
+
+ * [What is Webpack?](#what-is-webpack)
+
* [Entries and outputs](#entries-outputs)
+ * [Multiple bundles](#multiple-bundles)
* [Loaders](#loaders)
* [Plugins](#plugins)
-
- [Configuring Webpack](#configure-webpack)
-
+
+ * [Configuring Webpack](#configure-webpack)
+
+ * [Polyfills](#polyfills)
* [Common configuration](#common-configuration)
+ * [Inside `webpack.common.js`](#inside-webpack-commonjs)
+
+ * [entry](#common-entries)
+ * [resolve extension-less imports](#common-resolves)
+ * [`module.rules`](#common-rules)
+ * [Plugins](#plugins)
+ * [`CommonsChunkPlugin`](#commons-chunk-plugin)
+ * [`HtmlWebpackPlugin`](#html-webpack-plugin)
+
+ * [Environment specific configuration](#environment-configuration)
* [Development configuration](#development-configuration)
* [Production configuration](#production-configuration)
* [Test configuration](#test-configuration)
- [Trying it out](#try)
-
- [Conclusions](#conclusions)
-
+ * [Trying it out](#try)
+ * [Highlights](#highlights)
+ * [Conclusion](#conclusion)
+
+ You can also download the final result.
+
.l-main-section
:marked
## What is Webpack?
-
- Webpack is a powerful module bundler.
- A _bundle_ is a JavaScript file that incorporate _assets_ that *belong* together and
+
+ Webpack is a powerful module bundler.
+ A _bundle_ is a JavaScript file that incorporates _assets_ that *belong* together and
should be served to the client in a response to a single file request.
A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file.
- Webpack roams over your application source code,
- looking for `import` statements, building a dependency graph, and emitting one (or more) _bundles_.
- With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.
+ Webpack roams over your application source code,
+ looking for `import` statements, building a dependency graph, and emitting one or more _bundles_.
+ With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.
You determine what Webpack does and how it does it with a JavaScript configuration file, `webpack.config.js`.
-
+
a(id="entries-outputs")
.l-main-section
:marked
### Entries and outputs
-
- You supply Webpack with one or more *entry* files and let it find and incorporate the dependencies that radiate from those entries.
- The one entry point file in this example is the application's root file, `src/app.ts`:
-
-+makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'one-entry', 'webpack.config.js (single entry)')(format=".")
-
+
+ You supply Webpack with one or more *entry* files and let it find and incorporate the dependencies that radiate from those entries.
+ The one entry point file in this example is the application's root file, `src/main.ts`:
+
++makeExample('webpack/ts/config/webpack.common.js', 'one-entry', 'webpack.config.js (single entry)')(format=".")
+
:marked
Webpack inspects that file and traverses its `import` dependencies recursively.
-
-+makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'app-example', 'src/app.ts')(format=".")
+
++makeExample('webpack/ts/src/app/app.component.ts', 'component', 'src/main.ts')(format=".")
:marked
- It sees that you're importing *@angular/core* so it adds that to its dependency list for (potential) inclusion in the bundle.
- It opens the *@angular/core* file and follows _its_ network of `import` statements until it has built the complete dependency graph from `app.ts` down.
-
+ It sees that you're importing `@angular/core` so it adds that to its dependency list for potential inclusion in the bundle.
+ It opens the `@angular/core` file and follows _its_ network of `import` statements until it has built the complete dependency graph from `main.ts` down.
+
Then it **outputs** these files to the `app.js` _bundle file_ designated in configuration:
-
-+makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'one-output', 'webpack.config.js (single output)')(format=".")
+.code-example
+ code-example(name="webpack.config.js (single output)" language="javascript").
+ output: {
+ filename: 'app.js'
+ }
+
+:marked
+ This `app.js` output bundle is a single JavaScript file that contains the application source and its dependencies.
+ You'll load it later with a `
-
-
-
-
-
-
-
-
-
-
- Loading...
-
-
-