'
-})
-// #docregion appexport, class
-export class HeroComponent {
- title = 'Hero Detail';
- getName() {return 'Windstorm'; }
-}
-// #enddocregion appexport, class
-// #enddocregion metadata
diff --git a/aio/content/examples/ts-to-js/ts/src/index.html b/aio/content/examples/ts-to-js/ts/src/index.html
deleted file mode 100644
index d9ad1f7aef..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
-
-
-
-
-
- TypeScript to JavaScript
-
-
-
-
-
-
-
-
-
-
-
-
- Loading...
-
-
-
diff --git a/aio/content/examples/ts-to-js/ts/src/main.ts b/aio/content/examples/ts-to-js/ts/src/main.ts
deleted file mode 100644
index f22933ba8e..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/main.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md
index ceb4fb49a6..0159810e84 100644
--- a/aio/content/guide/aot-compiler.md
+++ b/aio/content/guide/aot-compiler.md
@@ -609,6 +609,10 @@ Add the following _npm_ convenience script to the `package.json` so you can comp
把下列*npm*便利脚本添加到`package.json`中，以便用一条命令就可以完成编译和Rollup打包工作。
+
+ "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+
+
Open a terminal window and try it.
打开终端窗口，并试一下。
@@ -869,10 +873,15 @@ AOT编译假设上面介绍的一些支持文件都以准备好。
-Extend the `scripts` section of the `package.json` with these npm scripts:
+With the following npm script in the `scripts` section of the `package.json`, you can easily serve
+the AOT-compiled application:
使用下面的npm脚本，扩展`package.json`文件的`scripts`部分：
+
+ "serve:aot": "lite-server -c bs-config.aot.json",
+
+
Copy the AOT distribution files into the `/aot` folder with the node script:
@@ -890,7 +899,7 @@ Copy the AOT distribution files into the `/aot` folder with the node script:
-Now AOT-compile the app and launch it with the `lite-server`:
+Now AOT-compile the app and launch:
现在AOT编译应用，并使用`lite`服务器启动它：
diff --git a/aio/content/guide/change-log.md b/aio/content/guide/change-log.md
index 382b76ad52..2f7425e5d8 100644
--- a/aio/content/guide/change-log.md
+++ b/aio/content/guide/change-log.md
@@ -244,8 +244,8 @@ The documentation for the version prior to v.2.2.0 has been removed.
## 在“从TypeScript到JavaScript”增加ES6的描述 (2016-11-14)
-The updated [TypeScript to JavaScript](guide/ts-to-js) guide
-now explains how to write apps in ES6/7
+The updated TypeScript to JavaScript guide (removed August 2017, PR #18694)
+explains how to write apps in ES6/7
更新了“[从TypeScript到JavaScript](guide/ts-to-js)”烹饪宝典，解释如何使用ES6/7编写应用
diff --git a/aio/content/guide/metadata.md b/aio/content/guide/metadata.md
new file mode 100644
index 0000000000..25608db86a
--- /dev/null
+++ b/aio/content/guide/metadata.md
@@ -0,0 +1,874 @@
+# Angular Metadata and AOT
+
+The Angular **AOT compiler** turns your TypeScript source code into runnable JavaScript.
+As part of that process, the compiler extracts and interprets **metadata** about the parts of the application that Angular is supposed to manage.
+
+You write metadata in a _subset_ of TypeScript. This guide explains why a subset is necessary, describes the subset constraints, and what happens when you step outside of those constraints.
+
+## Angular metadata
+Angular metadata tells Angular how to construct instances of your application classes and interact with them at runtime.
+
+You specify the metadata with **decorators** such as `@Component()` and `@Input()`.
+You also specify metadata implicitly in the constructor declarations of these decorated classes.
+
+In the following example, the `@Component()` metadata object and the class constructor tell Angular how to create and display an instance of `TypicalComponent`.
+
+```typescript
+@Component({
+ selector: 'app-typical',
+ template: '
A typical component for {{data.name}}
'
+)}
+export class TypicalComponent {
+ @Input() data: TypicalData;
+ constructor(private someService: SomeService) { ... }
+}
+```
+
+The Angular compiler extracts the metadata _once_ and generates a _factory_ for `TypicalComponent`.
+When it needs to create a `TypicalComponent` instance, Angular calls the factory, which produces a new visual element, bound to a new instance of the component class with its injected dependency.
+
+## Compile ahead-of-time (AOT)
+
+You should use AOT to compile an application that must launch quickly.
+With AOT, there is no runtime compile step.
+The client doesn't need the compiler library at all and excluding it significantly reduces the total payload.
+The browser downloads a smaller set of safely-compiled, application module(s) and libraries that it can parse quickly and run almost immediately.
+
+The AOT compiler produces a number of files, including the application JavaScript that ultimately runs in the browser. It then statically analyzes your source code and interprets the Angular metadata without actually running the application.
+
+To compile the app, run the `ngc` stand-alone tool as part of your build process.
+When using the CLI, run the `ng build` command.
+
+For more information on AOT, see [Ahead-of-Time Compilation](guide/aot-compiler).
+
+## Metadata restrictions
+
+Angular metadata expressions must conform to the following general constraints:
+
+1. Limit [expression syntax](#expression-syntax) to the supported subset of JavaScript.
+2. Only reference exported symbols after [code folding](#folding).
+3. Only call [functions supported](#supported-functions) by the compiler.
+4. Decorated and data-bound class members must be public.
+
+The next sections elaborate on these points.
+
+## How AOT works
+
+It helps to think of the AOT compiler as having two phases: a code analysis phase in which it simply records a representation of the source; and a code generation phase in which the compiler's `StaticReflector` handles the interpretation as well as places restrictions on what it interprets.
+
+## Phase 1: analysis
+
+The TypeScript compiler does some of the analytic work of the first phase. It emits the `.d.ts` _type definition files_ with type information that the AOT compiler needs to generate application code.
+
+At the same time, the AOT **_collector_** analyzes the metadata recorded in the Angular decorators and outputs metadata information in **`.metadata.json`** files, one per `.d.ts` file.
+
+You can think of `.metadata.json` as a diagram of the overall structure of a decorator's metadata, represented as an [abstract syntax tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree).
+
+
+
+Angular's [schema.ts](https://github.com/angular/angular/blob/master/packages/tsc-wrapped/src/schema.ts)
+describes the JSON format as a collection of TypeScript interfaces.
+
+
+
+{@a expression-syntax}
+### Expression syntax
+
+The _collector_ only understands a subset of JavaScript.
+Define metadata objects with the following limited syntax:
+
+Syntax | Example
+-----------------------------------|-----------------------------------
+Literal object | `{cherry: true, apple: true, mincemeat: false}`
+Literal array | `['cherries', 'flour', 'sugar']`
+Spread in literal array | `['apples', 'flour', ...the_rest]`
+Calls | `bake(ingredients)`
+New | `new Oven()`
+Property access | `pie.slice`
+Array index | `ingredients[0]`
+Identifier reference | `Component`
+A template string | `pie is ${multiplier} times better than cake`
+Literal string | `'pi'`
+Literal number | `3.14153265`
+Literal boolean | `true`
+Literal null | `null`
+Supported prefix operator | `!cake`
+Supported Binary operator | `a + b`
+Conditional operator | `a ? b : c`
+Parentheses | `(a + b)`
+
+If an expression uses unsupported syntax, the _collector_ writes an error node to the `.metadata.json` file. The compiler later reports the error if it needs that
+piece of metadata to generate the application code.
+
+
+
+ If you want `ngc` to report syntax errors immediately rather than produce a `.metadata.json` file with errors, set the `strictMetadataEmit` option in `tsconfig`.
+
+```
+ "angularCompilerOptions": {
+ ...
+ "strictMetadataEmit" : true
+ }
+ ```
+
+Angular libraries have this option to ensure that all Angular `.metadata.json` files are clean and it is a best practice to do the same when building your own libraries.
+
+
+
+{@a function-expression}
+{@a arror-functions}
+### No arrow functions
+
+The AOT compiler does not support [function expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function)
+and [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), also called _lambda_ functions.
+
+Consider the following component decorator:
+
+```ts
+@Component({
+ ...
+ providers: [{provide: server, useFactory: () => new Server()}]
+})
+```
+
+The AOT _collector_ does not support the arrow function, `() => new Server()`, in a metadata expression.
+It generates an error node in place of the function.
+
+When the compiler later interprets this node, it reports an error that invites you to turn the arrow function into an _exported function_.
+
+You can fix the error by converting to this:
+
+```ts
+export function serverFactory() {
+ return new Server();
+}
+
+@Component({
+ ...
+ providers: [{provide: server, useFactory: serverFactory}]
+})
+```
+
+### Limited function calls
+
+The _collector_ can represent a function call or object creation with `new` as long as the syntax is valid. The _collector_ only cares about proper syntax.
+
+But beware. The compiler may later refuse to generate a call to a _particular_ function or creation of a _particular_ object.
+The compiler only supports calls to a small set of functions and will use `new` for only a few designated classes. These functions and classes are in a table of [below](#supported-functions).
+
+
+### Folding
+{@a exported-symbols}
+The compiler can only resolve references to **_exported_** symbols.
+Fortunately, the _collector_ enables limited use of non-exported symbols through _folding_.
+
+The _collector_ may be able to evaluate an expression during collection and record the result in the `.metadata.json` instead of the original expression.
+
+For example, the _collector_ can evaluate the expression `1 + 2 + 3 + 4` and replace it with the result, `10`.
+
+This process is called _folding_. An expression that can be reduced in this manner is _foldable_.
+
+{@a var-declaration}
+The collector can evaluate references to
+module-local `const` declarations and initialized `var` and `let` declarations, effectively removing them from the `.metadata.json` file.
+
+Consider the following component definition:
+
+```ts
+const template = '
{{hero.name}}
';
+
+@Component({
+ selector: 'app-hero',
+ template: template
+})
+class HeroComponent {
+ @Input() hero: Hero;
+}
+```
+
+The compiler could not refer to the `template` constant because it isn't exported.
+
+But the _collector_ can _fold_ the `template` constant into the metadata definition by inlining its contents.
+The effect is the same as if you had written:
+
+```TypeScript
+@Component({
+ selector: 'app-hero',
+ template: '
{{hero.name}}
'
+})
+class HeroComponent {
+ @Input() hero: Hero;
+}
+```
+
+There is no longer a reference to `template` and, therefore, nothing to trouble the compiler when it later interprets the _collector's_ output in `.metadata.json`.
+
+You can take this example a step further by including the `template` constant in another expression:
+
+```TypeScript
+const template = '
'
+})
+class HeroComponent {
+ @Input() hero: Hero;
+}
+```
+
+The _collector_ reduces this expression to its equivalent _folded_ string:
+
+`'
{{hero.name}}
{{hero.title}}
'`.
+
+#### Foldable syntax
+
+The following table describes which expressions the _collector_ can and cannot fold:
+
+Syntax | Foldable
+-----------------------------------|-----------------------------------
+Literal object | yes
+Literal array | yes
+Spread in literal array | no
+Calls | no
+New | no
+Property access | yes, if target is foldable
+Array index | yes, if target and index are foldable
+Identifier reference | yes, if it is a reference to a local
+A template with no substitutions | yes
+A template with substitutions | yes, if the substitutions are foldable
+Literal string | yes
+Literal number | yes
+Literal boolean | yes
+Literal null | yes
+Supported prefix operator | yes, if operand is foldable
+Supported binary operator | yes, if both left and right are foldable
+Conditional operator | yes, if condition is foldable
+Parentheses | yes, if the expression is foldable
+
+If an expression is not foldable, the collector writes it to `.metadata.json` as an [AST](https://en.wikipedia.org/wiki/Abstract_syntax_tree) for the compiler to resolve.
+
+
+## Phase 2: code generation
+
+The _collector_ makes no attempt to understand the metadata that it collects and outputs to `.metadata.json`. It represents the metadata as best it can and records errors when it detects a metadata syntax violation.
+
+It's the compiler's job to interpret the `.metadata.json` in the code generation phase.
+
+The compiler understands all syntax forms that the _collector_ supports, but it may reject _syntactically_ correct metadata if the _semantics_ violate compiler rules.
+
+The compiler can only reference _exported symbols_.
+
+Decorated component class members must be public. You cannot make an `@Input()` property private or internal.
+
+Data bound properties must also be public.
+
+```TypeScript
+// BAD CODE - title is private
+@Component({
+ selector: 'app-root',
+ template: '
{{title}}
'
+})
+class AppComponent {
+ private title = 'My App'; // Bad
+}
+```
+
+{@a supported-functions}
+Most importantly, the compiler only generates code to create instances of certain classes, support certain decorators, and call certain functions from the following lists.
+
+
+### New instances
+
+The compiler only allows metadata that create instances of these Angular classes.
+
+Class | Module
+-----------------|--------------
+`OpaqueToken` | `@angular/core`
+`InjectionToken` | `@angular/core`
+
+
+### Annotations/Decorators
+
+The compiler only supports metadata for these Angular decorators.
+
+Decorator | Module
+------------------|--------------
+`Attribute` | `@angular/core`
+`Component` | `@angular/core`
+`ContentChild` | `@angular/core`
+`ContentChildren` | `@angular/core`
+`Directive` | `@angular/core`
+`Host` | `@angular/core`
+`HostBinding` | `@angular/core`
+`HostListener` | `@angular/core`
+`Inject` | `@angular/core`
+`Injectable` | `@angular/core`
+`Input` | `@angular/core`
+`NgModule` | `@angular/core`
+`Optional` | `@angular/core`
+`Output` | `@angular/core`
+`Pipe` | `@angular/core`
+`Self` | `@angular/core`
+`SkipSelf` | `@angular/core`
+`ViewChild` | `@angular/core`
+
+
+### Macro-functions and macro-static methods
+
+The compiler also supports _macros_ in the form of functions or static
+methods that return an expression.
+
+For example, consider the following function:
+
+```TypeScript
+export function wrapInArray(value: T): T[] {
+ return [value];
+}
+```
+
+You can call the `wrapInArray` in a metadata definition because it returns the value of an expression that conforms to the compiler's restrictive JavaScript subset.
+
+You might use `wrapInArray()` like this:
+
+```TypeScript
+@NgModule({
+ declarations: wrapInArray(TypicalComponent)
+})
+class TypicalModule {}
+```
+
+The compiler treats this usage as if you had written:
+
+```TypeScript
+@NgModule({
+ declarations: [TypicalComponent]
+})
+class TypicalModule {}
+```
+
+The collector is simplistic in its determination of what qualifies as a macro
+function; it can only contain a single `return` statement.
+
+The Angular [`RouterModule`](api/router/RouterModule) exports two macro static methods, `forRoot` and `forChild`, to help declare root and child routes.
+Review the [source code](https://github.com/angular/angular/blob/master/packages/router/src/router_module.ts#L139 "RouterModule.forRoot source code")
+for these methods to see how macros can simplify configuration of complex Angular modules.
+
+## Metadata Errors
+
+The following are metadata errors you may encounter, with explanations and suggested corrections.
+
+[Expression form not supported](#expression-form-not-supported)
+[Reference to a local (non-exported) symbol](#reference-to-a-local-symbol)
+[Only initialized variables and constants](#only-initialized-variables)
+[Reference to a non-exported class](#reference-to-a-non-exported-class)
+[Reference to a non-exported function](#reference-to-a-non-exported-function)
+[Function calls are not supported](#function-calls-not-supported)
+[Destructured variable or constant not supported](#destructured-variable-not-supported)
+[Could not resolve type](#could-not-resolve-type)
+[Name expected](#name-expected)
+[Unsupported enum member name](#unsupported-enum-member-name)
+[Tagged template expressions are not supported](#tagged-template-expressions-not-supported)
+[Symbol reference expected](#symbol-reference-expected)
+
+
+
+
Expression form not supported
+
+The compiler encountered an expression it didn't understand while evalutating Angular metadata.
+
+Language features outside of the compiler's [restricted expression syntax](#expression-syntax)
+can produce this error, as seen in the following example:
+
+```
+// ERROR
+export class Fooish { ... }
+...
+const prop = typeof Fooish; // typeof is not valid in metadata
+ ...
+ // bracket notation is not valid in metadata
+ { provide: 'token', useValue: { [prop]: 'value' } };
+ ...
+```
+
+You can use `typeof` and bracket notation in normal application code.
+You just can't use those features within expressions that define Angular metadata.
+
+Avoid this error by sticking to the compiler's [restricted expression syntax](#expression-syntax)
+when writing Angular metadata
+and be wary of new or unusual TypeScript features.
+
+
+
+{@a reference-to-a-local-symbol}
+
Reference to a local (non-exported) symbol
+
+
+
+_Reference to a local (non-exported) symbol 'symbol name'. Consider exporting the symbol._
+
+
+
+The compiler encountered a referenced to a locally defined symbol that either wasn't exported or wasn't initialized.
+
+Here's a `provider` example of the problem.
+
+```
+// ERROR
+let foo: number; // neither exported nor initialized
+
+@Component({
+ selector: 'my-component',
+ template: ... ,
+ providers: [
+ { provide: Foo, useValue: foo }
+ ]
+})
+export class MyComponent {}
+```
+The compiler generates the component factory, which includes the `useValue` provider code, in a separate module. _That_ factory module can't reach back to _this_ source module to access the local (non-exported) `foo` variable.
+
+You could fix the problem by initializing `foo`.
+
+```
+let foo = 42; // initialized
+```
+
+The compiler will [fold](#folding) the expression into the provider as if you had written this.
+
+```
+ providers: [
+ { provide: Foo, useValue: 42 }
+ ]
+```
+
+Alternatively, you can fix it by exporting `foo` with the expectation that `foo` will be assigned at runtime when you actually know its value.
+
+```
+// CORRECTED
+export let foo: number; // exported
+
+@Component({
+ selector: 'my-component',
+ template: ... ,
+ providers: [
+ { provide: Foo, useValue: foo }
+ ]
+})
+export class MyComponent {}
+```
+
+Adding `export` often works for variables referenced in metadata such as `providers` and `animations` because the compiler can generate _references_ to the exported variables in these expressions. It doesn't need the _values_ of those variables.
+
+Adding `export` doesn't work when the compiler needs the _actual value_
+in order to generate code.
+For example, it doesn't work for the `template` property.
+
+```
+// ERROR
+export let someTemplate: string; // exported but not initialized
+
+@Component({
+ selector: 'my-component',
+ template: someTemplate
+})
+export class MyComponent {}
+```
+
+The compiler needs the value of the `template` property _right now_ to generate the component factory.
+The variable reference alone is insufficient.
+Prefixing the declaration with `export` merely produces a new error, "[`Only initialized variables and constants can be referenced`](#only-initialized-variables)".
+
+
+
+{@a only-initialized-variables}
+
Only initialized variables and constants
+
+
+
+_Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler._
+
+
+
+The compiler found a reference to an exported variable or static field that wasn't initialized.
+It needs the value of that variable to generate code.
+
+The following example tries to set the component's `template` property to the value of
+the exported `someTemplate` variable which is declared but _unassigned_.
+
+```
+// ERROR
+export let someTemplate: string;
+
+@Component({
+ selector: 'my-component',
+ template: someTemplate
+})
+export class MyComponent {}
+```
+
+You'd also get this error if you imported `someTemplate` from some other module and neglected to initialize it there.
+
+```
+// ERROR - not initialized there either
+import { someTemplate } from './config';
+
+@Component({
+ selector: 'my-component',
+ template: someTemplate
+})
+export class MyComponent {}
+```
+
+The compiler cannot wait until runtime to get the template information.
+It must statically derive the value of the `someTemplate` variable from the source code
+so that it can generate the component factory, which includes
+instructions for building the element based on the template.
+
+To correct this error, provide the initial value of the variable in an initializer clause _on the same line_.
+
+```
+// CORRECTED
+export let someTemplate = '
+
+_Reference to a non-exported class . Consider exporting the class._
+
+
+
+Metadata referenced a class that wasn't exported.
+
+For example, you may have defined a class and used it as an injection token in a providers array
+but neglected to export that class.
+
+```
+// ERROR
+abstract class MyStrategy { }
+
+ ...
+ providers: [
+ { provide: MyStrategy, useValue: ... }
+ ]
+ ...
+```
+
+Angular generates a class factory in a separate module and that
+factory [can only access exported classes](#exported-symbols).
+To correct this error, export the referenced class.
+
+```
+// CORRECTED
+export abstract class MyStrategy { }
+
+ ...
+ providers: [
+ { provide: MyStrategy, useValue: ... }
+ ]
+ ...
+```
+
+
+
Reference to a non-exported function
+
+Metadata referenced a function that wasn't exported.
+
+For example, you may have set a providers `useFactory` property to a locally defined function that you neglected to export.
+
+```
+// ERROR
+function myStrategy() { ... }
+
+ ...
+ providers: [
+ { provide: MyStrategy, useFactory: myStrategy }
+ ]
+ ...
+```
+
+Angular generates a class factory in a separate module and that
+factory [can only access exported functions](#exported-symbols).
+To correct this error, export the function.
+
+```
+// CORRECTED
+export function myStrategy() { ... }
+
+ ...
+ providers: [
+ { provide: MyStrategy, useFactory: myStrategy }
+ ]
+ ...
+```
+
+
+{@a function-calls-not-supported}
+
Function calls are not supported
+
+
+
+_Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function._
+
+
+
+The compiler does not currently support [function expressions or lambda functions](#function-expression).
+For example, you cannot set a provider's `useFactory` to an anonymous function or arrow function like this.
+
+```
+// ERROR
+ ...
+ providers: [
+ { provide: MyStrategy, useFactory: function() { ... } },
+ { provide: OtherStrategy, useFactory: () => { ... } }
+ ]
+ ...
+```
+You also get this error if you call a function or method in a provider's `useValue`.
+```
+// ERROR
+import { calculateValue } from './utilities';
+
+ ...
+ providers: [
+ { provide: SomeValue, useValue: calculateValue() }
+ ]
+ ...
+```
+
+To correct this error, export a function from the module and refer to the function in a `useFactory` provider instead.
+
+
+// CORRECTED
+import { calculateValue } from './utilities';
+
+export function myStrategy() { ... }
+export function otherStrategy() { ... }
+export function someValueFactory() {
+ return calculateValue();
+}
+ ...
+ providers: [
+ { provide: MyStrategy, useFactory: myStrategy },
+ { provide: OtherStrategy, useFactory: otherStrategy },
+ { provide: SomeValue, useFactory: someValueFactory }
+ ]
+ ...
+
+
+
+
+{@a destructured-variable-not-supported}
+
Destructured variable or constant not supported
+
+
+
+_Referencing an exported destructured variable or constant is not supported by the template compiler. Consider simplifying this to avoid destructuring._
+
+
+
+The compiler does not support references to variables assigned by [destructuring](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#destructuring).
+
+For example, you cannot write something like this:
+
+
+// ERROR
+import { configuration } from './configuration';
+
+// destructured assignment to foo and bar
+const {foo, bar} = configuration;
+ ...
+ providers: [
+ {provide: Foo, useValue: foo},
+ {provide: Bar, useValue: bar},
+ ]
+ ...
+
+
+To correct this error, refer to non-destructured values.
+
+
+// CORRECTED
+import { configuration } from './configuration';
+ ...
+ providers: [
+ {provide: Foo, useValue: configuration.foo},
+ {provide: Bar, useValue: configuration.bar},
+ ]
+ ...
+
+
+
+
+
Could not resolve type
+
+The compiler encountered a type and can't determine which module exports that type.
+
+This can happen if you refer to an ambient type.
+For example, the `Window` type is an ambiant type declared in the global `.d.ts` file.
+
+You'll get an error if you reference it in the component constructor,
+which the compiler must statically analyze.
+
+```
+// ERROR
+@Component({ })
+export class MyComponent {
+ constructor (private win: Window) { ... }
+}
+```
+TypeScript understands ambiant types so you don't import them.
+The Angular compiler does not understand a type that you neglect to export or import.
+
+In this case, the compiler doesn't understand how to inject something with the `Window` token.
+
+Do not refer to ambient types in metadata expressions.
+
+If you must inject an instance of an ambiant type,
+you can finesse the problem in four steps:
+
+1. Create an injection token for an instance of the ambiant type.
+1. Create a factory function that returns that instance.
+1. Add a `useFactory` provider with that factory function.
+1. Use `@Inject` to inject the instance.
+
+Here's an illustrative example.
+
+
+// CORRECTED
+import { Inject } from '@angular/core';
+
+export const WINDOW = new InjectionToken('Window');
+export function _window() { return window; }
+
+@Component({
+ ...
+ providers: [
+ { provide: WINDOW, useFactory: _window }
+ ]
+})
+export class MyComponent {
+ constructor (@Inject(WINDOW) private win: Window) { ... }
+}
+
+
+The `Window` type in the constructor is no longer a problem for the compiler because it
+uses the `@Inject(WINDOW)` to generate the injection code.
+
+Angular does something similar with the `DOCUMENT` token so you can inject the browser's `document` object (or an abstraction of it, depending upon the platform in which the application runs).
+
+
+import { Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
+
+@Component({ ... })
+export class MyComponent {
+ constructor (@Inject(DOCUMENT) private doc: Document) { ... }
+}
+
+
+
+
Name expected
+
+The compiler expected a name in an expression it was evaluating.
+This can happen if you use a number as a property name as in the following example.
+
+```
+// ERROR
+provider: [{ provide: Foo, useValue: { 0: 'test' } }]
+```
+
+Change the name of the property to something non-numeric.
+
+```
+// CORRECTED
+provider: [{ provide: Foo, useValue: { '0': 'test' } }]
+```
+
+
+
+
Unsupported enum member name
+
+Angular couldn't determine the value of the [enum member](https://www.typescriptlang.org/docs/handbook/enums.html)
+that you referenced in metadata.
+
+The compiler can understand simple enum values but not complex values such as those derived from computed properties.
+
+
+// ERROR
+enum Colors {
+ Red = 1,
+ White,
+ Blue = "Blue".length // computed
+}
+
+ ...
+ providers: [
+ { provide: BaseColor, useValue: Colors.White } // ok
+ { provide: DangerColor, useValue: Colors.Red } // ok
+ { provide: StrongColor, useValue: Colors.Blue } // bad
+ ]
+ ...
+
+
+Avoid referring to enums with complicated initializers or computed properties.
+
+
+
+{@a tagged-template-expressions-not-supported}
+
Tagged template expressions are not supported
+
+
+
+_Tagged template expressions are not supported in metadata._
+
+
'
+ ...
+```
+[`String.raw()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw)
+is a _tag function_ native to JavaScript ES2015.
+
+The AOT compiler does not support tagged template expressions; avoid them in metadata expressions.
+
+
+
+
Symbol reference expected
+
+The compiler expected a reference to a symbol at the location specified in the error message.
+
+This error can occur if you use an expression in the `extends` clause of a class.
+
+
+
+## Conclusion
+
+This page covered:
+
+* What the AOT compiler does.
+* Why metadata must be written in a subset of JavaScript.
+* What that subset is.
+* Other restrictions on metadata definition.
+* Macro-functions and macro-static methods.
+* Compiler errors related to metadata.
diff --git a/aio/content/guide/reactive-forms.md b/aio/content/guide/reactive-forms.md
index b1affa725f..d6118201ee 100644
--- a/aio/content/guide/reactive-forms.md
+++ b/aio/content/guide/reactive-forms.md
@@ -1673,10 +1673,10 @@ The default form displays a nameless hero with no addresses.
默认的表单显示一个无地址的无名英雄。
You need a method to populate (or repopulate) the _secretLairs_ with actual hero addresses whenever
-the parent `HeroListComponent` sets the `HeroListComponent.hero` input property to a new `Hero`.
+the parent `HeroListComponent` sets the `HeroDetailComponent.hero` input property to a new `Hero`.
我们需要一个方法来用实际英雄的地址填充（或重新填充）`secretLairs`，
-而不用管父组件`HeroListComponent`何时把输入属性`HeroListComponent.hero`设置为一个新的`Hero`。
+而不用管父组件`HeroListComponent`何时把输入属性`HeroDetailComponent.hero`设置为一个新的`Hero`。
The following `setAddresses` method replaces the _secretLairs_ `FormArray` with a new `FormArray`,
initialized by an array of hero address `FormGroups`.
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index 0ad2c00f98..9694100948 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -2140,7 +2140,7 @@ They are usually applied to elements as if they were HTML attributes, hence the
它们通常会作为HTML属性的名称而应用在元素上。
Many details are covered in the [_Attribute Directives_](guide/attribute-directives) guide.
-Many NgMdules such as the [`RouterModule`](guide/router "Routing and Navigation")
+Many NgModules such as the [`RouterModule`](guide/router "Routing and Navigation")
and the [`FormsModule`](guide/forms "Forms") define their own attribute directives.
This section is an introduction to the most commonly used attribute directives:
diff --git a/aio/content/guide/ts-to-js.md b/aio/content/guide/ts-to-js.md
index 031d1fa1d0..e69de29bb2 100644
--- a/aio/content/guide/ts-to-js.md
+++ b/aio/content/guide/ts-to-js.md
@@ -1,982 +0,0 @@
-# TypeScript to JavaScript
-
-# 从 TypeScript 到 JavaScript
-
-## Introduction
-
-## 简介
-
-Anything you can do with Angular in _TypeScript_, you can also do
-in JavaScript. Translating from one language to the other is mostly a
-matter of changing the way you organize your code and access Angular APIs.
-
-在 Angular 中，_TypeScript_ 可以做的任何事，也可以用 JavaScript 实现。
-将一种语言翻译成另一种语言，主要是改变了组织代码和访问 Angular API 的方式。
-
-_TypeScript_ is a popular language option for Angular development.
-Most code examples on the Internet as well as on this site are written in _TypeScript_.
-This cookbook contains recipes for translating _TypeScript_
-code examples to _ES6_ and to _ES5_ so that JavaScript developers
-can read and write Angular apps in their preferred dialect.
-
-`TypeScript` 在 Angular 开发中比较流行。
-互联网上和本网站中的大多数范例都是用 `TypeScript` 写的。
-这本烹饪宝典会教你如何把 `TypeScript` 代码的例子翻译成 `ES6` 和 `ES5` 以便 JavaScript 的开发者可以用自己喜欢的语言来写 Angular 应用。
-
-Run and compare the live TypeScript and JavaScript
-code shown in this cookbook.
-
-运行并比较本章显示的在线例子的 TypeScript 版和 JavaScript 版。
-
-
-## _TypeScript_ to _ES6_ to _ES5_
-
-## 从_TypeScript_ 到 _ES6_ 到 _ES5_
-
-_TypeScript_
-is a typed superset of _ES6 JavaScript_.
-_ES6 JavaScript_ is a superset of _ES5 JavaScript_. _ES5_ is the kind of JavaScript that runs natively in all modern browsers.
-The transformation of _TypeScript_ code all the way down to _ES5_ code can be seen as "shedding" features.
-
-_TypeScript_ 是 _ES6 JavaScript_ 类型化的超集。_ES6 JavaScript_ 是 _ES5 JavaScript_ 的超集。_ES5_ 是可以在所有现代浏览器中运行的 JavaScript。
-
-The downgrade progression is as follows:
-
-降级的过程是
-
-* _TypeScript_ to _ES6-with-decorators_.
-
- _TypeScript_ 降级到 _带装饰器的 ES6_。
-
-* _ES6-with-decorators_ to _ES6-without-decorators_ ("_plain ES6_").
-
- _带装饰器的 ES6_ 降级到 _没有装饰器的 ES6_ (“_普通 ES6_”)。
-
-* _ES6-without-decorators_ to _ES5_.
-
- _没有装饰器的 ES6_ 降级到 _ES5_。
-
-When translating from _TypeScript_ to _ES6-with-decorators_, remove
-[class property access modifiers](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)
-such as `public` and `private`.
-Remove most of the
-[type declarations](https://www.typescriptlang.org/docs/handbook/basic-types.html),
-such as `:string` and `:boolean`
-but **keep the constructor parameter types, which are used for dependency injection**.
-
-_TypeScript_ 翻译到 _带装饰器的 ES6_ 时，移除了[类属性访问修饰符](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)，如`public`和`private`。
-移除了大部分的[类型声明](https://www.typescriptlang.org/docs/handbook/basic-types.html)，如`:string`和`:boolean`。
-但**保留了用于依赖注入的构造函数参数类型**。
-
-From _ES6-with-decorators_ to _plain ES6_, remove all
-[decorators](https://www.typescriptlang.org/docs/handbook/decorators.html)
-and the remaining types.
-You must declare properties in the class constructor (`this.title = '...'`) rather than in the body of the class.
-
-_带装饰器的 ES6_ 翻译到_普通 ES6_ 时，移除了所有的[装饰器](https://www.typescriptlang.org/docs/handbook/decorators.html)和剩下的类型。
-必须在构造函数中声明属性（`this.title = '...'`），而不是在类的代码体中。
-
-Finally, from _plain ES6_ to _ES5_, the main missing features are `import`
-statements and `class` declarations.
-
-最后，_普通 ES6_ 翻译成 _ES5_，缺少的主要特性是`import`和`class`声明。
-
-For _plain ES6_ transpilation you can _start_ with a setup similar to the
-[_TypeScript_ quickstart](https://github.com/angular/quickstart) and adjust the application code accordingly.
-Transpile with [Babel](https://babeljs.io/) using the `es2015` preset.
-To use decorators and annotations with Babel, install the
-[`angular2`](https://github.com/shuhei/babel-plugin-angular2-annotations) preset as well.
-
- 对_普通 ES6_ 的翻译，可以从类似 [_TypeScript_ 快速开始](https://github.com/angular/quickstart)的设置开始，
-调整相应代码。然后用 [Babel](https://babeljs.io/) 进行转译，使用`es2015`预设值。
-要在 Babel 中使用装饰器和注释，还需安装[`angular2`](https://github.com/shuhei/babel-plugin-angular2-annotations)预设值。
-
-
-{@a modularity}
-
-## Importing and Exporting
-
-## 导入和导出
-
-### Importing Angular Code
-
-### 导入 Angular 代码
-
-In both _TypeScript_ and _ES6_, you import Angular classes, functions, and other members with _ES6_ `import` statements.
-
-在 _TypeScript_ 和 _ES6_ 中，可以使用 _ES6_ `import`语句导入 Angular 类、函数和其它成员。
-
-In _ES5_, you access the Angular entities of the [the Angular packages](guide/glossary#scoped-package)
-through the global `ng` object.
-Anything you can import from `@angular` is a nested member of this `ng` object:
-
-在 _ES5_ 中，通过全局`ng`对象访问 [Angular 包](guide/glossary#scoped-package)中的 Angular 实体。
-凡是可以从`@angular`导入的，都是该`ng`对象的嵌套成员。
-
-
-
-
-
-
-
-
-
-
-
-
-
-### Exporting application code
-
-### 导出应用代码
-
-Each file in a _TypeScript_ or _ES6_ Angular application constitutes an _ES6_ module.
-When you want to make something available to other modules, you `export` it.
-
-_TypeScript_ 或 _ES6_ Angular 应用中每个文件都构成一个 _ES6_ 模块。
-当想要让某个东西对其它模块可用时，就`export`它。
-
-_ES5_ lacks native support for modules.
-In an Angular _ES5_ application, you load each file manually by adding a `
+
+
+