fix compilation of resources

Author: hansl

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

@@ -115,7 +115,7 @@ export function getWebpackCommonConfig(
 
         { test: /\.json$/, loader: 'json-loader' },
         { test: /\.(jpg|png|gif)$/, loader: 'url-loader?limit=10000' },
-        { test: /\.html$/, loader: 'raw-loader' },
+        { test: /\.html$/, loader: 'html-loader' },
 
         { test: /\.(otf|woff|ttf|svg)$/, loader: 'url?limit=10000' },
         { test: /\.woff2$/, loader: 'url?limit=10000&mimetype=font/woff2' },

packages/webpack/src/codegen.ts

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

packages/webpack/src/index.ts

@@ -1,13 +1,12 @@
-import 'reflect-metadata';
 import {NgModule} from '@angular/core';
 import * as ts from 'typescript';
 import * as ngCompiler from '@angular/compiler-cli';
 import {tsc} from '@angular/tsc-wrapped/src/tsc';
 import * as path from 'path';
 
-
-import { createCodeGenerator } from './codegen';
-import { createResolveDependenciesFromContextMap } from './utils';
+import {WebpackResourceLoader} from './resource_loader';
+import {createResolveDependenciesFromContextMap} from './utils';
+import { AngularCompilerOptions } from '@angular/tsc-wrapped';
 
 
 /**
@@ -20,154 +19,153 @@ export interface AngularWebpackPluginOptions {
   tsconfigPath?: string;
   compilerMode?: NgcCompilerMode;
   providers?: any[];
-  entryModule: string;
+  entryModule?: string;
+  project: string;
+  baseDir: string;
 }
 
 
 export class NgcWebpackPlugin {
   projectPath: string;
   rootModule: string;
   rootModuleName: string;
-  codeGeneratorFactory: any;
   reflector: ngCompiler.StaticReflector;
   reflectorHost: ngCompiler.ReflectorHost;
   program: ts.Program;
   compilerHost: ts.CompilerHost;
   compilerOptions: ts.CompilerOptions;
-  angularCompilerOptions: any;
+  angularCompilerOptions: AngularCompilerOptions;
   files: any[];
-  contextRegex = /.*/;
   lazyRoutes: any;
+  loader: any;
+
+
+  nmf: any = null;
+  cmf: any = null;
+  compiler: any = null;
+  compilation: any = null;
 
-  constructor(public options: any = {}) {
+  constructor(public options: AngularWebpackPluginOptions) {
     const tsConfig = tsc.readConfiguration(options.project, options.baseDir);
     this.compilerOptions = tsConfig.parsed.options;
     this.files = tsConfig.parsed.fileNames;
     this.angularCompilerOptions = tsConfig.ngOptions;
 
     if (!this.angularCompilerOptions) {
-      // TODO:robwormald more validation here
+      // TODO: more validation here
       throw new Error(`"angularCompilerOptions" is not set in your tsconfig file!`);
     }
     this.angularCompilerOptions.basePath = options.baseDir || process.cwd();
 
-    const [rootModule, rootNgModule] = this.angularCompilerOptions.entryModule.split('#');
+    const [rootModule, rootNgModule] = (this.angularCompilerOptions as any).entryModule.split('#');
     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);
 
-    // TODO: pick this up from ngOptions
-    const i18nOptions = {
-      i18nFile: undefined,
-      i18nFormat: undefined,
-      locale: undefined,
-      basePath: options.baseDir
-    };
-
     this.reflectorHost = new ngCompiler.ReflectorHost(
       this.program, this.compilerHost, tsConfig.ngOptions);
     this.reflector = new ngCompiler.StaticReflector(this.reflectorHost);
-    this.codeGeneratorFactory = createCodeGenerator({
-      ngcOptions: tsConfig.ngOptions,
-      i18nOptions,
-      compilerHost: this.compilerHost,
-      resourceLoader: undefined // TODO: handle styles/templatess here.
-    });
   }
 
   // registration hook for webpack plugin
   apply(compiler) {
-    compiler.plugin('context-module-factory', (cmf) => this._resolveImports(cmf));
-    compiler.plugin('make', (compiler, cb) => this._make(compiler, cb));
-  }
-
-  private _resolveImports(contextModuleFactory) {
-    contextModuleFactory.plugin('before-resolve', (request, callback) => {
-      return this._beforeResolveImports(request, callback);
-    });
-    contextModuleFactory.plugin('after-resolve', (request, callback) => {
-      return this._afterResolveImports(request, callback);
-    });
-    return contextModuleFactory;
-  }
-
-  private _beforeResolveImports(result, callback) {
-    if (!result) {
-      return callback();
-    }
-    if (this.contextRegex.test(result.request)) {
-      result.request = path.resolve(process.cwd(), 'app/ngfactory');
-      result.recursive =  true;
-      result.dependencies.forEach(d => d.critical = false);
-    }
-
-    return callback(null, result);
-  }
-
-  private _afterResolveImports(result, callback) {
-    if (!result) {
-      return callback();
-    }
-
-    if (this.contextRegex.test(result.resource)) {
-      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) => {
-        return cb(null, this.lazyRoutes);
+    this.compiler = compiler;
+    compiler.plugin('normal-module-factory', (nmf) => this.nmf = nmf);
+    compiler.plugin('context-module-factory', (cmf) => {
+      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);
       });
-    }
-    return callback(null, result);
+      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));
   }
 
   private _make(compilation, cb) {
     const rootModulePath = path.normalize(this.rootModule + '.ts');
     const rootModuleName = this.rootModuleName;
+    this.compilation = compilation;
+    this.loader = new WebpackResourceLoader(compilation);
 
-    // process the lazy routes
-    const lazyModules = this._processNgModule(rootModulePath, rootModuleName, rootModulePath)
-      .map(moduleKey => moduleKey.split('#')[0]);
     const program = ts.createProgram(this.files, this.compilerOptions, this.compilerHost);
 
-    this.codeGeneratorFactory(program)
-      .reduce((files, generatedFile) => files.concat(generatedFile), [])
-      .do(files => console.log(`ngc: generated ${files.length} files`))
-      .map(() => {
-        return lazyModules.reduce((lazyRoutes, lazyModule) => {
-          const lazyPath = `${lazyModule}.ngfactory`;
-          lazyRoutes[lazyPath] = path.join(
-            path.resolve(process.cwd(), this.angularCompilerOptions.genDir + '/app'),
-            lazyModule + '.ngfactory.ts'
+    const i18nOptions = {
+      i18nFile: undefined,
+      i18nFormat: undefined,
+      locale: undefined,
+      basePath: this.options.baseDir
+    };
+
+    // Create the Code Generator.
+    const codeGenerator = ngCompiler.CodeGenerator.create(
+      this.angularCompilerOptions,
+      i18nOptions,
+      program,
+      this.compilerHost,
+      new ngCompiler.NodeReflectorHostContext(this.compilerHost),
+      this.loader
+    );
+
+    codeGenerator.codegen()
+      .then(() => {
+        // process the lazy routes
+        const lazyModules = this._processNgModule(rootModulePath, rootModuleName, rootModulePath)
+          .map(moduleKey => moduleKey.split('#')[0]);
+        this.lazyRoutes = lazyModules.reduce((lazyRoutes, lazyModule) => {
+          lazyRoutes[`${lazyModule}.ngfactory`] = path.join(
+            path.resolve(process.cwd(), this.angularCompilerOptions.genDir),
+            'app', lazyModule + '.ngfactory.ts'
           );
           return lazyRoutes;
         }, {});
+        console.log(2, this.lazyRoutes);
       })
-      .do(lazyRouteConfig => this.lazyRoutes = lazyRouteConfig)
-      .forEach(v => console.log('codegen complete'))
-      .then(
-        _ => cb(),
-        err => cb(err)
-      );
+      .then(() => {
+        console.log(3);
+        cb()
+      }, (err) => cb(err));
   }
 
   private _processNgModule(mod: string, ngModuleName: string, containingFile: string): string[] {
     const staticSymbol = this.reflectorHost.findDeclaration(mod, ngModuleName, containingFile);
     const entryNgModuleMetadata = this.getNgModuleMetadata(staticSymbol);
     const loadChildren = this.extractLoadChildren(entryNgModuleMetadata);
 
-    const moduleChildren = loadChildren.reduce((res, lc) => {
-      const [childMoudle, childNgModule] = lc.split('#');
+    return loadChildren.reduce((res, lc) => {
+      const [childModule, childNgModule] = lc.split('#');
 
       // TODO calculate a different containingFile for relative paths
 
-      const children = this._processNgModule(childMoudle, childNgModule, containingFile);
+      const children = this._processNgModule(childModule, childNgModule, containingFile);
       return res.concat(children);
     }, loadChildren);
-
-    return moduleChildren;
   }
 
   private getNgModuleMetadata(staticSymbol: ngCompiler.StaticSymbol) {
@@ -209,32 +207,14 @@ export class NgcWebpackPlugin {
     }
     return routes.reduce((m, r) => {
       if (r.loadChildren) {
-        return m.concat([r.loadChildren]);
-
+        return m.concat(r.loadChildren);
       } else if (Array.isArray(r)) {
         return m.concat(this.collectLoadChildren(r));
-
       } else if (r.children) {
         return m.concat(this.collectLoadChildren(r.children));
-
       } else {
         return m;
       }
     }, []);
   }
 }
-
-class ParseConfigHost implements ts.ParseConfigHost {
-  useCaseSensitiveFileNames: boolean = true;
-
-  readDirectory(rootDir: string, extensions: string[], excludes: string[], includes: string[]) {
-    return ts.sys.readDirectory(rootDir, extensions, excludes, includes);
-  }
-  /**
-    * Gets a value indicating whether the specified path exists and is a file.
-    * @param path The path to test.
-    */
-  fileExists(path: string): boolean {
-    return ts.sys.fileExists(path);
-  }
-}