diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md index 2f126c0ad1..e513e649f5 100644 --- a/aio/content/guide/aot-compiler.md +++ b/aio/content/guide/aot-compiler.md @@ -2,7 +2,7 @@ The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase _before_ the browser downloads and runs that code. -This guide explains how to build with the AOT compiler and how to write Angular metadata that AOT can compile. +This guide explains how to build with the AOT compiler using different compiler options and how to write Angular metadata that AOT can compile.
@@ -77,6 +77,174 @@ AOT compiles HTML templates and components into JavaScript files long before the With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks. +{@a compiler-options} + + ## Angular Compiler Options + + You can control your app compilation by providing template compiler options in the `tsconfig.json` file along with the options supplied to the TypeScript compiler. The template compiler options are specified as members of + `"angularCompilerOptions"` object as shown below: + + ```json + { + "compilerOptions": { + "experimentalDecorators": true, + ... + }, + "angularCompilerOptions": { + "fullTemplateTypeCheck": true, + "preserveWhiteSpace": false, + ... + } + } + ``` + + ### *skipMetadataEmit* + + This option tells the compiler not to produce `.metadata.json` files. + The option is `false` by default. + + `.metadata.json` files contain infomration needed by the template compiler from a `.ts` + file that is not included in the `.d.ts` file produced by the TypeScript compiler. This information contains, + for example, the content of annotations (such as a component's template) which TypeScript + emits to the `.js` file but not to the `.d.ts` file. + + This option should be set to `true` if using TypeScript's `--outFile` option, as the metadata files + are not valid for this style of TypeScript output. It is not recommeded to use `--outFile` with + Angular. Use a bundler, such as [webpack](https://webpack.js.org/), instead. + + This option can also be set to `true` when using factory summaries as the factory summaries + include a copy of the information that is in the `.metadata.json` file. + + ### *strictMetadataEmit* + + This option tells the template compiler to report an error to the `.metadata.json` + file if `"skipMetadataEmit"` is `false` . This option is `false` by default. This should only be used when `"skipMetadataEmit"` is `false` and `"skipTemplateCodeGen"` is `true`. + + It is intended to validate the `.metadata.json` files emitted for bundling with an `npm` package. The validation is overly strict and can emit errors for metadata that would never produce an error when used by the template compiler. You can choose to suppress the error emitted by this option for an exported symbol by including `@dynamic` in the comment documenting the symbol. + + It is valid for `.metadata.json` files to contain errors. The template compiler reports these errors + if the metadata is used to determine the contents of an annotation. The metadata + collector cannot predict the symbols that are designed to use in an annotation, so it will preemptively + include error nodes in the metadata for the exported symbols. The template compiler can then use the error + nodes to report an error if these symbols are used. If the client of a library intends to use a symbol in an annotation, the template compiler will not normally report + this until the client uses the symbol. This option allows detecting these errors during the build phase of + the library and is used, for example, in producing Angular libraries themselves. + + ### *skipTemplateCodegen* + + This option tells the compiler to suppress emitting `.ngfactory.js` and `.ngstyle.js` files. When set, + this turns off most of the template compiler and disables reporting template diagnostics. + This option can be used to instruct the + template compiler to produce `.metadata.json` files for distribution with an `npm` package while + avoiding the production of `.ngfactory.js` and `.ngstyle.js` files that cannot be distributed to + `npm`. + + ### *strictInjectionParameters* + + When set to `true`, this options tells the compiler to report an error for a parameter supplied + whose injection type cannot be determined. When this value option is not provided or is `false`, constructor parameters of classes marked with `@Injectable` whose type cannot be resolved will + produce a warning. + + *Note*: It is recommended to change this option explicitly to `true` as this option will default to `true` in the future. + + ### *flatModuleOutFile* + + When set to `true`, this option tells the template compiler to generate a flat module + index of the given file name and the corresponding flat module metadata. Use this option when creating + flat modules that are packaged similarly to `@angular/core` and `@angular/common`. When this option + is used, the `package.json` for the library should refer + to the generated flat module index instead of the library index file. With this + option only one `.metadata.json` file is produced that contains all the metadata necessary + for symbols exported from the library index. In the generated `.ngfactory.js` files, the flat + module index is used to import symbols that includes both the public API from the library index + as well as shrowded internal symbols. + + By default the `.ts` file supplied in the `files` field is assumed to be library index. + If more than one `.ts` file is specified, `libraryIndex` is used to select the file to use. + If more than one `.ts` file is supplied without a `libraryIndex`, an error is produced. A flat module + index `.d.ts` and `.js` will be created with the given `flatModuleOutFile` name in the same + location as the library index `.d.ts` file. For example, if a library uses + `public_api.ts` file as the library index of the module, the `tsconfig.json` `files` field + would be `["public_api.ts"]`. The `flatModuleOutFile` options could then be set to, for + example `"index.js"`, which produces `index.d.ts` and `index.metadata.json` files. The + library's `package.json`'s `module` field would be `"index.js"` and the `typings` field + would be `"index.d.ts"`. + + ### *flatModuleId* + + This option specifies the preferred module id to use for importing a flat module. + References generated by the template compiler will use this module name when importing symbols + from the flat module. + This is only meaningful when `flatModuleOutFile` is also supplied. Otherwise the compiler ignores + this option. + + ### *generateCodeForLibraries* + + This option tells the template compiler to generate factory files (`.ngfactory.js` and `.ngstyle.js`) + for `.d.ts` files with a corresponding `.metadata.json` file. This option defaults to + `true`. When this option is `false`, factory files are generated only for `.ts` files. + + This option should be set to `false` when using factory summaries. + + ### *fullTemplateTypeCheck* + + This option tells the compiler to enable the [binding expression validation](#binding-expresion-validation) + phase of the template compiler which uses TypeScript to validate binding expressions. + + This option is `false` by default. + + *Note*: It is recommended to set this to `true` as this option will default to `true` in the future. + + ### *annotateForClosureCompiler* + + This option tells the compiler to use [Tsickle](https://github.com/angular/tsickle) to annotate the emitted + JavaScript with [JsDoc](http://usejsdoc.org/) comments needed by the + [Closure Compiler](https://github.com/google/closure-compiler). This option defaults to `false`. + + ### *annotationsAs* + + Use this option to modify how the Angular specific annotations are emitted to improve tree-shaking. Non-Angular + annotations and decorators are unnaffected. Default is `static fields`. + + value | description + ----------------|------------------------------------------------------------- + `decorators` | Leave the Decorators in-place. This makes compilation faster. TypeScript will emit calls to the __decorate helper. Use `--emitDecoratorMetadata` for runtime reflection. However, the resulting code will not properly tree-shake. + `static fields` | Replace decorators with a static field in the class. Allows advanced tree-shakers like [Closure Compiler](https://github.com/google/closure-compiler) to remove unused classes. + + ### *trace* + + This tells the compiler to print extra information while compiling templates. + + ### *enableLegacyTemplate* + + The use of `