fix(@angular/cli): strip decorators with Angular 5+ (angular#8077)

We feel build `--build-optimizer` is stable enough to not be experimental anymore.

This PR defaults `build-optimizer`  when using Angular 5+ on a production build with `--aot`.

It can still be turned off with `--no-build-optimizer` (or `--build-optimizer=false`).

Fix angular#8050

Author: filipesilva

docs/documentation/build.md

@@ -81,6 +81,7 @@ Flag                | `--dev` | `--prod`
 `--sourcemaps`      | `true`  | `false`
 `--extract-css`     | `false` | `true`
 `--named-chunks`    | `true`  | `false`
+`--build-optimizer` | `false` | `true` with AOT and Angular 5
 
 `--extract-licenses` Extract all licenses in a separate file, in the case of production builds only.
 `--i18n-file` Localization file to use for i18n.
@@ -353,7 +354,7 @@ Note: service worker support is experimental and subject to change.
     <code>--build-optimizer</code>
   </p>
   <p>
-    (Experimental) Enables @angular-devkit/build-optimizer optimizations when using `--aot`.
+    Enables @angular-devkit/build-optimizer optimizations when using `--aot`.
   </p>
 </details>
 

packages/@angular/cli/commands/build.ts

@@ -166,9 +166,7 @@ export const baseBuildCommandOptions: any = [
   {
     name: 'build-optimizer',
     type: Boolean,
-    default: false,
-    description: '(Experimental) Enables @angular-devkit/build-optimizer '
-    + 'optimizations when using `--aot`.'
+    description: 'Enables @angular-devkit/build-optimizer optimizations when using `--aot`.'
   },
   {
     name: 'named-chunks',

packages/@angular/cli/models/webpack-config.ts

@@ -1,3 +1,4 @@
+import { AngularCompilerPlugin } from '@ngtools/webpack';
 import { readTsconfig } from '../utilities/read-tsconfig';
 const webpackMerge = require('webpack-merge');
 import { CliConfig } from './config';
@@ -94,7 +95,8 @@ export class NgCliWebpackConfig<T extends BuildOptions = BuildOptions> {
         sourcemaps: true,
         extractCss: false,
         namedChunks: true,
-        aot: false
+        aot: false,
+        buildOptimizer: false
       },
       production: {
         environment: 'prod',
@@ -106,7 +108,14 @@ export class NgCliWebpackConfig<T extends BuildOptions = BuildOptions> {
       }
     };
 
-    return Object.assign({}, targetDefaults[buildOptions.target], buildOptions);
+    const merged = Object.assign({}, targetDefaults[buildOptions.target], buildOptions);
+
+    // Use Build Optimizer on prod AOT builds by default when AngularCompilerPlugin is supported.
+    const buildOptimizer = {
+      buildOptimizer: merged.aot && AngularCompilerPlugin.isSupported()
+    };
+
+    return Object.assign({}, buildOptimizer, merged);
   }
 
   // Fill in defaults from .angular-cli.json

tests/e2e/tests/build/aot/angular-compiler.ts

@@ -1,6 +1,6 @@
 import { ng, silentNpm } from '../../../utils/process';
 import { updateJsonFile } from '../../../utils/project';
-import { expectFileToMatch, rimraf, moveFile } from '../../../utils/fs';
+import { expectFileToMatch, rimraf, moveFile, expectFileToExist } from '../../../utils/fs';
 import { getGlobalVariable } from '../../../utils/env';
 import { expectToFail } from '../../../utils/utils';
 
@@ -13,6 +13,7 @@ export default function () {
     return Promise.resolve();
   }
 
+  // These tests should be moved to the default when we use ng5 in new projects.
   return Promise.resolve()
     .then(() => moveFile('node_modules', '../node_modules'))
     .then(() => updateJsonFile('package.json', packageJson => {
@@ -36,6 +37,11 @@ export default function () {
     .then(() => expectFileToMatch('dist/main.bundle.js',
       /bootstrapModuleFactory.*\/\* AppModuleNgFactory \*\//))
 
+    // Build optimizer should default to true on prod builds.
+    .then(() => ng('build', '--prod', '--output-hashing=none'))
+    .then(() => expectToFail(() => expectFileToExist('dist/vendor.js')))
+    .then(() => expectToFail(() => expectFileToMatch('dist/main.js', /\.decorators =/)))
+
     // tests for register_locale_data transformer
     .then(() => rimraf('dist'))
     .then(() => ng('build', '--locale=fr'))