feature(@ngtools/webpack): add an option to skip code generation. (#3181)

Also use that option to replace awesome-typescript-loader.

Author: hansl

package.json

@@ -47,7 +47,6 @@
     "@angular/tsc-wrapped": "0.4.0",
     "angular2-template-loader": "^0.5.0",
     "autoprefixer": "^6.5.3",
-    "awesome-typescript-loader": "^2.2.3",
     "chalk": "^1.1.3",
     "common-tags": "^1.3.1",
     "compression-webpack-plugin": "^0.3.2",
@@ -60,6 +59,7 @@
     "ember-cli-normalize-entity-name": "^1.0.0",
     "ember-cli-preprocess-registry": "^2.0.0",
     "ember-cli-string-utils": "^1.0.0",
+    "enhanced-resolve": "^2.3.0",
     "exists-sync": "0.0.3",
     "extract-text-webpack-plugin": "^2.0.0-beta.4",
     "file-loader": "^0.8.5",
@@ -81,6 +81,7 @@
     "less": "^2.7.1",
     "less-loader": "^2.2.3",
     "lodash": "^4.11.1",
+    "magic-string": "^0.16.0",
     "markdown-it": "4.3.0",
     "markdown-it-terminal": "0.0.3",
     "minimatch": "^3.0.0",
@@ -111,6 +112,7 @@
     "script-loader": "^0.7.0",
     "semver": "^5.1.0",
     "silent-error": "^1.0.0",
+    "source-map": "^0.5.6",
     "source-map-loader": "^0.1.5",
     "sourcemap-istanbul-instrumenter-loader": "^0.2.0",
     "string-replace-loader": "^1.0.5",
@@ -151,6 +153,7 @@
     "@types/node": "^6.0.36",
     "@types/request": "0.0.30",
     "@types/rimraf": "0.0.25-alpha",
+    "@types/source-map": "^0.5.0",
     "@types/webpack": "^1.12.22-alpha",
     "chai": "^3.5.0",
     "conventional-changelog": "^1.1.0",

packages/angular-cli/models/webpack-build-test.js

@@ -2,7 +2,14 @@
 
 const path = require('path');
 const webpack = require('webpack');
-const atl = require('awesome-typescript-loader');
+const ngtools = require('@ngtools/webpack');
+
+
+const g = global;
+const webpackLoader = g['angularCliIsLocal']
+  ? g.angularCliPackages['@ngtools/webpack'].main
+  : '@ngtools/webpack';
+
 
 const getWebpackTestConfig = function (projectRoot, environment, appConfig, testConfig) {
 
@@ -48,8 +55,8 @@ const getWebpackTestConfig = function (projectRoot, environment, appConfig, test
     resolve: {
       extensions: ['.ts', '.js'],
       plugins: [
-        new atl.TsConfigPathsPlugin({
-          tsconfig: path.resolve(appRoot, appConfig.tsconfig)
+        new ngtools.PathsPlugin({
+          tsConfigPath: path.resolve(appRoot, appConfig.tsconfig)
         })
       ]
     },
@@ -74,16 +81,11 @@ const getWebpackTestConfig = function (projectRoot, environment, appConfig, test
           test: /\.ts$/,
           loaders: [
             {
-              loader: 'awesome-typescript-loader',
+              loader: webpackLoader,
               query: {
-                tsconfig: path.resolve(appRoot, appConfig.tsconfig),
-                module: 'commonjs',
-                target: 'es5',
-                forkChecker: true
+                tsConfigPath: path.resolve(appRoot, appConfig.tsconfig),
+                module: 'commonjs'
               }
-            },
-            {
-              loader: 'angular2-template-loader'
             }
           ],
           exclude: [/\.e2e\.ts$/]

packages/angular-cli/models/webpack-build-typescript.ts

@@ -1,9 +1,6 @@
 import * as path from 'path';
-import * as webpack from 'webpack';
-import {findLazyModules} from './find-lazy-modules';
 import {AotPlugin} from '@ngtools/webpack';
 
-const atl = require('awesome-typescript-loader');
 
 const g: any = global;
 const webpackLoader: string = g['angularCliIsLocal']
@@ -12,37 +9,22 @@ const webpackLoader: string = g['angularCliIsLocal']
 
 
 export const getWebpackNonAotConfigPartial = function(projectRoot: string, appConfig: any) {
-  const appRoot = path.resolve(projectRoot, appConfig.root);
-  const lazyModules = findLazyModules(appRoot);
-
   return {
-    resolve: {
-      plugins: [
-        new atl.TsConfigPathsPlugin({
-          tsconfig: path.resolve(appRoot, appConfig.tsconfig)
-        })
-      ]
-    },
     module: {
       rules: [
         {
           test: /\.ts$/,
-          loaders: [{
-            loader: 'awesome-typescript-loader',
-            query: {
-              forkChecker: true,
-              tsconfig: path.resolve(appRoot, appConfig.tsconfig)
-            }
-          }, {
-            loader: 'angular2-template-loader'
-          }],
+          loader: webpackLoader,
           exclude: [/\.(spec|e2e)\.ts$/]
         }
-      ],
+      ]
     },
     plugins: [
-      new webpack.ContextReplacementPlugin(/.*/, appRoot, lazyModules),
-      new atl.ForkCheckerPlugin(),
+      new AotPlugin({
+        tsConfigPath: path.resolve(projectRoot, appConfig.root, appConfig.tsconfig),
+        mainPath: path.join(projectRoot, appConfig.root, appConfig.main),
+        skipCodeGeneration: true
+      }),
     ]
   };
 };

packages/angular-cli/package.json

@@ -32,7 +32,6 @@
     "@angular/core": "2.2.1",
     "@ngtools/webpack": "^1.0.0",
     "angular2-template-loader": "^0.5.0",
-    "awesome-typescript-loader": "^2.2.3",
     "chalk": "^1.1.3",
     "common-tags": "^1.3.1",
     "compression-webpack-plugin": "^0.3.2",
@@ -45,6 +44,7 @@
     "ember-cli-normalize-entity-name": "^1.0.0",
     "ember-cli-preprocess-registry": "^2.0.0",
     "ember-cli-string-utils": "^1.0.0",
+    "enhanced-resolve": "^2.3.0",
     "exists-sync": "0.0.3",
     "extract-text-webpack-plugin": "^2.0.0-beta.4",
     "file-loader": "^0.8.5",

packages/webpack/README.md

@@ -35,5 +35,5 @@ The loader works with the webpack plugin to compile your TypeScript. It's import
 * `basePath`. Optional. The root to use by the compiler to resolve file paths. By default, use the `tsConfigPath` root.
 * `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`.
-* `genDir`. Optional. The output directory of the offline compiler. The files created by the offline compiler will be in a virtual file system, but the import paths might change. This can also be specified in `angularCompilerOptions`, and by default will be the same as `basePath`.
-* `typeChecking`. Optional, defaults to true. Enable type checking through your application. This will slow down compilation, but show syntactic and semantic errors in webpack.
+* `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.

packages/webpack/package.json

@@ -25,7 +25,9 @@
     "npm": ">= 3.0.0"
   },
   "dependencies": {
-    "@angular-cli/ast-tools": "^1.0.0"
+    "@angular-cli/ast-tools": "^1.0.0",
+    "magic-string": "^0.16.0",
+    "source-map": "^0.5.6"
   },
   "peerDependencies": {
     "typescript": "^2.0.2",

packages/webpack/src/compiler.ts

@@ -1,4 +1,5 @@
 import 'reflect-metadata';
 
-export * from './plugin'
-export {ngcLoader as default} from './loader'
+export * from './plugin';
+export {ngcLoader as default} from './loader';
+export {PathsPlugin} from './paths-plugin';