First implementation of get lazy modules entries.

Author: hansl

addon/ng2/blueprints/ng2/files/package.json

@@ -23,6 +23,7 @@
     "core-js": "^2.4.0",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
+    "systemjs": "^0.19.36",
     "ts-helpers": "^1.1.1",
     "zone.js": "0.6.12"
   },

addon/ng2/models/find-lazy-modules.ts

@@ -0,0 +1,68 @@
+import * as fs from 'fs';
+import * as glob from 'glob';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {Observable} from 'rxjs/Observable';
+import {getSource, findNodes, getContentOfKeyLiteral} from '../utilities/ast-utils';
+
+
+const loadChildrenRegex = /(\{[^{}]+?(loadChildren|['"]loadChildren['"])\s*:\s*)('[^']+'|"[^"]+")/gm;
+
+
+interface Array<T> {
+  flatMap: <R>(mapFn: (item: T) => Array<R>) => Array<R>;
+}
+Array.prototype.flatMap = function<T, R>(mapFn: (item: T) => Array<R>): Array<R> {
+  if (!mapFn) {
+    return [];
+  }
+
+  return this.reduce((arr, current) => {
+    const result = mapFn.call(null, current);
+    return result !== undefined ? arr.concat(result) : arr;
+  }, []);
+};
+
+
+export function findLoadChildren(tsFilePath: string): string[] {
+  const source = getSource(tsFilePath);
+  const unique = {};
+
+  return findNodes(source, ts.SyntaxKind.ObjectLiteralExpression)
+    .flatMap(node => findNodes(node, ts.SyntaxKind.PropertyAssignment))
+    .filter((node: ts.PropertyAssignment) => {
+      const key = getContentOfKeyLiteral(source, node.name);
+      if (!key) {
+        // key is an expression, can't do anything.
+        return false;
+      }
+      return key == 'loadChildren'
+    })
+    // Remove initializers that are not files.
+    .filter((node: ts.PropertyAssignment) => {
+      return node.initializer.kind === ts.SyntaxKind.StringLiteral;
+    })
+    // Get the full text of the initiliazer.
+    .map((node: ts.PropertyAssignment) => {
+      return eval(node.initializer.getText(source));
+    })
+    .flatMap((value: string) => unique[value] ? undefined : unique[value] = value)
+    .map((moduleName: string) => moduleName.split('#')[0]);
+}
+
+
+export function findLazyModules(projectRoot: any): string[] {
+  const allTs = glob.sync(path.join(projectRoot, '/**/*.ts'));
+  const result = {};
+  allTs
+    .flatMap(tsPath => {
+      findLoadChildren(tsPath).forEach(moduleName => {
+        const fileName = path.resolve(path.dirname(tsPath), moduleName) + '.ts';
+        if (fs.existsSync(fileName)) {
+          result[moduleName] = fileName;
+        }
+      });
+    });
+  return result;
+}

addon/ng2/models/webpack-build-common.ts

@@ -2,21 +2,27 @@ import * as path from 'path';
 import * as CopyWebpackPlugin from 'copy-webpack-plugin';
 import * as HtmlWebpackPlugin from 'html-webpack-plugin';
 import * as webpack from 'webpack';
-import { ForkCheckerPlugin } from 'awesome-typescript-loader';
-import { CliConfig } from './config';
+import * as atl from 'awesome-typescript-loader';
+
+import {SystemJSRegisterPublicModules} from './webpack-plugin-systemjs-registry';
+import {findLazyModules} from './find-lazy-modules';
+
 
 export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
+  const lazyModules = findLazyModules(path.resolve(projectRoot, sourceDir));
+  const entries = Object.assign({
+    main: [path.resolve(projectRoot, `./${sourceDir}/main.ts`)],
+    polyfills: path.resolve(projectRoot, `./${sourceDir}/polyfills.ts`)
+  }, lazyModules);
+
   return {
     devtool: 'inline-source-map',
     resolve: {
       extensions: ['', '.ts', '.js'],
       root: path.resolve(projectRoot, `./${sourceDir}`)
     },
     context: path.resolve(__dirname, './'),
-    entry: {
-      main: [path.resolve(projectRoot, `./${sourceDir}/main.ts`)],
-      polyfills: path.resolve(projectRoot, `./${sourceDir}/polyfills.ts`)
-    },
+    entry: entries,
     output: {
       path: path.resolve(projectRoot, './dist'),
       filename: '[name].bundle.js'
@@ -30,7 +36,16 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
             path.resolve(projectRoot, 'node_modules/rxjs'),
             path.resolve(projectRoot, 'node_modules/@angular'),
           ]
-        }
+        },
+        {
+          test: /(systemjs_component_resolver|system_js_ng_module_factory_loader)\.js$/,
+          loader: 'string-replace-loader',
+          query: {
+            search: '(lang_1(.*[\\n\\r]\\s*\\.|\\.))?(global(.*[\\n\\r]\\s*\\.|\\.))?(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import',
+            replace: 'System.import',
+            flags: 'g'
+          }
+        },
       ],
       loaders: [
         {
@@ -42,8 +57,7 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
                 useForkChecker: true,
                 tsconfig: path.resolve(projectRoot, `./${sourceDir}/tsconfig.json`)
               }
-            },
-            {
+            }, {
               loader: 'angular2-template-loader'
             }
           ],
@@ -59,13 +73,13 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
       ]
     },
     plugins: [
-      new ForkCheckerPlugin(),
+      new atl.ForkCheckerPlugin(),
       new HtmlWebpackPlugin({
         template: path.resolve(projectRoot, `./${sourceDir}/index.html`),
         chunksSortMode: 'dependency'
       }),
       new webpack.optimize.CommonsChunkPlugin({
-        name: ['polyfills']
+        name: 'polyfills'
       }),
       new webpack.optimize.CommonsChunkPlugin({
         minChunks: Infinity,
@@ -77,7 +91,35 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
         context: path.resolve(projectRoot, './public'),
         from: '**/*',
         to: path.resolve(projectRoot, './dist')
-      }])
+      }]),
+      // new SystemJSRegisterPublicModules({
+      //   // automatically configure SystemJS to load webpack chunks (defaults to true)
+      //   bundlesConfigForChunks: true,
+      //
+      //   // select which modules to expose as public modules
+      //   registerModules: [
+      //     // "default" filters provided are "local" and "public"
+      //     { filter: 'public' },
+      //     //
+      //     // // keyname allows a custom naming system for public modules
+      //     // {
+      //     //   filter: 'local',
+      //     //   keyname: 'app/[relPath]'
+      //     // },
+      //     //
+      //     // // keyname can be a function
+      //     // {
+      //     //   filter: 'public',
+      //     //   keyname: (module) => 'publicModule-' + module.id
+      //     // },
+      //     //
+      //     // // filter can also be a function
+      //     // {
+      //     //   filter: (m) => m.relPath.match(/src/),
+      //     //   keyname: 'random-naming-system-[id]'
+      //     // }
+      //   ]
+      // })
     ],
     node: {
       fs: 'empty',
@@ -88,4 +130,4 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
       setImmediate: false
     }
   }
-};
+}