fix(common): add resolveJsonModule to ts-node compilerOptions (fixes #816)

examples/custom-webpack/full-cycle-app/angular.json

@@ -83,6 +83,23 @@
                   "plugins": "prepend"
                 }
               }
+            },
+            "json-import-ts": {
+              "customWebpackConfig": {
+                "path": "./extra-webpack.config.json-import.ts",
+                "mergeRules": {
+                  "plugins": "prepend"
+                }
+              }
+            },
+            "ts-config-json-import": {
+              "tsConfig": "tsconfig.node-resolution.json",
+              "customWebpackConfig": {
+                "path": "./extra-webpack.config.json-import.ts",
+                "mergeRules": {
+                  "plugins": "prepend"
+                }
+              }
             }
           }
         },

examples/custom-webpack/full-cycle-app/extra-webpack.config.json-import.ts

@@ -0,0 +1,13 @@
+import { Configuration } from 'webpack';
+// Importing a JSON file from a TypeScript webpack config.
+// Requires resolveJsonModule: true to be set — either in the user's tsconfig or
+// injected by the builder's ts-node registration.
+// When moduleResolution is 'node' and resolveJsonModule is absent, ts-node throws TS2732.
+// Regression test for: https://github.com/just-jeb/angular-builders/issues/816
+import * as pkg from './package.json';
+
+const _name: string = (pkg as any).name;
+
+export default {
+  plugins: [],
+} as Configuration;

examples/custom-webpack/full-cycle-app/tsconfig.node-resolution.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "moduleResolution": "node"
+  }
+}

packages/common/src/load-module.ts

@@ -30,6 +30,14 @@ const _tsNodeRegister = (() => {
         // Overriding moduleResolution to 'node' (as was done previously) was the root cause of
         // issue https://github.com/just-jeb/angular-builders/issues/2025: it prevented TypeScript
         // from resolving subpath exports, causing TS2307 errors at build time.
+        resolveJsonModule: true,
+        // resolveJsonModule: true is required so that TypeScript webpack configs can import
+        // JSON files (e.g. `import pkg from './package.json'`). Without this, users on
+        // moduleResolution:'node' (the default for Angular projects before v17) get TS2732:
+        // "Cannot find module './foo.json'. Consider using '--resolveJsonModule'".
+        // This flag is safe to always enable: it has no downside and does not conflict
+        // with any other moduleResolution mode (node, node16, bundler, etc.).
+        // Fix for: https://github.com/just-jeb/angular-builders/issues/816
         types: [
           'node', // NOTE: `node` is added so user configs can use Node.js globals (process, __dirname, etc.)
         ],

packages/custom-webpack/tests/integration.js

@@ -104,4 +104,11 @@ module.exports = [
     app: 'examples/custom-webpack/full-cycle-app',
     command: 'yarn build -c bundler-resolution-ts',
   },
+  {
+    id: 'ts-config-json-module-import',
+    name: 'custom-webpack: TS config with JSON import (moduleResolution:node)',
+    purpose: 'Builder loads TypeScript webpack config that imports a JSON file when using moduleResolution:node (regression for #816)',
+    app: 'examples/custom-webpack/full-cycle-app',
+    command: 'yarn build -c ts-config-json-import',
+  },
 ];