Fix everything. it works.

Author: hansl

packages/webpack/src/loader.ts

@@ -1,12 +1,37 @@
 import * as ts from 'typescript';
+import {NgcWebpackPlugin} from './plugin';
 
 
 // Super simple TS transpiler loader for testing / isolated usage. does not type check!
-export function ngcLoader(sourceFile: string) {
-  return ts.transpileModule(sourceFile, {
-    compilerOptions: {
-      target: ts.ScriptTarget.ES5,
-      module: ts.ModuleKind.ES2015,
-    }
-  }).outputText;
+export function ngcLoader(source: string) {
+  const plugin = this._compilation._ngToolsWebpackPluginInstance as NgcWebpackPlugin;
+  if (plugin && plugin instanceof NgcWebpackPlugin) {
+    const cb: any = this.async();
+
+    plugin.done.then(() => {
+      const result = ts.transpileModule(source, {
+        compilerOptions: {
+          target: ts.ScriptTarget.ES5,
+          module: ts.ModuleKind.ES2015,
+        }
+      });
+
+      if (result.diagnostics && result.diagnostics.length) {
+        let message = '';
+        result.diagnostics.forEach(d => {
+          message += d.messageText + '\n';
+        });
+        cb(new Error(message));
+      }
+
+      cb(null, result.outputText, result.sourceMapText ? JSON.parse(result.sourceMapText) : null);
+    });
+  } else {
+    return ts.transpileModule(source, {
+      compilerOptions: {
+        target: ts.ScriptTarget.ES5,
+        module: ts.ModuleKind.ES2015,
+      }
+    }).outputText;
+  }
 }

packages/webpack/src/plugin.ts

@@ -1,9 +1,11 @@
-import {NgModule} from '@angular/core';
 import * as ts from 'typescript';
+import * as path from 'path';
+
+import {NgModule} from '@angular/core';
 import * as ngCompiler from '@angular/compiler-cli';
 import {tsc} from '@angular/tsc-wrapped/src/tsc';
-import * as path from 'path';
 
+import {patchReflectorHost} from './reflector_host';
 import {WebpackResourceLoader} from './resource_loader';
 import {createResolveDependenciesFromContextMap} from './utils';
 import { AngularCompilerOptions } from '@angular/tsc-wrapped';
@@ -13,7 +15,10 @@ import { AngularCompilerOptions } from '@angular/tsc-wrapped';
  * Option Constants
  */
 export type NgcCompilerMode = 'aot' | 'jit'
-
+export interface EmittedFile {
+  sourceMap: any,
+  source: string
+}
 
 export interface AngularWebpackPluginOptions {
   tsconfigPath?: string;
@@ -22,6 +27,8 @@ export interface AngularWebpackPluginOptions {
   entryModule?: string;
   project: string;
   baseDir: string;
+  basePath: string;
+  genDir: string;
 }
 
 
@@ -39,6 +46,7 @@ export class NgcWebpackPlugin {
   lazyRoutes: any;
   loader: any;
 
+  done: Promise<void>;
 
   nmf: any = null;
   cmf: any = null;
@@ -61,12 +69,9 @@ export class NgcWebpackPlugin {
     this.projectPath = options.project;
     this.rootModule = rootModule;
     this.rootModuleName = rootNgModule;
-
     this.compilerHost = ts.createCompilerHost(this.compilerOptions, true);
     this.program = ts.createProgram(this.files, this.compilerOptions, this.compilerHost);
-
-    this.reflectorHost = new ngCompiler.ReflectorHost(
-      this.program, this.compilerHost, tsConfig.ngOptions);
+    this.reflectorHost = new ngCompiler.ReflectorHost(this.program, this.compilerHost, this.angularCompilerOptions);
     this.reflector = new ngCompiler.StaticReflector(this.reflectorHost);
   }
 
@@ -78,43 +83,50 @@ export class NgcWebpackPlugin {
       this.cmf = cmf;
       cmf.plugin('before-resolve', (request, callback) => {
         if (!request) {
-          console.log(11);
           return callback();
         }
 
         request.request = path.resolve(process.cwd(), 'app/ngfactory');
         request.recursive =  true;
         request.dependencies.forEach(d => d.critical = false);
-        console.log(1);
         return callback(null, request);
       });
       cmf.plugin('after-resolve', (result, callback) => {
         if (!result) {
-          console.log(10);
           return callback();
         }
 
         result.resource = path.resolve(process.cwd(), this.angularCompilerOptions.genDir + '/app');
         result.recursive = true;
         result.dependencies.forEach(d => d.critical = false);
         result.resolveDependencies = createResolveDependenciesFromContextMap((fs, cb) => {
-          console.log(4);
           return cb(null, this.lazyRoutes);
         });
 
         return callback(null, result);
       });
     });
-    compiler.plugin('make', (compiler, cb) => this._make(compiler, cb));
+
+    compiler.plugin('make', (compilation, cb) => this._make(compilation, cb));
+    compiler.plugin('after-emit', (compilation, cb) => {
+      this.done = null;
+      this.compilation = null;
+      compilation._ngToolsWebpackPluginInstance = null;
+      cb();
+    });
   }
 
   private _make(compilation, cb) {
     const rootModulePath = path.normalize(this.rootModule + '.ts');
     const rootModuleName = this.rootModuleName;
     this.compilation = compilation;
-    this.loader = new WebpackResourceLoader(compilation);
 
-    const program = ts.createProgram(this.files, this.compilerOptions, this.compilerHost);
+    if (this.compilation._ngToolsWebpackPluginInstance) {
+      cb(new Error('A ngtools/webpack plugin already exist for this compilation.'));
+    }
+    this.compilation._ngToolsWebpackPluginInstance = this;
+
+    this.loader = new WebpackResourceLoader(compilation);
 
     const i18nOptions = {
       i18nFile: undefined,
@@ -127,13 +139,16 @@ export class NgcWebpackPlugin {
     const codeGenerator = ngCompiler.CodeGenerator.create(
       this.angularCompilerOptions,
       i18nOptions,
-      program,
+      this.program,
       this.compilerHost,
       new ngCompiler.NodeReflectorHostContext(this.compilerHost),
       this.loader
     );
 
-    codeGenerator.codegen()
+    // We need to temporarily patch the CodeGenerator until either it's patched or allows us
+    // to pass in our own ReflectorHost.
+    patchReflectorHost(codeGenerator);
+    this.done = codeGenerator.codegen()
       .then(() => {
         // process the lazy routes
         const lazyModules = this._processNgModule(rootModulePath, rootModuleName, rootModulePath)
@@ -145,12 +160,8 @@ export class NgcWebpackPlugin {
           );
           return lazyRoutes;
         }, {});
-        console.log(2, this.lazyRoutes);
       })
-      .then(() => {
-        console.log(3);
-        cb()
-      }, (err) => cb(err));
+      .then(() => cb(), (err) => cb(err));
   }
 
   private _processNgModule(mod: string, ngModuleName: string, containingFile: string): string[] {

packages/webpack/src/reflector_host.ts

@@ -0,0 +1,26 @@
+import {CodeGenerator} from '@angular/compiler-cli';
+
+
+/**
+ * Patch the CodeGenerator instance to use a custom reflector host.
+ */
+export function patchReflectorHost(codeGenerator: CodeGenerator) {
+  const reflectorHost = (codeGenerator as any).reflectorHost;
+  const oldGIP = reflectorHost.getImportPath;
+
+  reflectorHost.getImportPath = function(containingFile: string, importedFile: string): string {
+    // Hack together SCSS and LESS files URLs so that they match what the default ReflectorHost
+    // is expected. We only do that for shimmed styles.
+    const m = importedFile.match(/(.*)(\..+)(\.shim)(\..+)/);
+    if (!m) {
+      return oldGIP.call(this, containingFile, importedFile);
+    }
+
+    // We call the original, with `css` in its name instead of the extension, and replace the
+    // extension from the result.
+    const [, baseDirAndName, styleExt, shim, ext] = m;
+    const result = oldGIP.call(this, containingFile, baseDirAndName + '.css' + shim + ext);
+
+    return result.replace(/\.css\./, styleExt + '.');
+  }
+}

packages/webpack/src/resource_loader.ts

@@ -13,13 +13,11 @@ const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
 
 
 export class WebpackResourceLoader implements ResourceLoader {
-  private _compilerName: string;
   private _context: string;
   private _uniqueId = 0;
 
   constructor(private _compilation: any) {
     this._context = _compilation.context;
-    this._compiler =
   }
 
   private _compile(filePath: string, content: string): Promise<any> {

tests/e2e/assets/webpack/test-app/tsconfig.json

@@ -4,7 +4,8 @@
     "moduleResolution": "node",
     "target": "es5",
     "noImplicitAny": false,
-    "sourceMap": false,
+    "sourceMap": true,
+    "mapRoot": "",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "lib": [