fix(@ngtools/webpack): fix resolution fallback of paths-plugin

If there is a package.json we should also verify that it has a main or fesm field
to see if webpack would actually resolve it properly. Otherwise use the JavaScript
resolution.

This is a temporary fix and still has obvious limitations and issues. Namely, this
code is never run if there is only one path mapping, but that falls outside the
scope of this fix. Also, some people might have valid packages but want to resolve
to the JS file itself (which is what TypeScript does by default). These should be
fixed with a refactoring of the path plugin.

Fixes NativeScript/nativescript-dev-webpack#607

Author: hansl

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

@@ -160,15 +160,40 @@ export function resolveWithPaths(
     const jsFilePath = `${pathNoExtension}.js`;
 
     if (host.fileExists(pathNoExtension)) {
-        // This is mainly for secondary entry points
-        // ex: 'node_modules/@angular/core/testing.d.ts' -> 'node_modules/@angular/core/testing'
-        request.request = pathNoExtension;
-    } else if (host.fileExists(packageRootPath)) {
-        // Let webpack resolve the correct module format
-        request.request = pathDirName;
-    } else if (host.fileExists(jsFilePath)) {
+      // This is mainly for secondary entry points
+      // ex: 'node_modules/@angular/core/testing.d.ts' -> 'node_modules/@angular/core/testing'
+      request.request = pathNoExtension;
+    } else {
+      const packageJsonContent = host.readFile(packageRootPath);
+      let newRequest: string | undefined;
+
+      if (packageJsonContent) {
+        try {
+          const packageJson = JSON.parse(packageJsonContent);
+
+          // Let webpack resolve the correct module format IIF there is a module resolution field
+          // in the package.json. These are all official fields that Angular uses.
+          if (typeof packageJson.main == 'string'
+              || typeof packageJson.browser == 'string'
+              || typeof packageJson.module == 'string'
+              || typeof packageJson.es2015 == 'string'
+              || typeof packageJson.fesm5 == 'string'
+              || typeof packageJson.fesm2015 == 'string') {
+            newRequest = pathDirName;
+          }
+        } catch {
+          // Ignore exceptions and let it fall through (ie. if package.json file is invalid).
+        }
+      }
+
+      if (newRequest === undefined && host.fileExists(jsFilePath)) {
         // Otherwise, if there is a file with a .js extension use that
-        request.request = jsFilePath;
+        newRequest = jsFilePath;
+      }
+
+      if (newRequest !== undefined) {
+        request.request = newRequest;
+      }
     }
 
     callback(null, request);

tests/legacy-cli/e2e/assets/webpack/test-app-path-mapping/aotplugin.config.json

@@ -0,0 +1,4 @@
+{
+  "tsConfigPath": "./src/tsconfig.json",
+  "mainPath": "app/main.jit.ts"
+}

tests/legacy-cli/e2e/assets/webpack/test-app-path-mapping/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "test",
+  "license": "MIT",
+  "dependencies": {
+    "@angular/common": "^5.0.0-rc.8",
+    "@angular/compiler": "^5.0.0-rc.8",
+    "@angular/compiler-cli": "^5.0.0-rc.8",
+    "@angular/core": "^5.0.0-rc.8",
+    "@angular/http": "^5.0.0-rc.8",
+    "@angular/platform-browser": "^5.0.0-rc.8",
+    "@angular/platform-browser-dynamic": "^5.0.0-rc.8",
+    "@angular/platform-server": "^5.0.0-rc.8",
+    "@angular/router": "^5.0.0-rc.8",
+    "@ngtools/webpack": "0.0.0",
+    "core-js": "^2.4.1",
+    "rxjs": "^5.5.0",
+    "zone.js": "^0.8.14"
+  },
+  "devDependencies": {
+    "node-sass": "^4.7.0",
+    "performance-now": "^0.2.0",
+    "preprocess-loader": "^0.2.2",
+    "raw-loader": "^0.5.1",
+    "sass-loader": "^6.0.0",
+    "typescript": "~2.4.2",
+    "webpack": "~4.0.1",
+    "webpack-cli": "~2.0.9"
+  }
+}

tests/legacy-cli/e2e/assets/webpack/test-app-path-mapping/src/app/app.module.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { Component, NgModule } from '@angular/core';
+import { BrowserModule  } from '@angular/platform-browser';
+import { Foo } from 'foo/foo';
+
+console.log(Foo);  // Make sure it's used.
+
+@Component({
+  selector: 'home-view',
+  template: 'home!',
+})
+export class HomeView {}
+
+@NgModule({
+  declarations: [
+    HomeView,
+  ],
+  imports: [
+    BrowserModule,
+  ],
+  bootstrap: [HomeView],
+})
+export class AppModule { }

tests/legacy-cli/e2e/assets/webpack/test-app-path-mapping/src/app/main.jit.ts

@@ -0,0 +1,5 @@
+import 'core-js/es7/reflect';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {AppModule} from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

tests/legacy-cli/e2e/assets/webpack/test-app-path-mapping/src/foo/foo.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export class Foo {}

tests/legacy-cli/e2e/assets/webpack/test-app-path-mapping/src/foo/foo.js

@@ -0,0 +1,6 @@
+
+console.log('NGTOOLS_WEBPACK_TEST_WRONG_FILE');
+
+module.exports = {
+  Foo: () => {},  // Empty "class".
+};

tests/legacy-cli/e2e/assets/webpack/test-app-path-mapping/src/foo/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "right/foo.js"
+}

tests/legacy-cli/e2e/assets/webpack/test-app-path-mapping/src/foo/right/foo.js

@@ -0,0 +1,6 @@
+
+console.log('NGTOOLS_WEBPACK_TEST_RIGHT_FILE');
+
+module.exports = {
+  Foo: () => {},  // Empty "class".
+};

tests/legacy-cli/e2e/assets/webpack/test-app-path-mapping/src/index.html

@@ -0,0 +1,12 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <base href="">
+</head>
+<body>
+  <app-root></app-root>
+  <script src="node_modules/zone.js/dist/zone.js"></script>
+  <script src="dist/app.main.js"></script>
+</body>
+</html>