fix(@ngtools/webpack): fix bootstrapping code

There is no link between a new identifier and its import (and apparently TS does
not export any API to make one in the type checker). The best way to import a
symbol reliably is to use a namespace import (import * as x from "abc").

The new bootstrapping code uses just that.

Author: hansl

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')),
     );