fix(@ngtools/webpack): ensure webpack handles module resolution

Author: clydin

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

@@ -39,18 +39,66 @@ export function resolveWithPaths(
     cache
   );
 
-  let moduleFilePath = moduleResolver.resolvedModule
-                    && moduleResolver.resolvedModule.resolvedFileName;
-
-  // If TypeScript gives us a .d.ts it's probably a node module and we need to let webpack
-  // do the resolution.
-  if (moduleFilePath) {
-    moduleFilePath = moduleFilePath.replace(/\.d\.ts$/, '.js');
-    if (host.fileExists(moduleFilePath)) {
-      request.request = moduleFilePath;
+  const moduleFilePath = moduleResolver.resolvedModule
+                         && moduleResolver.resolvedModule.resolvedFileName;
+
+  // If there is no result, let webpack try to resolve
+  if (!moduleFilePath) {
+    callback(null, request);
+    return;
+  }
+
+  // If TypeScript gives us a `.d.ts`, it is probably a node module
+  if (moduleFilePath.endsWith('.d.ts')) {
+    // If in a package, let webpack resolve the package
+    const packageRootPath = path.join(path.dirname(moduleFilePath), 'package.json');
+    if (!host.fileExists(packageRootPath)) {
+      // Otherwise, if there is a file with a .js extension use that
+      const jsFilePath = moduleFilePath.slice(0, -5) + '.js';
+      if (host.fileExists(jsFilePath)) {
+        request.request = jsFilePath;
+      }
+    }
+
+    callback(null, request);
+    return;
+  }
+
+  // TypeScript gives `index.ts` and the request is not for the specific file,
+  // check if it is a module
+  const requestFilePath = path.basename(request.request);
+  if (path.basename(moduleFilePath) === 'index.ts'
+      && requestFilePath !== 'index' && requestFilePath !== 'index.ts') {
+    const packageRootPath = path.join(path.dirname(moduleFilePath), 'package.json');
+    if (host.fileExists(packageRootPath)) {
+      // potential module request
+      let isPathMapped = false;
+      if (compilerOptions.paths) {
+        // check if any path mapping rules are relevant
+        isPathMapped = Object.keys(compilerOptions.paths)
+          .some(pattern => {
+            // can only contain zero or one
+            const starIndex = pattern.indexOf('*');
+            if (starIndex === -1) {
+              return pattern === request.request;
+            } else if (starIndex === pattern.length - 1) {
+              return request.request.startsWith(pattern.slice(0, -1));
+            } else {
+              const [prefix, suffix] = pattern.split('*');
+              return request.request.startsWith(prefix) && request.request.endsWith(suffix);
+            }
+          });
+      }
+      if (!isPathMapped) {
+        // path mapping not involved, let webpack handle the module request
+        request.request = path.dirname(moduleFilePath);
+        callback(null, request);
+        return;
+      }
     }
   }
 
+  request.request = moduleFilePath;
   callback(null, request);
 }
 

tests/e2e/tests/misc/module-resolution.ts

@@ -1,13 +1,49 @@
 import { appendToFile, prependToFile } from '../../utils/fs';
 import { ng, silentNpm } from '../../utils/process';
+import { updateJsonFile } from '../../utils/project';
+import { expectToFail } from '../../utils/utils';
 
 
 export default async function () {
-  await silentNpm('install', 'firebase@3.7.8');
-
   await prependToFile('src/app/app.module.ts', 'import * as firebase from \'firebase\';');
   await appendToFile('src/app/app.module.ts', 'firebase.initializeApp({});');
 
-  await ng('build');
+  await silentNpm('install', 'firebase@3.7.8');
   await ng('build', '--aot');
+  await ng('test', '--single-run');
+
+  await silentNpm('install', 'firebase@4.9.0');
+  await ng('build', '--aot');
+  await ng('test', '--single-run');
+
+  // await prependToFile('src/app/app.module.ts', 'import * as firebase from \'firebase\';');
+  // await appendToFile('src/app/app.module.ts', 'firebase.initializeApp({});');
+  // await ng('build');
+
+  await updateJsonFile('src/tsconfig.app.json', tsconfig => {
+    tsconfig.compilerOptions.paths = {};
+  });
+  await ng('build');
+
+  await updateJsonFile('src/tsconfig.app.json', tsconfig => {
+    tsconfig.compilerOptions.paths = {
+      '@app/*': ['*'],
+      '@lib/*/test': ['*/test'],
+    };
+  });
+  await ng('build');
+
+  await updateJsonFile('src/tsconfig.app.json', tsconfig => {
+    tsconfig.compilerOptions.paths = {
+      '@firebase/polyfill': ['@firebase/polyfill/index.ts'],
+    };
+  });
+  await expectToFail(() => ng('build'));
+
+  await updateJsonFile('src/tsconfig.app.json', tsconfig => {
+    tsconfig.compilerOptions.paths = {
+      '@firebase/polyfill*': ['@firebase/polyfill/index.ts'],
+    };
+  });
+  await expectToFail(() => ng('build'));
 }