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/heroes/hero.service.provider.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.provider.ts
index 13008f0109..6de4ebee90 100644
--- a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.provider.ts
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.provider.ts
@@ -12,7 +12,7 @@ let heroServiceFactory = (logger: Logger, userService: UserService) => {
// #docregion provider
export let heroServiceProvider =
- { provide: HeroService,
+ { provide: HeroService,
useFactory: heroServiceFactory,
deps: [Logger, UserService]
};
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 @@
+
+
+
+ |
+ 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 5a2fbf0bd0..ee47a88c38 100644
--- a/public/docs/ts/latest/guide/upgrade.jade
+++ b/public/docs/ts/latest/guide/upgrade.jade
@@ -66,18 +66,16 @@ include ../_util-fns
[升级模块是如何工作的](#how-the-upgrade-module-works)
- 2. [Bootstrapping hybrid applications](#bootstrapping-hybrid-applications)
+ 2. [Bootstrapping hybrid](#bootstrapping-hybrid-applications)
[引导混合(hybrid)应用](#bootstrapping-hybrid-applications)
-
3. [Using Angular Components from AngularJS Code](#using-angular-components-from-angularjs-code)
[从AngularJS的代码中使用Angular的组件](#using-angular-components-from-angularjs-code)
- 4. [Using AngularJS Component Directives from Angular Code](#using-angularjs-component-directives-from-angular-components-from-angularjs-code)
+ 4. [Using AngularJS Component Directives from Angular Code](#using-angularjs-component-directives-from-angular-code)
[从Angular的代码中使用AngularJS的组件](#using-angularjs-component-directives-from-angular-components-from-angularjs-code)
-
5. [Projecting AngularJS Content into Angular Components](#projecting-angularjs-content-into-angular-components)
[把AngularJS的内容投影(project)进Angular组件中](#projecting-angularjs-content-into-angular-components)
@@ -94,6 +92,14 @@ include ../_util-fns
[让Angular提供的依赖可以被注入到AngularJS](#making-angular-dependencies-injectable-to-angularjs)
+ 9. [Using Ahead-of-time compilation with hybrid apps](#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)
+
+ [在Angular和AngularJS之间进行路由](#dividing-routes-between-angular-and-angularjs)
+
3. [PhoneCat Upgrade Tutorial](#phonecat-upgrade-tutorial)
[PhoneCat准备工作教程](#phonecat-preparation-tutorial)
@@ -118,13 +124,17 @@ include ../_util-fns
[升级组件](#upgrading-components)
- 6. [Switching To The Angular Router And Bootstrap](#switching-to-the-angular-router-and-bootstrap)
+ 6. [AoT compile the hybrid app](#aot-compile-the-hybrid-app)
+
+ [对混合式应用进行AoT预编译](#aot-compile-the-hybrid-app)
+
+ 7. [Adding The Angular Router And Bootstrap](#adding-the-angular-router-and-bootstrap)
- [切换到Angular的路由器并引导](#switching-to-the-angular-router-and-bootstrap)
+ [添加Angular路由器并引导](#adding-the-angular-router-and-bootstrap)
- 7. [Saying Goodbye to AngularJS](#saying-goodbye-to-angularjs)
+ 8. [Say Goodbye to AngularJS](#say-goodbye-to-angularjs)
- [和AngularJS说再见](#saying-goodbye-to-angularjs)
+ [和AngularJS说再见](#say-goodbye-to-angularjs)
3. [Appendix: Upgrading PhoneCat Tests](#appendix-upgrading-phonecat-tests)
@@ -146,6 +156,7 @@ include ../_util-fns
有些做起来会比其它的更容易些。即使在我们开始升级之前，也有一些关键的技术和模式可以让我们将来升级时更轻松。
### Follow the Angular Style Guide
+
### 遵循Angular风格指南
The [AngularJS Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility)
@@ -169,6 +180,7 @@ include ../_util-fns
说这些的意思是：*遵循这个风格指南可以让你写出更接近Angular程序的AngularJS程序*。
There are a few rules in particular that will make it much easier to do
+
*an incremental upgrade* using the Angular `upgrade` module:
特别是某些规则会让使用Angular的`upgrade`模块进行*增量升级*变得更简单：
@@ -201,6 +213,7 @@ include ../_util-fns
它还是一个通用的规则，可以让你的程序更“坚实”。
### Using a Module Loader
+
### 使用模块加载器
When we break application code down into one component per file, we often end
@@ -238,6 +251,7 @@ include ../_util-fns
:marked
### Migrating to TypeScript
+
### 迁移到TypeScript
If part of our Angular upgrade plan is to also take TypeScript into use, it makes
@@ -285,6 +299,7 @@ include ../_util-fns
服务和控制器可以转成*类*。这样我们就能一步步接近Angular的服务和组件类了，这样等到我们开始升级时，也会更简单。
#### Using Component Directives
+
### 使用组件型指令
In Angular, components are the main primitive from which user interfaces
@@ -370,7 +385,7 @@ include ../_util-fns
+makeExample('upgrade-module/ts/src/app/hero-detail.directive.ts')
:marked
- AngularJS.5 introduces the [component API](https://docs.angularjs.org/api/ng/type/angular.Module)
+ AngularJS 1.5 introduces the [component API](https://docs.angularjs.org/api/ng/type/angular.Module)
that makes it easier to define directives like these. It is a good idea to use
this API for component directives for several reasons:
@@ -398,7 +413,7 @@ include ../_util-fns
:marked
Controller lifecycle hook methods `$onInit()`, `$onDestroy()`, and `$onChanges()`
- are another convenient feature that AngularJS.5 introduces. They all have nearly
+ are another convenient feature that AngularJS 1.5 introduces. They all have nearly
exact [equivalents in Angular](lifecycle-hooks.html), so organizing component lifecycle
logic around them will ease the eventual Angular upgrade process.
@@ -423,6 +438,7 @@ include ../_util-fns
这意味着我们不用必须一次性做完所有升级工作，因为在整个演进过程中，这两个框架可以很自然的和睦相处。
### How The Upgrade Module Works
+
### 升级模块如何工作
The primary tool provided by the upgrade module is called the `UpgradeModule`.
@@ -449,6 +465,7 @@ include ../_util-fns
这发生在三个主要的领域：依赖注入、DOM和变更检测。
#### Dependency Injection
+
#### 依赖注入
Dependency injection is front and center in both AngularJS and
@@ -495,17 +512,17 @@ table
就算有这么多不同点，也并不妨碍我们在依赖注入时进行互操作。`UpgradeModule`解决了这些差异，并让它们无缝的对接：
- * 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. They will always have
- *string tokens* - the same tokens that they have in AngularJS.
+ *root injector* and available to all components.
+
通过升级它们，我们就能让那些在AngularJS中能被注入的服务在Angular的代码中可用。
在框架之间共享的是服务的同一个单例对象。在Angular中，这些外来服务总是被放在*根注入器*中，并可用于所有组件。
它们总是具有*字符串令牌* —— 跟它们在AngularJS中的令牌相同。
- * 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
@@ -520,6 +537,7 @@ figure.image-display
:marked
#### Components and the DOM
+
#### 组件与DOM
What we'll find in the DOM of a hybrid application are components and
@@ -606,6 +624,7 @@ code-example(language="html" escape="html").
:marked
#### Change Detection
+
#### 变更检测
Change detection in AngularJS is all about `scope.$apply()`. After every
@@ -721,7 +740,7 @@ figure.image-display
The first step to upgrading an application using the `UpgradeModule` is
always to bootstrap it as a hybrid that supports both AngularJS and
- Angular.
+ Angular, but still is an AngularJS app at top level.
使用`UpgradeModule`升级应用的第一步总是把它引导成一个同时支持AngularJS和Angular的混合式应用。
@@ -765,6 +784,7 @@ figure.image-display
接下来，创建一个`app.module.ts`文件，并添加下列`NgModule`类：
+makeExample('upgrade-module/ts/src/app/ajs-a-hybrid-bootstrap/app.module.ts', 'ngmodule')
+
:marked
This bare minimum `NgModule` imports `BrowserModule`, the module every Angular browser-based app must have.
@@ -788,6 +808,12 @@ figure.image-display
+makeExample('upgrade-module/ts/src/app/ajs-a-hybrid-bootstrap/app.module.ts', 'bootstrap')
+:marked
+ We also need to install the `@angular/upgrade` package via `npm install @angular/upgrade --save`
+ and add a mapping for the `@angular/upgrade/static` package:
+
++makeExample('upgrade-module/ts/src/systemjs.config.1.js', 'upgrade-static-umd', 'systemjs.config.js (map)')
+
:marked
Congratulations! You're running a hybrid application! The
existing AngularJS code works as before _and_ you're ready to run Angular code.
@@ -796,9 +822,12 @@ figure.image-display
:marked
### Using Angular Components from AngularJS Code
+
### 在AngularJS的代码中使用Angular的组件
+
figure
img(src="/resources/images/devguide/upgrade/ajs-to-a.png" alt="Using an Angular component from AngularJS code" align="left" style="width:250px; margin-left:-40px;margin-right:10px" )
+
:marked
Once we're running a hybrid app, we can start the gradual process of upgrading
code. One of the more common patterns for doing that is to use an Angular component
@@ -837,6 +866,7 @@ figure
将它加入到Angular模块的`entryComponents`列表中。
+makeExample('upgrade-module/ts/src/app/downgrade-static/app.module.ts', 'ngmodule')
+
.l-sub-section
:marked
All Angular components, directives and pipes must be declared in an NgModule.
@@ -844,7 +874,7 @@ figure
所有Angular组件、指令和管道都必须声明在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.
这里我们得到的是一个叫做`heroDetail`的AngularJS指令，我们可以像用其它指令一样把它用在AngularJS模板中。
@@ -900,12 +930,15 @@ figure
为降级过的组件使用Angular的属性(Attribute)语法规则时有一个值得注意的例外。
它适用于由多个单词组成的输入或输出属性。在Angular中，我们要使用小驼峰命名法绑定这些属性：
+
code-example(format="").
[myHero]="hero"
+
:marked
But when using them from AngularJS templates, we need to use kebab-case:
但是从AngularJS的模板中使用它们时，我们得使用中线命名法：
+
code-example(format="").
[my-hero]="hero"
@@ -927,9 +960,12 @@ figure
:marked
### Using AngularJS Component Directives from Angular Code
+
### 从Angular代码中使用AngularJS组件型指令
+
figure
img(src="/resources/images/devguide/upgrade/a-to-ajs.png" alt="Using an AngularJS component from Angular code" align="left" style="width:250px; margin-left:-40px;margin-right:10px" )
+
:marked
So, we can write an Angular component and then use it from AngularJS
code. This is very useful when we start our migration from lower-level
@@ -949,7 +985,7 @@ figure
[described in the preparation guide above](#using-component-directives).
Our safest bet for ensuring compatibility is using the
[component API](https://docs.angularjs.org/api/ng/type/angular.Module)
- introduced in AngularJS.5.
+ introduced in AngularJS 1.5.
不是所有种类的AngularJS指令都能升级。该指令必须是一个严格的*组件型指令*，具有[上面的准备指南中描述的](#using-component-directives)那些特征。
确保兼容性的最安全的方式是AngularJS.5中引入的[组件API](https://docs.angularjs.org/api/ng/type/angular.Module)。
@@ -1166,16 +1202,25 @@ figure
+makeExample('upgrade-module/ts/src/app/ajs-to-a-providers/heroes.service.ts', null, 'heroes.service.ts')
:marked
- We can upgrade the service using a Angular [Factory provider](../guide/dependency-injection.html#factory-providers)
- that requests the service from the AngularJS `$injector`. The name of the Angular dependency is up to you:
+ We can upgrade the service using a Angular [Factory provider](./dependency-injection.html#factory-providers)
+ that requests the service from the AngularJS `$injector`.
我们可以Angular的[工厂提供商（factory provider）](../guide/dependency-injection.html#factory-providers)升级该服务，
它从AngularJS的`$injector`请求服务。Angular依赖的名称由你确定：
+ We recommend declaring the Factory Provider in a separate `ajs-upgraded-providers.ts` file
+ so that they are all together, making it easier to reference them, create new ones and
+ delete them once the upgrade is over.
+
+ It's also recommended to export the `heroesServiceFactory` function so that Ahead-of-Time
+ compilation can pick it up.
+
++makeExample('upgrade-module/ts/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts', null, 'ajs-upgraded-providers.ts')
+
+makeExample('upgrade-module/ts/src/app/ajs-to-a-providers/app.module.ts', 'register', 'app.module.ts')
:marked
- We can then inject it in Angular using a string token:
+ We can then inject it in Angular using it's class as a type annotation:
然后我们可以一个字符串型令牌，把它注入到Angular中：
@@ -1236,6 +1281,75 @@ figure
+makeExample('upgrade-module/ts/src/app/a-to-ajs-providers/hero-detail.component.ts', null, 'hero-detail.component.ts')
+:marked
+ ## Using Ahead-of-time compilation with hybrid apps
+
+ We can take advantage of Ahead-of-time (AoT) compilation on hybrid apps just like on any other
+ Angular application.
+ The setup for an hybrid app is mostly the same as described in
+ [the Ahead-of-time Compilation chapter](../cookbook/aot-compiler.html)
+ save for differences in `index.html` and `main-aot.ts`
+
+ Our `index.html` will likely have script tags loading AngularJS files, so the `index.html` we
+ use for AoT must also load those files.
+ An easy way to copy them is by adding each to the `copy-dist-files.js` file.
+
+ We also need to use `UpgradeModule` to bootstrap a hybrid app after bootstrapping the
+ Module Factory:
+
++makeExample('upgrade-phonecat-2-hybrid/ts/app/main-aot.ts', null, 'app/main-aot.ts')
+
+:marked
+ And that's all we need to get the full benefit of AoT for Angular apps!
+
+.alert.is-helpful
+ :marked
+ The AoT metadata collector will not detect lifecycle hook methods on a parent class' prototype,
+ so in order for upgraded components to work we needs to implement the lifecycle hooks
+ on the upgraded component class and forward them to the `UpgradeComponent` parent.
+
+:marked
+ ## Dividing routes between Angular and AngularJS
+
+ Another important part of upgrading is upgrading routes.
+ We could upgrade our whole app while still using the AngularJS router and then
+ migrate all the routes in one fell swoop.
+ But it would be much better to migrate routes one by one as they become upgraded.
+
+ The first step to have a dual router setup is to add an Angular root component containing
+ one outlet for each router.
+ AngularJS will use `ng-view`, and Angular will use `router-outlet`.
+ When one is using it's router, the other outlet will be empty.
+
++makeExample('upgrade-module/ts/src/app/divide-routes/app.component.ts', null, 'app.component.ts')
+
+:marked
+ We want to use this component in the body of our `index.html` instead of an AngularJS component:
+
++makeExample('upgrade-module/ts/src/index-divide-routes.html', 'body', 'app.component.ts (body)')
+
+:marked
+ Next we declare both AngularJS and Angular routes as normal:
+
++makeExample('upgrade-module/ts/src/app/divide-routes/app.module.ts', 'ajs-route', 'app.module.ts (AngularJS route)')
++makeExample('upgrade-module/ts/src/app/divide-routes/hero.module.ts', 'a-route', 'hero.module.ts (Angular route)')
+
+:marked
+ In our `app.module.ts` we need to add `AppComponent` to the declarations and boostrap array.
+
+ Next we configure the router itself.
+ We want to use [hash navigation](./router.html#-hashlocationstrategy-) in Angular
+ because that's what we're also using in AngularJS.
+
+ Lastly, and most importantly, we want to use a custom `UrlHandlingStrategy` that will tell
+ the Angular router which routes it should render - and only those.
+
++makeExample('upgrade-module/ts/src/app/divide-routes/app.module.ts', 'router-config', 'app.module.ts (router config)')
+
+:marked
+ That's it! Now we're running both routers at the same time.
+
+
.l-main-section
:marked
## PhoneCat Upgrade Tutorial
@@ -1320,7 +1434,7 @@ figure
.file scenarios.js
:marked
- This is actually a pretty good starting point. The code uses the AngularJS.5
+ This is actually a pretty good starting point. The code uses the AngularJS 1.5
component API and the organization follows the
[AngularJS Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md),
which is an important [preparation step](#following-the-angular-style-guide) before
@@ -1489,9 +1603,9 @@ code-example(format="").
.l-sub-section
:marked
- The [AngularJS.x type definitions](https://www.npmjs.com/package/@types/angular)
+ The [AngularJS 1.x type definitions](https://www.npmjs.com/package/@types/angular)
we installed are not officially maintained by the Angular team,
- but are quite comprehensive. It is possible to make an AngularJS.x application
+ but are quite comprehensive. It is possible to make an AngularJS 1.x application
fully type-annotated with the help of these definitions.
我们用typings工具安装的这个[AngularJS.x类型定义文件](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/angularjs)
@@ -1655,8 +1769,12 @@ code-example(format="").
:marked
We also need to make a couple of adjustments
to the `systemjs.config.js` file installed during [setup](setup.html).
- We want to point the browser to the project
- root when loading things through SystemJS, instead of using the `` URL:
+
+ We want to point the browser to the project root when loading things through SystemJS,
+ instead of using the `` URL.
+
+ We also need to install the `upgrade` package via `npm install @angular/upgrade --save`
+ and add a mapping for the `@angular/upgrade/static` package.
在我们从[搭建本地开发环境](setup.html)中拿来的`systemjs.config.js`文件中，我们还需要做一些调整，以适应我们的项目结构。
在使用SystemJS而不是`` URL加载时，我们需要把浏览器指向项目的根目录。
@@ -1726,7 +1844,7 @@ code-example(format="").
:marked
The arguments used here are the root element of the application (which is
- the same element we had `ng-app` on earlier), and the AngularJS.x modules
+ the same element we had `ng-app` on earlier), and the AngularJS 1.x modules
that we want to load. Since we're bootstrapping the app through
an `UpgradeModule`, we're actually now running the app as a **hybrid app**.
@@ -1776,6 +1894,7 @@ code-example(format="").
:marked
### Upgrading the Phone service
+
### 升级`Phone`服务
The first piece we'll port over to Angular is the `Phone` service, which
@@ -1820,7 +1939,7 @@ code-example(format="").
:marked
The `@Injectable` decorator will attach some dependency injection metadata
to the class, letting Angular know about its dependencies. As described
- by our [Dependency Injection Guide](../guide/dependency-injection.html),
+ by our [Dependency Injection Guide](./dependency-injection.html),
this is a marker decorator we need to use for classes that have no other
Angular decorators but still need to have their dependencies injected.
@@ -1972,7 +2091,9 @@ code-example(format="").
:marked
#### No Angular _filter_ or _orderBy_ filters
+
#### Angular中没有`filter`或`orderBy`过滤器
+
The built-in AngularJS `filter` and `orderBy` filters do not exist in Angular,
so we need to do the filtering and sorting ourselves.
@@ -2026,12 +2147,12 @@ code-example(format="").
:marked
This is similar to the phone list component.
- The new wrinkle is the `@Inject` decorator that identifies the `$routeParams` dependency.
+ The new wrinkle is the `RouteParams` type annotation that identifies the `routeParams` dependency.
这和电话列表组件很相似。
这里的窍门在于`@Inject`装饰器，它标记出了`$routeParams`依赖。
- 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`.
@@ -2042,13 +2163,15 @@ code-example(format="").
Unfortunately, AngularJS dependencies are not automatically available to Angular components.
We must use a [Factory provider](#making-angularjs-dependencies-injectable-to-angular)
to make `$routeParams` an Angular provider.
- Do that in `app.module.ts`:
+ Do that in a new file called `ajs-upgraded-providers.ts` and import it in `app.module.ts`:
不幸的是，AngularJS的依赖不会自动在Angular的组件中可用。
我们必须使用[工厂提供商（factory provider）](#making-angularjs-dependencies-injectable-to-angular)
来把`$routeParams`包装成Angular的服务提供商。
在`app.module.ts`中这样写：
++makeExample('upgrade-phonecat-2-hybrid/ts/app/ajs-upgraded-providers.ts', null, 'app/ajs-upgraded-providers.ts')
+
+makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'routeparams', 'app/app.module.ts ($routeParams)')(format='.')
:marked
@@ -2147,38 +2270,56 @@ code-example(format="").
+makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'checkmarkpipe', 'app.module.ts')
:marked
- ### Switching To The Angular Router And Bootstrap
+ ## AoT compile the hybrid app
+
+ To use AoT with our hybrid app we have to first set it up like any other Angular application,
+ as shown in [the Ahead-of-time Compilation chapter](../cookbook/aot-compiler.html).
+
+ Then we have to change `main-aot.ts` bootstrap also bootstrap the AngularJS app
+ via `UpgradeModule`:
+
++makeExample('upgrade-phonecat-2-hybrid/ts/app/main-aot.ts', null, 'app/main-aot.ts')
+
+:marked
+ We need to load all the AngularJS files we already use in `index.html` in `aot/index.html`
+ as well:
+
++makeExample('upgrade-phonecat-2-hybrid/ts/aot/index.html', null, 'aot/index.html')
+
+:marked
+ These files need to be copied together with the polyfills. Files our application
+ needs at runtime, like the `.json` phone lists and images, also need to be copied.
+
+ Install `fs-extra` via `npm install fs-extra --save-dev` for better file copying, and change
+ `copy-dist-files.js` to the following:
+
++makeExample('upgrade-phonecat-2-hybrid/ts/copy-dist-files.js', null, 'copy-dist-files.js')
+
+:marked
+ And that's all you need to use AoT while upgrading your app!
+
+:marked
+ ### Adding The Angular Router And Bootstrap
+
### 切换到Angular路由器和引导程序
At this point we've replaced all AngularJS application components with
- their Angular counterparts.
+ their Angular counterparts, even though we're still serving them from the AngularJS router.
- 此刻，我们已经把所有AngularJS程序中的部件替换成了Angular中的等价物。
- The application is still bootstrapped as a hybrid app.
- There's no need for that anymore.
+ Most AngularJS apps have more than a couple of routes though, and it's very helpful to migrate
+ one route at a time.
- 该应用仍然使用混合式应用的方式进行引导，但其实已经不需要了。
+ Let's start by migrating the initial `/` and `/phones` routes to Angular,
+ while keeping `/phones/:phoneId` in the AngularJS router.
- It's time to remove the last remnants of AngularJS in two final steps:
+ #### Add the Angular router
- 在最后两步中，我们彻底移除AngularJS的残余势力：
-
- 1. Switch to the Angular router.
-
- 切换到Angular路由器。
-
- 1. Bootstrap as a pure Angular app.
-
- 作为纯Angular应用进行引导。
-
- #### Switch to the Angular router
- #### 切换到Angular路由器
Angular has an [all-new router](router.html).
Angular有一个[全新的路由器](router.html)。
Like all routers, it needs a place in the UI to display routed views.
- The Angular that's the `` and it belongs in a *root component*
+ For Angular that's the `` and it belongs in a *root component*
at the top of the applications component tree.
像所有的路由器一样，它需要在UI中指定一个位置来显示路由的视图。
@@ -2190,10 +2331,11 @@ code-example(format="").
我们还没有这样一个根组件，因为该应用仍然是像一个AngularJS应用那样被管理的。
创建新的`app.component.ts`文件，放入像这样的`AppComponent`类：
-+makeExample('upgrade-phonecat-3-final/ts/app/app.component.ts', null, 'app/app.component.ts')(format='.')
++makeExample('upgrade-phonecat-3-router/ts/app/app.component.ts', null, 'app/app.component.ts')(format='.')
:marked
- It has a simple template that only includes the ``.
+ It has a simple template that only includes the `` for Angular routes
+ and `ng-view` for AngularJS routes.
This component just renders the contents of the active route and nothing else.
它有一个很简单的模板，只包含``。
@@ -2210,7 +2352,7 @@ code-example(format="").
把这个``元素插入到`index.html`中。
用它来代替AngularJS中的`ng-view`指令：
-+makeExample('upgrade-phonecat-3-final/ts/index.html', 'appcomponent', 'index.html (body)')(format='.')
++makeExample('upgrade-phonecat-3-router/ts/index.html', 'appcomponent', 'index.html (body)')(format='.')
:marked
#### Create the _Routing Module_
@@ -2221,54 +2363,68 @@ code-example(format="").
The details of Angular router configuration are best left to the [Routing documentation](router.html)
which recommends that you create a `NgModule` dedicated to router configuration
- (called a _Routing Module_):
+ (called a _Routing Module_).
Angular路由器配置的详情最好去查阅下[路由与导航](router.html)文档。
它建议你创建一个专们用于路由器配置的`NgModule`（名叫*路由模块*）。
-+makeExample('upgrade-phonecat-3-final/ts/app/app-routing.module.ts', null, 'app/app-routing.module.ts')
++makeExample('upgrade-phonecat-3-router/ts/app/app-routing.module.ts', null, 'app/app-routing.module.ts')
:marked
- This module defines a `routes` object with two routes to the two phone components
+ This module defines a `routes` object with one route to the phone list component
and a default route for the empty path.
It passes the `routes` to the `RouterModule.forRoot` method which does the rest.
该模块定义了一个`routes`对象，它带有两个路由，分别指向两个电话组件，以及为空路径指定的默认路由。
它把`routes`传给`RouterModule.forRoot`方法，该方法会完成剩下的事。
- A couple of extra providers enable routing with "hash" URLs such as `#!/phones` instead of the default "push state" strategy.
+ A couple of extra providers enable routing with "hash" URLs such as `#!/phones`
+ instead of the default "push state" strategy.
+
+ There's a twist to our Routing Module though: we're also adding a custom `UrlHandlingStrategy`
+ that tells the Angular router to only process the `/` and `/phones` routes.
一些额外的提供商让路由器使用“hash”策略解析URL，比如`#!/phones`，而不是默认的“Push State”策略。
Now update the `AppModule` to import this `AppRoutingModule` and also the
- declare the root `AppComponent`:
+ declare the root `AppComponent` as the bootstrap component.
+ That tells Angular that it should bootstrap the app with the _root_ `AppComponent` and
+ insert it's view into the host web page.
+
+ 现在，修改`AppModule`，让它导入这个`AppRoutingModule`，并同时声明根组件`AppComponent`。
+ 这会告诉Angular，它应该使用根组件`AppComponent`引导应用，并把它的视图插入到宿主页面中。
- 现在，修改`AppModule`，让它导入这个`AppRoutingModule`，并同时声明根组件`AppComponent`：
+ We can also remove the `ngDoBootstrap()` override from `app.module.ts` since we are now
+ bootstrapping from Angular.
-+makeExample('upgrade-phonecat-3-final/ts/app/app.module.ts', null, 'app/app.module.ts')
+ And since `PhoneListComponent` isn't being rendered from a `` tag anymore,
+ but rather routed to, we can do away with it's Angular selector as well.
+
++makeExample('upgrade-phonecat-3-router/ts/app/app.module.ts', null, 'app/app.module.ts')
:marked
- The Angular router passes route parameters differently.
- Correct the `PhoneDetail` component constructor to expect an injected `ActivatedRoute` object.
- Extract the `phoneId` from the `ActivatedRoute.snapshot.params` and fetch the phone data as before:
+ Now we need to tell the AngularJS router to only process the `/phones/:phoneId` route:
Angular路由器传递路由参数的方式不同。
修改`PhoneDetail`组件的构造函数，来取得一个注入的`ActivatedRoute`对象。
从`ActivatedRoute.snapshot.params`中提取`phoneId`，并像以前那样获取电话数据：
-+makeExample('upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.ts', null, 'app/phone-detail/phone-detail.component.ts')
++makeExample('upgrade-phonecat-3-router/ts/app/app.config.ts', 'ajs-routes', 'app/app.config.ts (route config)')
+
:marked
#### Generate links for each phone
+
#### 为每个电话生成链接
We no longer have to hardcode the links to phone details in the phone list.
- We can generate them by data binding each phone's `id` to the `routerLink` directive
+ We can generate data bindings for each phone's `id` to the `routerLink` directive
and let that directive construct the appropriate URL to the `PhoneDetailComponent`:
在电话列表中，我们不用再被迫硬编码电话详情的链接了。
我们可以通过把每个电话的`id`绑定到`routerLink`指令来生成它们了，该指令的构造函数会为`PhoneDetailComponent`生成正确的URL：
-+makeExample('upgrade-phonecat-3-final/ts/app/phone-list/phone-list.template.html', 'list', 'app/phone-list/phone-list.template.html (list with links)')(format='.')
++makeExample('upgrade-phonecat-3-router/ts/app/phone-list/phone-list.template.html', 'list', 'app/phone-list/phone-list.template.html (list with links)')(format='.')
+
.l-sub-section
:marked
See the [Routing](router.html) page for details.
@@ -2276,34 +2432,30 @@ code-example(format="").
要了解详情，请查看[路由与导航](router.html)页。
:marked
- #### Bootstrap as an Angular app
+ We are now running both routers at the same time!
+ Angular is handling the initial `/` url, redirecting to `/phones`.
+ Meanwhile when we click a link to the phone detail, AngularJS takes over.
- #### 作为Angular应用进行引导
+ This way we can incrementally upgrade our app, reducing the risk of a massive one step router
+ swap.
- You may have noticed one extra `bootstrap` metadata property added to the `AppModule`
+ The next step is to migrate the `/phones/:phoneId` route.
- 你可能注意到了，有一个额外的元数据属性`bootstrap`添加进了`AppModule`中。
-
-+makeExample('upgrade-phonecat-3-final/ts/app/app.module.ts', 'bootstrap', 'app/app.module.ts (bootstrap)')(format='.')
:marked
- That tells Angular that it should bootstrap the app with the _root_ `AppComponent` and
- insert it's view into the host web page.
+ The Angular router passes route parameters differently.
+ Correct the `PhoneDetail` component constructor to expect an injected `ActivatedRoute` object.
+ Extract the `phoneId` from the `ActivatedRoute.snapshot.params` and fetch the phone data as before:
- 这是在告诉Angular，它应该使用根组件`AppComponent`来引导该应用并且把它的视图插入宿主页面中。
++makeExample('upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.ts', null, 'app/phone-detail/phone-detail.component.ts')
- Now switch the bootstrap method of the application from the `UpgradeAdapter`
- to the Angular way.
+:marked
+ Since this was the last route we want to migrate over, we can also now delete the last
+ route config from `app/app.config.ts`, and add it to the Angular router configuration.
+
+ We don't need our `UrlHandlingStrategy` anymore either, since now Angular is processing all
+ routes.
- 现在，把该应用的引导方法从`UpgradeAdapter`的切换到Angular的方式。
-
- Now we can drop `upgrade.bootstrap` from our application bootstrap, and remove the
- `ngDoBootstrap()` override from `app.module.ts`
-
- 现在我可以从应用启动部分删除`upgrade.bootstrap`，从`app.module.ts`中删除
- `ngDoBootstrap()`覆盖函数：
-
-+makeExample('upgrade-phonecat-3-final/ts/app/main.ts', null, 'main.ts')
-+makeExample('upgrade-phonecat-3-final/ts/app/app.module.ts', null, 'app.module.ts')
++makeExample('upgrade-phonecat-4-final/ts/app/app-routing.module.ts', null, 'app/app-routing.module.ts')
:marked
You are now running a pure Angular application!
@@ -2311,21 +2463,40 @@ code-example(format="").
我们现在运行的就是纯正的Angular应用了！
### Say Goodbye to AngularJS
+
### 再见，AngularJS！
It is time to take off the training wheels and let our application begin
its new life as a pure, shiny Angular app. The remaining tasks all have to
do with removing code - which of course is every programmer's favorite task!
-
+
是时候把辅助训练的轮子摘下来了！让我们的应用作为一个纯粹、闪亮的Angular程序开始它的新生命吧。
- 剩下的所有任务就是移除代码 —— 这当然是每个程序员最喜欢的任务！If you haven't already, remove all references to the `UpgradeModule` from `app.module.ts`,
- as well as any [Factory provider](#making-angularjs-dependencies-injectable-to-angular) for AngularJS services.
- Also remove any `downgradeComponent()` you find, together with the associated AngularJS
- directive declarations.
+ 剩下的所有任务就是移除代码 —— 这当然是每个程序员最喜欢的任务！
+ The application is still bootstrapped as a hybrid app.
+ There's no need for that anymore.
+
+ Switch the bootstrap method of the application from the `UpgradeAdapter`
+ to the Angular way.
+
++makeExample('upgrade-phonecat-4-final/ts/app/main.ts', null, 'main.ts')
+
+:marked
+ If you haven't already, remove all references to the `UpgradeModule` from `app.module.ts`,
+ as well as any [Factory provider](#making-angularjs-dependencies-injectable-to-angular)
+ for AngularJS services, and the `app/ajs-upgraded-providers.ts` file.
+
如果你还没有这么做，请从`app.module.ts删除所有`UpgradeModule的引用，
- 以及所有用于AngularJS服务的[工厂供应商（factory provider）](#making-angularjs-dependencies-injectable-to-angular)。
- 还有删除所有的`downgradeComponent()`以及与AngularJS相关的指令声明。
+ 以及所有用于AngularJS服务的[工厂供应商（factory provider）](#making-angularjs-dependencies-injectable-to-angular)和`app/ajs-upgraded-providers.ts`文件。
+
+ Also remove any `downgradeInjectable()` or `downgradeComponent()` you find,
+ together with the associated AngularJS factory or directive declarations.
+ Since we have no downgraded components anymore, we also don't need to have them listed
+ in `entryComponents` either.
+
+ 还要删除所有的`downgradeInjectable()`或`downgradeComponent()`以及与AngularJS相关的工厂或指令声明。因为我们不再需要降级任何组件了，也不再需要把它们列在`entryComponents`中。
+
++makeExample('upgrade-phonecat-4-final/ts/app/app.module.ts', null, 'app.module.ts')
:marked
You may also completely remove the following files. They are AngularJS
@@ -2339,13 +2510,15 @@ code-example(format="").
* `app/core/phone/phone.module.ts`
* `app/phone-detail/phone-detail.module.ts`
* `app/phone-list/phone-list.module.ts`
-
+
The external typings for AngularJS may be uninstalled as well. The only ones
we still need are for Jasmine and Angular polyfills.
+ The `@angular/upgrade` package and it's mapping in `systemjs.config.js` can also go.
AngularJS的外部类型定义文件还需要被反安装。我们现在只需要Jasmine的那些。
code-example(format="").
+ npm uninstall @angular/upgrade --save
npm uninstall @types/angular @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev
:marked
@@ -2356,7 +2529,7 @@ code-example(format="").
最后，从`index.html`和`karma.conf.js`中，移除所有到AngularJS脚本的引用，比如jQuery。
当这些全部做完时，`index.html`看起来应该是这样的：
-+makeExample('upgrade-phonecat-3-final/ts/index.html', 'full', 'index.html')
++makeExample('upgrade-phonecat-4-final/ts/index.html', 'full', 'index.html')
:marked
That is the last we'll see of AngularJS! It has served us well but now
@@ -2378,6 +2551,7 @@ code-example(format="").
要达到这个目的，E2E测试尤其有用。
### E2E Tests
+
### E2E测试
The PhoneCat project has both E2E Protractor tests and some Karma unit tests in it.
@@ -2404,6 +2578,7 @@ code-example(format="").
The following change is needed in `protractor-conf.js` to sync with hybrid apps:
需要对`protractor-conf.js`做如修改，与混合应用同步：
+
code-example(format="").
ng12Hybrid: true
@@ -2514,14 +2689,14 @@ code-example(format="").
同样，我们的测试代码中有两个Protractor API调用内部使用了`$location`。该服务没有了，
我们就得把这些调用用一个WebDriver的通用URL API代替。第一个API是“重定向(redirect)”规约：
-+makeExample('upgrade-phonecat-3-final/e2e-spec.ts', 'redirect', 'e2e-tests/scenarios.ts')
++makeExample('upgrade-phonecat-4-final/e2e-spec.ts', 'redirect', 'e2e-tests/scenarios.ts')
:marked
And the second is the phone links spec:
然后是“电话链接(phone links)”规约：
-+makeExample('upgrade-phonecat-3-final/e2e-spec.ts', 'links', 'e2e-tests/scenarios.ts')
++makeExample('upgrade-phonecat-4-final/e2e-spec.ts', 'links', 'e2e-tests/scenarios.ts')
:marked
### Unit Tests
@@ -2625,7 +2800,7 @@ code-example(format="").
最后，当我们切换到Angular路由时，我们需要重新过一遍这些组件测试。对详情组件来说，我们需要提供一个Angular
`RouteParams`的mock对象，而不再用AngularJS中的`$routeParams`。
-+makeExample('upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts', 'activatedroute', 'app/phone-detail/phone-detail.component.spec.ts')
++makeExample('upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.spec.ts', 'activatedroute', 'app/phone-detail/phone-detail.component.spec.ts')
:marked
And for the phone list component we need to set up a few things for the router itself so that
@@ -2633,4 +2808,4 @@ code-example(format="").
对于电话列表组件来说，我们需要为路由器本身略作设置，以便它的路由链接(`routerLink`)指令能够正常工作。
-+makeExample('upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts', 'routestuff', 'app/phone-list/phone-list.component.spec.ts')
++makeExample('upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.spec.ts', 'routestuff', 'app/phone-list/phone-list.component.spec.ts')
diff --git a/public/docs/ts/latest/guide/webpack.jade b/public/docs/ts/latest/guide/webpack.jade
index a5458a3e06..378ea6c5be 100644
--- a/public/docs/ts/latest/guide/webpack.jade
+++ b/public/docs/ts/latest/guide/webpack.jade
@@ -9,43 +9,76 @@ style.
[**Webpack**](https://webpack.github.io/) is a popular module bundler,
a tool for bundling application source code in convenient _chunks_
and for loading that code from a server into a browser.
-
+
[**Webpack**](https://webpack.github.io/)是一个广受欢迎的模块打包器，
这个工具用来把程序源码打包到一些方便易用的_块_中，以便把这些代码从服务器加载到浏览器中。
-
+
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.
-
+
它是我们在文档中到处使用的*SystemJS*的一个优秀替代品。这篇指南会带我们尝尝Webpack的滋味，并解释如何在Angular程序中使用它。
-
- ## Table of contents
- ## 目录
-
- [What is Webpack?](#what-is-webpack)
-
- [什么是Webpack？](#what-is-webpack)
-
+a#top
+:marked
+ # Contents
+
+ # 目录
+
+ *[What is Webpack?](#what-is-webpack)
+
+ [什么是Webpack？](#what-is-webpack)
+
* [Entries and outputs](#entries-outputs)
-
+
[入口与输出](#entries-outputs)
-
+
+ * [Multiple bundles](#multiple-bundles)
+
+ [多重编译包](#multiple-bundles)
+
* [Loaders](#loaders)
[加载器](#loaders)
* [Plugins](#plugins)
-
+
[插件](#plugins)
- [Configuring Webpack](#configure-webpack)
-
- [配置Webpack](#configure-webpack)
+ * [Configuring Webpack](#configure-webpack)
+
+ [配置Webpack](#configure-webpack)
+ * [Polyfills](#polyfills)
* [Common configuration](#common-configuration)
-
+
[公共配置](#common-configuration)
+
+ * [Inside `webpack.common.js`](#inside-webpack-commonjs)
+
+ [深入`webpack.common.js`](#inside-webpack-commonjs)
+ * [entry](#common-entries)
+
+ [入口](#common-entries)
+
+ * [resolve extension-less imports](#common-resolves)
+
+ [解析无扩展名的导入](#common-resolves)
+
+ * [`module.rules`](#common-rules)
+
+ * [Plugins](#plugins)
+
+ [插件](#plugins)
+
+ * [`CommonsChunkPlugin`](#commons-chunk-plugin)
+
+ * [`HtmlWebpackPlugin`](#html-webpack-plugin)
+
+ * [Environment specific configuration](#environment-configuration)
+
+ [针对特定环境进行配置](#environment-configuration)
+
* [Development configuration](#development-configuration)
[开发环境配置](#development-configuration)
@@ -55,26 +88,35 @@ style.
[生产环境配置](#production-configuration)
* [Test configuration](#test-configuration)
-
+
[测试环境配置](#test-configuration)
+
+ * [Trying it out](#try)
- [Trying it out](#try)
+ [试一下](#try)
- [试一下](#try)
+ * [Highlights](#highlights)
- [Conclusions](#conclusions)
+ [重点](#highlights)
- [总结](#conclusions)
+ * [Conclusion](#conclusion)
+
+ [总结](#conclusion)
+
+
+ You can also download the final result.
+
+ 你还可以点这里下载最终结果。
.l-main-section
:marked
## What is Webpack?
-
+
## 什么是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.
@@ -83,78 +125,95 @@ style.
包中可以包含JavaScript、CSS样式、HTML以及很多其它类型的文件。
Webpack roams over your application source code,
- looking for `import` statements, building a dependency graph, and emitting one (or more) _bundles_.
+ 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会遍历你应用中的所有源码，查找`import`语句，构建出依赖图谱，并产出一个(或多个)_包_。
通过插件和规则，Webpack可以对各种非JavaScript文件进行预处理和最小化(Minify)，比如TypeScript、SASS和LESS文件等。
You determine what Webpack does and how it does it with a JavaScript configuration file, `webpack.config.js`.
-
+
我们通过一个JavaScript配置文件`webpack.config.js`来决定Webpack做什么以及如何做。
-
+
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`:
-
+
+ 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`:
+
我们给Webpack提供一个或多个*入口*文件，来让它查找与合并那些从这些入口点发散出去的依赖。
在下面这个例子中，我们的入口点是该应用的根文件`src/app.ts`：
-+makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'one-entry', 'webpack.config.js (single entry)')(format=".")
-
++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.
-
+
Webpack探查那个文件，并且递归遍历它的`import`依赖。
-
-+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.
+
这里，Webpack看到我们正在导入*@angular/core*，于是就这个文件加入到它的依赖列表里，为(有可能)把该文件打进包中做准备。
它打开*@angular/core*并追踪由_该文件的_`import`语句构成的网络，直到构建出从`app.ts`往下的整个依赖图谱。
+
Then it **outputs** these files to the `app.js` _bundle file_ designated in configuration:
-
+
然后它把这些文件**输出**到当前配置所指定的_包文件_`app.js`中：
-
-+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...
-
-
-