feat(@ngtools/webpack): add support for Ivy compatible solution

Ivy compatible solution still uses the 'standard' bootstrapping code, however the difference is that there are no factories.

Using a similar approach for `ngc` but without factories and instead of `bootstrapModuleFactory` it uses `bootstrapModule`.

Author: Alan Agius

packages/ngtools/webpack/src/angular_compiler_plugin.ts

@@ -406,12 +406,12 @@ export class AngularCompilerPlugin {
     }
 
     // If there's still no entryModule try to resolve from mainPath.
-    if (!this._entryModule && this._mainPath && !this._compilerOptions.enableIvy) {
+    if (!this._entryModule && this._mainPath) {
       time('AngularCompilerPlugin._make.resolveEntryModuleFromMain');
       this._entryModule = resolveEntryModuleFromMain(
         this._mainPath, this._compilerHost, this._getTsProgram() as ts.Program);
 
-      if (!this.entryModule) {
+      if (!this.entryModule && !this._compilerOptions.enableIvy) {
         this._warnings.push('Lazy routes discovery is not enabled. '
           + 'Because there is neither an entryModule nor a '
           + 'statically analyzable bootstrap code in the main file.',
@@ -879,7 +879,12 @@ export class AngularCompilerPlugin {
 
         if (!this._JitMode) {
           // Replace bootstrap in browser AOT.
-          this._transformers.push(replaceBootstrap(isAppPath, getEntryModule, getTypeChecker));
+          this._transformers.push(replaceBootstrap(
+            isAppPath,
+            getEntryModule,
+            getTypeChecker,
+            !!this._compilerOptions.enableIvy,
+          ));
         }
       } else if (this._platform === PLATFORM.Server) {
         this._transformers.push(exportLazyModuleMap(isMainPath, getLazyRoutes));

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

@@ -17,6 +17,7 @@ export function replaceBootstrap(
   shouldTransform: (fileName: string) => boolean,
   getEntryModule: () => { path: string, className: string } | null,
   getTypeChecker: () => ts.TypeChecker,
+  enableIvy?: boolean,
 ): ts.TransformerFactory<ts.SourceFile> {
 
   const standardTransform: StandardTransform = function (sourceFile: ts.SourceFile) {
@@ -37,9 +38,6 @@ export function replaceBootstrap(
       return [];
     }
 
-    const relativeEntryModulePath = relative(dirname(sourceFile.fileName), entryModule.path);
-    const normalizedEntryModulePath = `./${relativeEntryModulePath}`.replace(/\\/g, '/');
-
     // Find the bootstrap calls.
     entryModuleIdentifiers.forEach(entryModuleIdentifier => {
       // Figure out if it's a `platformBrowserDynamic().bootstrapModule(AppModule)` call.
@@ -79,19 +77,28 @@ export function replaceBootstrap(
       const idNgFactory = ts.createUniqueName('__NgCli_bootstrap_');
 
       // Add the transform operations.
-      const factoryClassName = entryModule.className + 'NgFactory';
-      const factoryModulePath = normalizedEntryModulePath + '.ngfactory';
+      const relativeEntryModulePath = relative(dirname(sourceFile.fileName), entryModule.path);
+      let className = entryModule.className;
+      let modulePath = `./${relativeEntryModulePath}`.replace(/\\/g, '/');
+      let bootstrapIdentifier = 'bootstrapModule';
+
+      if (!enableIvy) {
+        className += 'NgFactory';
+        modulePath += '.ngfactory';
+        bootstrapIdentifier = 'bootstrapModuleFactory';
+      }
+
       ops.push(
         // Replace the entry module import.
-        ...insertStarImport(sourceFile, idNgFactory, factoryModulePath),
+        ...insertStarImport(sourceFile, idNgFactory, modulePath),
         new ReplaceNodeOperation(sourceFile, entryModuleIdentifier,
-          ts.createPropertyAccess(idNgFactory, ts.createIdentifier(factoryClassName))),
+          ts.createPropertyAccess(idNgFactory, ts.createIdentifier(className))),
         // Replace the platformBrowserDynamic import.
         ...insertStarImport(sourceFile, idPlatformBrowser, '@angular/platform-browser'),
         new ReplaceNodeOperation(sourceFile, platformBrowserDynamicIdentifier,
           ts.createPropertyAccess(idPlatformBrowser, 'platformBrowser')),
         new ReplaceNodeOperation(sourceFile, bootstrapModuleIdentifier,
-          ts.createIdentifier('bootstrapModuleFactory')),
+          ts.createIdentifier(bootstrapIdentifier)),
       );
     });
 

packages/ngtools/webpack/src/transformers/replace_bootstrap_spec.ts

@@ -52,6 +52,48 @@ describe('@ngtools/webpack transformers', () => {
       expect(tags.oneLine`${result}`).toEqual(tags.oneLine`${output}`);
     });
 
+    it('should replace bootstrap for Ivy without referencing ngFactory', () => {
+      const input = tags.stripIndent`
+        import { enableProdMode } from '@angular/core';
+        import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+        import { AppModule } from './app/app.module';
+        import { environment } from './environments/environment';
+
+        if (environment.production) {
+          enableProdMode();
+        }
+
+        platformBrowserDynamic().bootstrapModule(AppModule);
+      `;
+
+      // tslint:disable:max-line-length
+      const output = tags.stripIndent`
+        import { enableProdMode } from '@angular/core';
+        import { environment } from './environments/environment';
+
+        import * as __NgCli_bootstrap_1 from "./app/app.module";
+        import * as __NgCli_bootstrap_2 from "@angular/platform-browser";
+
+        if (environment.production) {
+          enableProdMode();
+        }
+        __NgCli_bootstrap_2.platformBrowser().bootstrapModule(__NgCli_bootstrap_1.AppModule);
+      `;
+      // tslint:enable:max-line-length
+
+      const { program, compilerHost } = createTypescriptContext(input);
+      const transformer = replaceBootstrap(
+        () => true,
+        () => ({ path: '/project/src/app/app.module', className: 'AppModule' }),
+        () => program.getTypeChecker(),
+        true,
+      );
+      const result = transformTypescript(undefined, [transformer], program, compilerHost);
+
+      expect(tags.oneLine`${result}`).toEqual(tags.oneLine`${output}`);
+    });
+
     it('should replace bootstrap when barrel files are used', () => {
       const input = tags.stripIndent`
         import { enableProdMode } from '@angular/core';