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

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

@@ -83,6 +83,14 @@
                   "plugins": "prepend"
                 }
               }
+            },
+            "json-import-ts": {
+              "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/sanity-app/angular.json

@@ -68,6 +68,11 @@
                 "path": "custom-webpack.config.js"
               },
               "indexTransform": "index.transform.js"
+            },
+            "ts-json-import": {
+              "customWebpackConfig": {
+                "path": "extra-webpack.config.ts"
+              }
             }
           }
         },

examples/custom-webpack/sanity-app/extra-webpack.config.ts

@@ -0,0 +1,9 @@
+import { Configuration } from 'webpack';
+// JSON import: verifies that ts-node is registered with resolveJsonModule:true (regression for #816).
+// Without the fix, this fails with TS2307 when the project tsconfig lacks resolveJsonModule.
+import { name } from './package.json';
+
+export default {
+  name: `custom-${name}`,
+  plugins: [],
+} as Configuration;

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/src/transform-factories.spec.ts

@@ -32,13 +32,6 @@ describe('getTransforms', () => {
     transforms.webpackConfiguration({});
 
     expect(tsNode.register).toHaveBeenCalledTimes(1);
-    expect(tsNode.register).toHaveBeenCalledWith({
-      project: 'test/tsconfig.test.json',
-      compilerOptions: {
-        module: 'CommonJS',
-        types: ['node'],
-      },
-    });
     expect(logger.warn).not.toHaveBeenCalled();
 
     const transforms2 = getTransforms(

packages/custom-webpack/tests/integration.js

@@ -90,6 +90,14 @@ module.exports = [
   },
 
   // TypeScript config loading
+  {
+    id: 'ts-config-json-import',
+    name: 'custom-webpack: TS config JSON import',
+    purpose:
+      'Builder loads TypeScript webpack config that imports a JSON file (regression for #816). Fails without resolveJsonModule:true in ts-node options.',
+    app: 'examples/custom-webpack/sanity-app',
+    command: 'yarn build -c ts-json-import',
+  },
   {
     id: 'ts-config-esm-imports',
     name: 'custom-webpack: TS config ESM imports',
@@ -100,7 +108,8 @@ module.exports = [
   {
     id: 'ts-config-bundler-module-resolution',
     name: 'custom-webpack: TS config with moduleResolution:bundler imports',
-    purpose: 'Builder loads TypeScript webpack config that uses subpath exports requiring moduleResolution:bundler (regression for #2025)',
+    purpose:
+      'Builder loads TypeScript webpack config that uses subpath exports requiring moduleResolution:bundler (regression for #2025)',
     app: 'examples/custom-webpack/full-cycle-app',
     command: 'yarn build -c bundler-resolution-ts',
   },