fix(@ngtools/webpack): fix bootstrapping code

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

@@ -95,7 +95,7 @@ export class NgCliWebpackConfig<T extends BuildOptions = BuildOptions> {
         sourcemaps: true,
         extractCss: false,
         namedChunks: true,
-        aot: false,
+        aot: AngularCompilerPlugin.isSupported(),
         buildOptimizer: false
       },
       production: {
@@ -112,7 +112,7 @@ export class NgCliWebpackConfig<T extends BuildOptions = BuildOptions> {
 
     // Use Build Optimizer on prod AOT builds by default when AngularCompilerPlugin is supported.
     const buildOptimizerDefault = {
-      buildOptimizer: merged.aot && AngularCompilerPlugin.isSupported()
+      buildOptimizer: buildOptions.target == 'production' && AngularCompilerPlugin.isSupported()
     };
 
     merged = Object.assign({}, buildOptimizerDefault, merged);

packages/@ngtools/webpack/src/angular_compiler_plugin.ts

@@ -704,34 +704,27 @@ export class AngularCompilerPlugin implements Tapable {
 
     return Promise.resolve()
       .then(() => {
-        if (this._ngCompilerSupportsNewApi) {
-          return;
+        // Make a new program and load the Angular structure if there are changes.
+        if (changedFiles.length > 0) {
+          return this._createOrUpdateProgram();
         }
-
+      })
+      .then(() => {
         // Try to find lazy routes.
         // We need to run the `listLazyRoutes` the first time because it also navigates libraries
         // and other things that we might miss using the (faster) findLazyRoutesInAst.
         // Lazy routes modules will be read with compilerHost and added to the changed files.
         const changedTsFiles = this._compilerHost.getChangedFilePaths()
           .filter(k => k.endsWith('.ts'));
-        if (this._firstRun) {
+        if (this._ngCompilerSupportsNewApi) {
+          this._processLazyRoutes(this._listLazyRoutesFromProgram());
+          return this._createOrUpdateProgram();
+        } else if (this._firstRun) {
           this._processLazyRoutes(this._getLazyRoutesFromNgtools());
         } else if (changedTsFiles.length > 0) {
           this._processLazyRoutes(this._findLazyRoutesInAst(changedTsFiles));
         }
       })
-      .then(() => {
-        // Make a new program and load the Angular structure if there are changes.
-        if (changedFiles.length > 0) {
-          return this._createOrUpdateProgram();
-        }
-      })
-      .then(() => {
-        if (this._ngCompilerSupportsNewApi) {
-          // TODO: keep this when the new ngCompiler supports the new lazy routes API.
-          this._lazyRoutes = this._listLazyRoutesFromProgram();
-        }
-      })
       .then(() => {
         // Build transforms, emit and report errors if there are changes or it's the first run.
         if (changedFiles.length > 0 || this._firstRun) {

packages/@ngtools/webpack/src/transformers/insert_import.ts

@@ -5,6 +5,43 @@ import { findAstNodes, getFirstNode } from './ast_helpers';
 import { AddNodeOperation, TransformOperation } from './make_transform';
 
 
+export function insertStarImport(
+  sourceFile: ts.SourceFile,
+  identifier: ts.Identifier,
+  modulePath: string,
+): TransformOperation[] {
+  const ops: TransformOperation[] = [];
+  const allImports = findAstNodes(null, sourceFile, ts.SyntaxKind.ImportDeclaration);
+
+  // We don't need to verify if the symbol is already imported, star imports should be unique.
+
+  // Create the new import node.
+  const namespaceImport = ts.createNamespaceImport(identifier);
+  const importClause = ts.createImportClause(undefined, namespaceImport);
+  const newImport = ts.createImportDeclaration(undefined, undefined, importClause,
+    ts.createLiteral(modulePath));
+
+  if (allImports.length > 0) {
+    // Find the last import and insert after.
+    ops.push(new AddNodeOperation(
+      sourceFile,
+      allImports[allImports.length - 1],
+      undefined,
+      newImport
+    ));
+  } else {
+    // Insert before the first node.
+    ops.push(new AddNodeOperation(
+      sourceFile,
+      getFirstNode(sourceFile),
+      newImport
+    ));
+  }
+
+  return ops;
+}
+
+
 export function insertImport(
   sourceFile: ts.SourceFile,
   symbolName: string,

packages/@ngtools/webpack/src/transformers/replace_bootstrap.spec.ts

@@ -20,19 +20,21 @@ describe('@ngtools/webpack transformers', () => {
 
         platformBrowserDynamic().bootstrapModule(AppModule);
       `;
+
+      // tslint:disable:max-line-length
       const output = stripIndent`
         import { enableProdMode } from '@angular/core';
         import { environment } from './environments/environment';
 
-        import { AppModuleNgFactory } from "./app/app.module.ngfactory";
-        import { platformBrowser } from "@angular/platform-browser";
+        import * as __NgCli_bootstrap_1 from "./app/app.module.ngfactory";
+        import * as __NgCli_bootstrap_2 from "@angular/platform-browser";
 
         if (environment.production) {
           enableProdMode();
         }
-
-        platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
+        __NgCli_bootstrap_2.platformBrowser().bootstrapModuleFactory(__NgCli_bootstrap_1.AppModuleNgFactory);
       `;
+      // tslint:enable:max-line-length
 
       const transformOpsCb = (sourceFile: ts.SourceFile) =>
         replaceBootstrap(sourceFile, { path: '/app.module', className: 'AppModule' });

packages/@ngtools/webpack/src/transformers/replace_bootstrap.ts

@@ -2,7 +2,7 @@
 import * as ts from 'typescript';
 
 import { findAstNodes } from './ast_helpers';
-import { insertImport } from './insert_import';
+import { insertStarImport } from './insert_import';
 import { removeImport } from './remove_import';
 import {
   ReplaceNodeOperation,
@@ -84,18 +84,21 @@ export function replaceBootstrap(
 
     const platformBrowserDynamicIdentifier = innerCallExpr.expression as ts.Identifier;
 
+    const idPlatformBrowser = ts.createUniqueName('__NgCli_bootstrap_');
+    const idNgFactory = ts.createUniqueName('__NgCli_bootstrap_');
+
     // Add the transform operations.
     const factoryClassName = entryModule.className + 'NgFactory';
     const factoryModulePath = modulePath + '.ngfactory';
     ops.push(
       // Replace the entry module import.
-      ...insertImport(sourceFile, factoryClassName, factoryModulePath),
+      ...insertStarImport(sourceFile, idNgFactory, factoryModulePath),
       new ReplaceNodeOperation(sourceFile, entryModuleIdentifier,
-        ts.createIdentifier(factoryClassName)),
+        ts.createPropertyAccess(idNgFactory, ts.createIdentifier(factoryClassName))),
       // Replace the platformBrowserDynamic import.
-      ...insertImport(sourceFile, 'platformBrowser', '@angular/platform-browser'),
+      ...insertStarImport(sourceFile, idPlatformBrowser, '@angular/platform-browser'),
       new ReplaceNodeOperation(sourceFile, platformBrowserDynamicIdentifier,
-        ts.createIdentifier('platformBrowser')),
+        ts.createPropertyAccess(idPlatformBrowser, 'platformBrowser')),
       new ReplaceNodeOperation(sourceFile, bootstrapModuleIdentifier,
         ts.createIdentifier('bootstrapModuleFactory')),
     );

tests/e2e/tests/build/platform-server-lazy-module-map.ts

@@ -52,7 +52,7 @@ export default function () {
     .then(() => replaceInFile('./src/app/app.module.ts', /\[\s*BrowserModule/g,
       `[BrowserModule.withServerTransition(\{ appId: 'app' \}), ServerModule`))
     .then(() => silentNpm('install'))
-    .then(() => ng('build'))
+    .then(() => ng('build', '--aot=false'))
     // files were created successfully
     .then(() => expectFileToMatch('dist/main.bundle.js',
       /__webpack_exports__, "AppModule"/))

tests/e2e/tests/build/platform-server.ts

@@ -52,7 +52,7 @@ export default function () {
     .then(() => replaceInFile('./src/app/app.module.ts', /\[\s*BrowserModule/g,
       `[BrowserModule.withServerTransition(\{ appId: 'app' \}), ServerModule`))
     .then(() => silentNpm('install'))
-    .then(() => ng('build'))
+    .then(() => ng('build', '--aot=false'))
     // files were created successfully
     .then(() => expectFileToMatch('dist/main.bundle.js',
       /__webpack_exports__, "AppModule"/))
@@ -101,7 +101,7 @@ export default function () {
         fs.writeFileSync('dist/index.html', html);
       \});
     `)))
-    .then(() => ng('build', '--bundle-dependencies=all'))
+    .then(() => ng('build', '--bundle-dependencies=all', '--aot=false'))
     .then(() => expectToFail(() => expectFileToMatch('./dist/main.bundle.js',
       /require\(["']@angular\/[^"']*["']\)/)))
     .then(() => exec(normalize('node'), 'dist/main.bundle.js'));