feat(@ngtools/webpack): fix paths mapping support

This is a similar version of angular#5033. Reverted in angular#6463 because of issue angular#6451.

This is a feature because we do not want it in 1.3.0

Author: hansl

packages/@ngtools/webpack/src/paths-plugin.ts

@@ -1,44 +1,47 @@
 import * as path from 'path';
 import * as ts from 'typescript';
-import {Request, ResolverPlugin, Callback, Tapable} from './webpack';
+import {
+  ResolverPlugin,
+  Callback,
+  Tapable,
+  NormalModuleFactory,
+  NormalModuleFactoryRequest,
+} from './webpack';
 
 
 const ModulesInRootPlugin: new (a: string, b: string, c: string) => ResolverPlugin
   = require('enhanced-resolve/lib/ModulesInRootPlugin');
 
-interface CreateInnerCallback {
-  (callback: Callback<any>,
-   options: Callback<any>,
-   message?: string,
-   messageOptional?: string): Callback<any>;
+export interface Mapping {
+  onlyModule: boolean;
+  alias: string;
+  aliasPattern: RegExp;
+  target: string;
 }
 
-const createInnerCallback: CreateInnerCallback
-  = require('enhanced-resolve/lib/createInnerCallback');
-const getInnerRequest: (resolver: ResolverPlugin, request: Request) => string
-  = require('enhanced-resolve/lib/getInnerRequest');
-
 
 function escapeRegExp(str: string): string {
-  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+  return str.replace(/[\-\[\]\/{}()*+?.\\^$|]/g, '\\$&');
 }
 
 
 export interface PathsPluginOptions {
+  nmf: NormalModuleFactory;
   tsConfigPath: string;
   compilerOptions?: ts.CompilerOptions;
   compilerHost?: ts.CompilerHost;
 }
 
 export class PathsPlugin implements Tapable {
+  private _nmf: NormalModuleFactory;
   private _tsConfigPath: string;
   private _compilerOptions: ts.CompilerOptions;
   private _host: ts.CompilerHost;
 
   source: string;
   target: string;
 
-  private mappings: any;
+  private _mappings: Mapping[];
 
   private _absoluteBaseUrl: string;
 
@@ -76,6 +79,7 @@ export class PathsPlugin implements Tapable {
       this._host = ts.createCompilerHost(this._compilerOptions, false);
     }
 
+    this._nmf = options.nmf;
     this.source = 'described-resolve';
     this.target = 'resolve';
 
@@ -84,7 +88,7 @@ export class PathsPlugin implements Tapable {
       this._compilerOptions.baseUrl || '.'
     );
 
-    this.mappings = [];
+    this._mappings = [];
     let paths = this._compilerOptions.paths || {};
     Object.keys(paths).forEach(alias => {
       let onlyModule = alias.indexOf('*') === -1;
@@ -99,7 +103,7 @@ export class PathsPlugin implements Tapable {
           aliasPattern = new RegExp(`^${withStarCapturing}`);
         }
 
-        this.mappings.push({
+        this._mappings.push({
           onlyModule,
           alias,
           aliasPattern,
@@ -116,59 +120,35 @@ export class PathsPlugin implements Tapable {
       resolver.apply(new ModulesInRootPlugin('module', this._absoluteBaseUrl, 'resolve'));
     }
 
-    this.mappings.forEach((mapping: any) => {
-      resolver.plugin(this.source, this.createPlugin(resolver, mapping));
-    });
-  }
+    this._nmf.plugin('before-resolve', (request: NormalModuleFactoryRequest,
+                                        callback: Callback<any>) => {
+      for (let mapping of this._mappings) {
+        const match = request.request.match(mapping.aliasPattern);
+        if (!match) { continue; }
 
-  resolve(resolver: ResolverPlugin, mapping: any, request: any, callback: Callback<any>): any {
-    let innerRequest = getInnerRequest(resolver, request);
-    if (!innerRequest) {
-      return callback();
-    }
-
-    let match = innerRequest.match(mapping.aliasPattern);
-    if (!match) {
-      return callback();
-    }
-
-    let newRequestStr = mapping.target;
-    if (!mapping.onlyModule) {
-      newRequestStr = newRequestStr.replace('*', match[1]);
-    }
-    if (newRequestStr[0] === '.') {
-      newRequestStr = path.resolve(this._absoluteBaseUrl, newRequestStr);
-    }
-
-    let newRequest = Object.assign({}, request, {
-      request: newRequestStr
-    }) as Request;
-
-    return resolver.doResolve(
-      this.target,
-      newRequest,
-      `aliased with mapping '${innerRequest}': '${mapping.alias}' to '${newRequestStr}'`,
-      createInnerCallback(
-        function(err, result) {
-          if (arguments.length > 0) {
-            return callback(err, result);
-          }
-
-          // don't allow other aliasing or raw request
-          callback(null, null);
-        },
-        callback
-      )
-    );
-  }
+        let newRequestStr = mapping.target;
+        if (!mapping.onlyModule) {
+          newRequestStr = newRequestStr.replace('*', match[1]);
+        }
 
-  createPlugin(resolver: ResolverPlugin, mapping: any): any {
-    return (request: any, callback: Callback<any>) => {
-      try {
-        this.resolve(resolver, mapping, request, callback);
-      } catch (err) {
-        callback(err);
+        const moduleResolver: ts.ResolvedModuleWithFailedLookupLocations =
+          ts.nodeModuleNameResolver(
+            newRequestStr,
+            this._absoluteBaseUrl,
+            this._compilerOptions,
+            this._host
+          );
+        const moduleFilePath = moduleResolver.resolvedModule ?
+          moduleResolver.resolvedModule.resolvedFileName : '';
+
+        if (moduleFilePath) {
+          return callback(null, Object.assign({}, request, {
+            request: moduleFilePath.includes('.d.ts') ? newRequestStr : moduleFilePath
+          }));
+        }
       }
-    };
+
+      return callback(null, request);
+    });
   }
 }

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

@@ -369,7 +369,11 @@ export class AotPlugin implements Tapable {
           cb();
         }
       });
+    });
+
+    compiler.plugin('normal-module-factory', (nmf: any) => {
       compiler.resolvers.normal.apply(new PathsPlugin({
+        nmf,
         tsConfigPath: this._tsConfigPath,
         compilerOptions: this._compilerOptions,
         compilerHost: this._compilerHost

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

@@ -39,6 +39,16 @@ export interface NormalModule {
   resource: string;
 }
 
+export interface NormalModuleFactory {
+  plugin(event: string,
+         callback: (data: NormalModuleFactoryRequest, callback: Callback<any>) => void): any;
+}
+
+export interface NormalModuleFactoryRequest {
+  request: string;
+  contextInfo: { issuer: string };
+}
+
 export interface LoaderContext {
   _module: NormalModule;
 

tests/e2e/setup/010-build.ts

@@ -13,24 +13,6 @@ export default function() {
   }
 
   return npm('run', 'build', '--', '--local')
-    .then(() => console.log('Updating package.json from dist...'))
-    .then(() => Promise.all(Object.keys(packages).map(pkgName => {
-      return updateJsonFile(join(packages[pkgName].dist, 'package.json'), json => {
-        Object.keys(packages).forEach(pkgName => {
-          if (!json['dependencies']) {
-            json['dependencies'] = {};
-          }
-          if (!json['devDependencies']) {
-            json['devDependencies'] = {};
-          }
-          if (json['dependencies'] && pkgName in json['dependencies']) {
-            json['dependencies'][pkgName] = packages[pkgName].dist;
-          } else if (json['devDependencies'] && pkgName in json['devDependencies']) {
-            json['devDependencies'][pkgName] = packages[pkgName].dist;
-          }
-        });
-      });
-    })))
     .then(() => {
       if (!argv.nightly && !argv['ng-sha']) {
         return;

tests/e2e/tests/build/ts-paths.ts

@@ -13,24 +13,33 @@ export default function() {
       ],
       '@shared/*': [
         'app/shared/*'
+      ],
+      '*': [
+        '*',
+        'app/shared/*'
       ]
     };
   })
   .then(() => createDir('src/app/shared'))
   .then(() => writeMultipleFiles({
+    'src/meaning-too.ts': 'export var meaning = 42;',
     'src/app/shared/meaning.ts': 'export var meaning = 42;',
     'src/app/shared/index.ts': `export * from './meaning'`
   }))
   .then(() => appendToFile('src/app/app.component.ts', stripIndents`
     import { meaning } from 'app/shared/meaning';
     import { meaning as meaning2 } from '@shared';
     import { meaning as meaning3 } from '@shared/meaning';
+    import { meaning as meaning4 } from 'meaning';
+    import { meaning as meaning5 } from 'meaning-too';
 
     // need to use imports otherwise they are ignored and
     // no error is outputted, even if baseUrl/paths don't work
     console.log(meaning)
     console.log(meaning2)
     console.log(meaning3)
+    console.log(meaning4)
+    console.log(meaning5)
   `))
   .then(() => ng('build'));
 }