feat(@ngtools/webpack): support webpack 4 plugin system

BREAKING CHANGE:
Webpack ^4.0.0 is now required as a peer dependency.

Author: clydin

package.json

@@ -68,7 +68,6 @@
     "license-webpack-plugin": "^1.1.2",
     "loader-utils": "^1.1.0",
     "lodash": "^4.11.1",
-    "magic-string": "^0.22.3",
     "memory-fs": "^0.4.1",
     "minimatch": "^3.0.4",
     "node-modules-path": "^1.0.0",
@@ -86,7 +85,6 @@
     "sass-loader": "^6.0.6",
     "semver": "^5.3.0",
     "silent-error": "^1.0.0",
-    "source-map": "^0.5.6",
     "source-map-support": "^0.4.1",
     "style-loader": "^0.20.2",
     "stylus": "^0.54.5",

packages/@ngtools/webpack/README.md

@@ -1,6 +1,6 @@
 # Angular Ahead-of-Time Webpack Plugin
 
-Webpack plugin that AoT compiles your Angular components and modules.
+Webpack 4.0 plugin that AoT compiles your Angular components and modules.
 
 ## Usage
 
@@ -31,31 +31,6 @@ exports = { /* ... */
 }
 ```
 
-Angular version 2 and 4, use `AotPlugin`:
-
-```typescript
-import {AotPlugin} from '@ngtools/webpack'
-
-exports = { /* ... */
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        loader: '@ngtools/webpack'
-      }
-    ]
-  },
-
-  plugins: [
-    new AotPlugin({
-      tsConfigPath: 'path/to/tsconfig.json',
-      entryModule: 'path/to/app.module#AppModule',
-      sourceMap: true
-    })
-  ]
-}
-```
-
 The loader works with webpack plugin to compile your TypeScript. It's important to include both, and to not include any other TypeScript compiler loader.
 
 ## Options
@@ -65,8 +40,6 @@ The loader works with webpack plugin to compile your TypeScript. It's important
 * `entryModule`. Optional if specified in `angularCompilerOptions`. The path and classname of the main application module. This follows the format `path/to/file#ClassName`.
 * `mainPath`. Optional if `entryModule` is specified. The `main.ts` file containing the bootstrap code. The plugin will use AST to determine the `entryModule`.
 * `skipCodeGeneration`. Optional, defaults to false. Disable code generation and do not refactor the code to bootstrap. This replaces `templateUrl: "string"` with `template: require("string")` (and similar for styles) to allow for webpack to properly link the resources.
-* `typeChecking`. Optional, defaults to true. Enable type checking through your application. This will slow down compilation, but show syntactic and semantic errors in webpack. Only available in `AotPlugin`.
-* `exclude`. Optional. Extra files to exclude from TypeScript compilation. Not supported with `AngularCompilerPlugin`.
 * `sourceMap`. Optional. Include sourcemaps.
 * `compilerOptions`. Optional. Override options in `tsconfig.json`.
 

packages/@ngtools/webpack/package.json

@@ -27,12 +27,10 @@
   "dependencies": {
     "tree-kill": "^1.0.0",
     "chalk": "~2.2.0",
-    "magic-string": "^0.22.3",
     "semver": "^5.3.0",
-    "source-map": "^0.5.6",
     "webpack-sources": "^1.1.0"
   },
   "peerDependencies": {
-    "webpack": "^2.2.0 || ^3.0.0 || ^4.0.0-beta.0 || ^4.0.0"
+    "webpack": "^4.0.0"
   }
 }

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

@@ -547,14 +547,14 @@ export class AngularCompilerPlugin {
   apply(compiler: any) {
     // Decorate inputFileSystem to serve contents of CompilerHost.
     // Use decorated inputFileSystem in watchFileSystem.
-    compiler.plugin('environment', () => {
+    compiler.hooks.environment.tap('angular-compiler', () => {
       compiler.inputFileSystem = new VirtualFileSystemDecorator(
         compiler.inputFileSystem, this._compilerHost);
       compiler.watchFileSystem = new VirtualWatchFileSystemDecorator(compiler.inputFileSystem);
     });
 
     // Add lazy modules to the context module for @angular/core
-    compiler.plugin('context-module-factory', (cmf: any) => {
+    compiler.hooks.contextModuleFactory.tap('angular-compiler', (cmf: any) => {
       const angularCorePackagePath = require.resolve('@angular/core/package.json');
       const angularCorePackageJson = require(angularCorePackagePath);
       const angularCoreModulePath = path.resolve(path.dirname(angularCorePackagePath),
@@ -572,7 +572,8 @@ export class AngularCompilerPlugin {
         angularCoreEs2015Dir = path.dirname(angularCoreEs2015Path).split(/node_modules/).pop();
       }
 
-      cmf.plugin('after-resolve', (result: any, callback: (err?: any, request?: any) => void) => {
+      cmf.hooks.afterResolve.tapAsync('angular-compiler',
+      (result: any, callback: (err?: any, request?: any) => void) => {
         if (!result) {
           return callback();
         }
@@ -618,33 +619,36 @@ export class AngularCompilerPlugin {
     });
 
     // Create and destroy forked type checker on watch mode.
-    compiler.plugin('watch-run', (_compiler: any, callback: any) => {
+    compiler.hooks.watchRun.tapAsync('angular-compiler', (_compiler: any, callback: any) => {
       if (this._forkTypeChecker && !this._typeCheckerProcess) {
         this._createForkedTypeChecker();
       }
       callback();
     });
-    compiler.plugin('watch-close', () => this._killForkedTypeChecker());
+    compiler.hooks.watchClose.tap('angular-compiler', () => this._killForkedTypeChecker());
 
     // Remake the plugin on each compilation.
-    compiler.plugin('make', (compilation: any, cb: any) => this._make(compilation, cb));
-    compiler.plugin('invalid', () => this._firstRun = false);
-    compiler.plugin('after-emit', (compilation: any, cb: any) => {
+    compiler.hooks.make.tapAsync(
+      'angular-compiler',
+      (compilation: any, cb: any) => this._make(compilation, cb),
+    );
+    compiler.hooks.invalid.tap('angular-compiler', () => this._firstRun = false);
+    compiler.hooks.afterEmit.tapAsync('angular-compiler', (compilation: any, cb: any) => {
       compilation._ngToolsWebpackPluginInstance = null;
       cb();
     });
-    compiler.plugin('done', () => {
+    compiler.hooks.done.tap('angular-compiler', () => {
       this._donePromise = null;
     });
 
-    compiler.plugin('after-resolvers', (compiler: any) => {
-      compiler.plugin('normal-module-factory', (nmf: any) => {
+    compiler.hooks.afterResolvers.tap('angular-compiler', (compiler: any) => {
+      compiler.hooks.normalModuleFactory.tap('angular-compiler', (nmf: any) => {
         // Virtual file system.
         // TODO: consider if it's better to remove this plugin and instead make it wait on the
         // VirtualFileSystemDecorator.
         // Wait for the plugin to be done when requesting `.ts` files directly (entry points), or
         // when the issuer is a `.ts` or `.ngfactory.js` file.
-        nmf.plugin('before-resolve', (request: any, callback: any) => {
+        nmf.hooks.beforeResolve.tapAsync('angular-compiler', (request: any, callback: any) => {
           if (this.done && (request.request.endsWith('.ts')
               || (request.context.issuer && /\.ts|ngfactory\.js$/.test(request.context.issuer)))) {
             this.done.then(() => callback(null, request), () => callback(null, request));
@@ -655,8 +659,8 @@ export class AngularCompilerPlugin {
       });
     });
 
-    compiler.plugin('normal-module-factory', (nmf: any) => {
-      nmf.plugin('before-resolve', (request: any, callback: any) => {
+    compiler.hooks.normalModuleFactory.tap('angular-compiler', (nmf: any) => {
+      nmf.hooks.beforeResolve.tapAsync('angular-compiler', (request: any, callback: any) => {
         resolveWithPaths(
           request,
           callback,

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

@@ -19,8 +19,6 @@ export interface ExtractI18nPluginOptions {
 export class ExtractI18nPlugin implements Tapable {
   private _resourceLoader: WebpackResourceLoader;
 
-  private _compilation: any = null;
-
   private _tsConfigPath: string;
   private _basePath: string;
   private _rootFilePath: string[];
@@ -137,27 +135,28 @@ export class ExtractI18nPlugin implements Tapable {
   }
 
   apply(compiler: any) {
-    compiler.plugin('make', (compilation: any, cb: any) => this._make(compilation, cb));
+    compiler.hooks.make.tapAsync(
+      'extract-i8n',
+      (compilation: any, cb: any) => this._make(compilation, cb)
+    );
 
-    compiler.plugin('after-emit', (compilation: any, cb: any) => {
-      this._compilation = null;
+    compiler.hooks.afterEmit.tapAsync('extract-i8n', (compilation: any, cb: any) => {
       compilation._ngToolsWebpackXi18nPluginInstance = null;
       cb();
     });
   }
 
   private _make(compilation: any, cb: (err?: any, request?: any) => void) {
-    this._compilation = compilation;
-    if (this._compilation._ngToolsWebpackXi18nPluginInstance) {
+    if (compilation._ngToolsWebpackXi18nPluginInstance) {
       return cb(new Error('An @ngtools/webpack xi18n plugin already exist for ' +
         'this compilation.'));
     }
-    if (!this._compilation._ngToolsWebpackPluginInstance) {
+    if (!compilation._ngToolsWebpackPluginInstance) {
       return cb(new Error('An @ngtools/webpack aot plugin does not exists ' +
         'for this compilation'));
     }
 
-    this._compilation._ngToolsWebpackXi18nPluginInstance = this;
+    compilation._ngToolsWebpackXi18nPluginInstance = this;
 
     this._resourceLoader.update(compilation);
 
@@ -177,7 +176,7 @@ export class ExtractI18nPlugin implements Tapable {
         });
       })
       .then(() => cb(), (err: any) => {
-        this._compilation.errors.push(err);
+        compilation.errors.push(err);
         cb(err);
       });
 

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

@@ -1,7 +1,6 @@
 import {dirname, join} from 'path';
 import * as ts from 'typescript';
-
-import {TypeScriptFileRefactor} from './refactor';
+import { findAstNodes, resolve } from './refactor';
 
 
 function _getContentOfKeyLiteral(_source: ts.SourceFile, node: ts.Node): string | null {
@@ -20,23 +19,41 @@ export interface LazyRouteMap {
 }
 
 
-export function findLazyRoutes(filePath: string,
-                               host: ts.CompilerHost,
-                               program?: ts.Program,
-                               compilerOptions?: ts.CompilerOptions): LazyRouteMap {
-  const refactor = new TypeScriptFileRefactor(filePath, host, program);
+export function findLazyRoutes(
+  filePath: string,
+  host: ts.CompilerHost,
+  program?: ts.Program,
+  compilerOptions?: ts.CompilerOptions
+): LazyRouteMap {
+  if (!compilerOptions && program) {
+    compilerOptions = program.getCompilerOptions();
+  }
+  const fileName = resolve(filePath, host, compilerOptions).replace(/\\/g, '/');
+  let sourceFile: ts.SourceFile;
+  if (program) {
+    sourceFile = program.getSourceFile(fileName);
+  }
+  if (!sourceFile) {
+    sourceFile = ts.createSourceFile(
+      fileName,
+      host.readFile(fileName),
+      ts.ScriptTarget.Latest,
+      true,
+    );
+  }
+  if (!sourceFile) {
+    throw new Error(`Source file not found: '${fileName}'.`);
+  }
 
-  return refactor
-    // Find all object literals in the file.
-    .findAstNodes(null, ts.SyntaxKind.ObjectLiteralExpression, true)
+  return findAstNodes(null, sourceFile, ts.SyntaxKind.ObjectLiteralExpression, true)
     // Get all their property assignments.
     .map((node: ts.ObjectLiteralExpression) => {
-      return refactor.findAstNodes(node, ts.SyntaxKind.PropertyAssignment, false);
+      return findAstNodes(node, sourceFile, ts.SyntaxKind.PropertyAssignment, false);
     })
     // Take all `loadChildren` elements.
     .reduce((acc: ts.PropertyAssignment[], props: ts.PropertyAssignment[]) => {
       return acc.concat(props.filter(literal => {
-        return _getContentOfKeyLiteral(refactor.sourceFile, literal.name) == 'loadChildren';
+        return _getContentOfKeyLiteral(sourceFile, literal.name) == 'loadChildren';
       }));
     }, [])
     // Get only string values.