feat(@ngtools/webpack): add flag to replace export of main module

Author: FrozenPandaz

packages/@angular/cli/models/webpack-configs/typescript.ts

@@ -68,6 +68,7 @@ function _createAotPlugin(wco: WebpackConfigOptions, options: any) {
       i18nFile: buildOptions.i18nFile,
       i18nFormat: buildOptions.i18nFormat,
       locale: buildOptions.locale,
+      replaceExport: appConfig.platform === 'server',
       hostReplacementPaths,
       // If we don't explicitely list excludes, it will default to `['**/*.spec.ts']`.
       exclude: []

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

@@ -435,6 +435,33 @@ function _diagnoseDeps(reasons: ModuleReason[], plugin: AotPlugin, checked: Set<
 }
 
 
+export function _replaceExport(plugin: AotPlugin, refactor: TypeScriptFileRefactor) {
+  if (!plugin.replaceExport) {
+    return;
+  }
+
+  const exports = refactor
+    .findAstNodes(refactor.sourceFile, ts.SyntaxKind.ExportDeclaration, true);
+
+  exports
+    .filter(node => {
+
+      const identifiers = refactor.findAstNodes(node, ts.SyntaxKind.Identifier, false);
+
+      identifiers
+        .filter(node => node.getText() === plugin.entryModule.className);
+
+      return identifiers.length > 0;
+    })
+    .forEach(node => {
+      const factoryPath = _getNgFactoryPath(plugin, refactor);
+      const factoryClassName = plugin.entryModule.className + 'NgFactory';
+      const exportStatement = `export \{ ${factoryClassName} \} from '${factoryPath}'`;
+      refactor.appendAfter(node, exportStatement);
+    });
+}
+
+
 // Super simple TS transpiler loader for testing / isolated usage. does not type check!
 export function ngcLoader(this: LoaderContext & { _compilation: any }, source: string | null) {
   const cb = this.async();
@@ -464,7 +491,8 @@ export function ngcLoader(this: LoaderContext & { _compilation: any }, source: s
         if (!plugin.skipCodeGeneration) {
           return Promise.resolve()
             .then(() => _removeDecorators(refactor))
-            .then(() => _refactorBootstrap(plugin, refactor));
+            .then(() => _refactorBootstrap(plugin, refactor))
+            .then(() => _replaceExport(plugin, refactor));
         } else {
           return Promise.resolve()
             .then(() => _replaceResources(refactor))

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

@@ -25,6 +25,7 @@ export interface AotPluginOptions {
   mainPath?: string;
   typeChecking?: boolean;
   skipCodeGeneration?: boolean;
+  replaceExport?: boolean;
   hostOverrideFileSystem?: { [path: string]: string };
   hostReplacementPaths?: { [path: string]: string };
   i18nFile?: string;
@@ -59,6 +60,7 @@ export class AotPlugin implements Tapable {
 
   private _typeCheck = true;
   private _skipCodeGeneration = false;
+  private _replaceExport = false;
   private _basePath: string;
   private _genDir: string;
 
@@ -89,6 +91,7 @@ export class AotPlugin implements Tapable {
   get genDir() { return this._genDir; }
   get program() { return this._program; }
   get skipCodeGeneration() { return this._skipCodeGeneration; }
+  get replaceExport() { return this._replaceExport; }
   get typeCheck() { return this._typeCheck; }
   get i18nFile() { return this._i18nFile; }
   get i18nFormat() { return this._i18nFormat; }
@@ -232,6 +235,9 @@ export class AotPlugin implements Tapable {
     if (options.hasOwnProperty('locale')) {
       this._locale = options.locale;
     }
+    if (options.hasOwnProperty('replaceExport')) {
+      this._replaceExport = options.replaceExport || this._replaceExport;
+    }
   }
 
   private _findLazyRoutesInAst(): LazyRouteMap {

tests/e2e/assets/webpack/test-server-app/app/app.module.ts

@@ -1,7 +1,10 @@
 import { NgModule, Component } from '@angular/core';
 import { ServerModule  } from '@angular/platform-server';
+import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
+
 import { AppComponent } from './app.component';
+import { MyInjectable } from './injectable';
 
 @Component({
   selector: 'home-view',
@@ -16,12 +19,16 @@ export class HomeView {}
     HomeView
   ],
   imports: [
+    BrowserModule.withServerTransition({
+      appId: 'app'
+    }),
     ServerModule,
     RouterModule.forRoot([
       {path: 'lazy', loadChildren: './lazy.module#LazyModule'},
       {path: '', component: HomeView}
     ])
   ],
+  providers: [MyInjectable],
   bootstrap: [AppComponent]
 })
 export class AppModule {

tests/e2e/assets/webpack/test-server-app/app/injectable.ts

@@ -4,5 +4,5 @@ import {DOCUMENT} from '@angular/platform-browser';
 
 @Injectable()
 export class MyInjectable {
-  constructor(public viewContainer: ViewContainerRef, @Inject(DOCUMENT) public doc) {}
+  constructor(@Inject(DOCUMENT) public doc) {}
 }

tests/e2e/assets/webpack/test-server-app/app/main.commonjs.ts

@@ -0,0 +1 @@
+export { AppModule } from './app.module';

tests/e2e/assets/webpack/test-server-app/index.js

@@ -0,0 +1,12 @@
+const fs = require('fs');
+const { AppModuleNgFactory } = require('./dist/app.main');
+const { renderModuleFactory } = require('@angular/platform-server');
+
+require('zone.js/dist/zone-node');
+
+renderModuleFactory(AppModuleNgFactory, {
+  url: '/',
+  document: '<app-root></app-root>'
+}).then(html => {
+  fs.writeFileSync('dist/index.html', html);
+})

tests/e2e/assets/webpack/test-server-app/webpack.commonjs.config.js

@@ -0,0 +1,33 @@
+const ngToolsWebpack = require('@ngtools/webpack');
+
+module.exports = {
+  resolve: {
+    extensions: ['.ts', '.js']
+  },
+  target: 'web',
+  entry: './app/main.commonjs.ts',
+  output: {
+    path: './dist',
+    publicPath: 'dist/',
+    filename: 'app.main.js',
+    libraryTarget: 'commonjs'
+  },
+  plugins: [
+    new ngToolsWebpack.AotPlugin({
+      tsConfigPath: './tsconfig.json',
+      replaceExport: true
+    })
+  ],
+  externals: /^@angular/,
+  module: {
+    loaders: [
+      { test: /\.scss$/, loaders: ['raw-loader', 'sass-loader'] },
+      { test: /\.css$/, loader: 'raw-loader' },
+      { test: /\.html$/, loader: 'raw-loader' },
+      { test: /\.ts$/, loader: '@ngtools/webpack' }
+    ]
+  },
+  devServer: {
+    historyApiFallback: true
+  }
+};

tests/e2e/tests/packages/webpack/server.ts

@@ -1,7 +1,7 @@
 import {normalize} from 'path';
 import {createProjectFromAsset} from '../../../utils/assets';
 import {exec} from '../../../utils/process';
-import {expectFileToMatch} from '../../../utils/fs';
+import {expectFileToMatch, rimraf} from '../../../utils/fs';
 
 
 export default function(skipCleaning: () => void) {
@@ -12,13 +12,20 @@ export default function(skipCleaning: () => void) {
       new RegExp('.bootstrapModuleFactory'))
     .then(() => expectFileToMatch('dist/app.main.js',
       new RegExp('MyInjectable.ctorParameters = .*'
-               + 'type: .*ViewContainerRef.*'
                + 'type: undefined, decorators.*Inject.*args: .*DOCUMENT.*'))
     .then(() => expectFileToMatch('dist/app.main.js',
       new RegExp('AppComponent.ctorParameters = .*MyInjectable'))
     .then(() => expectFileToMatch('dist/app.main.js',
       /AppModule \*\/\].*\.testProp = \'testing\'/))
     .then(() => expectFileToMatch('dist/app.main.js',
-      /renderModuleFactory \*\/\].*\/\* AppModuleNgFactory \*\/\]/))
+        /renderModuleFactory \*\/\].*\/\* AppModuleNgFactory \*\/\]/))
+    .then(() => rimraf('dist'))
+    .then(() => exec(normalize('node_modules/.bin/webpack'),
+      '--config', 'webpack.commonjs.config.js'))
+    .then(() => expectFileToMatch('dist/app.main.js',
+      /__webpack_exports__, "AppModuleNgFactory"/))
+    .then(() => exec(normalize('node'), 'index.js'))
+    .then(() => expectFileToMatch('dist/index.html',
+      new RegExp('<a ng-reflect-router-link="lazy" href="/lazy">lazy</a>')))
     .then(() => skipCleaning());
 }