diff --git a/examples/custom-webpack/full-cycle-app/angular.json b/examples/custom-webpack/full-cycle-app/angular.json index e3b4c8a09..0b469a67d 100644 --- a/examples/custom-webpack/full-cycle-app/angular.json +++ b/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" + } + } } } }, diff --git a/examples/custom-webpack/full-cycle-app/extra-webpack.config.json-import.ts b/examples/custom-webpack/full-cycle-app/extra-webpack.config.json-import.ts new file mode 100644 index 000000000..031939b2a --- /dev/null +++ b/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; diff --git a/examples/custom-webpack/full-cycle-app/tsconfig.node-resolution.json b/examples/custom-webpack/full-cycle-app/tsconfig.node-resolution.json new file mode 100644 index 000000000..0862cf490 --- /dev/null +++ b/examples/custom-webpack/full-cycle-app/tsconfig.node-resolution.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig.app.json", + "compilerOptions": { + "moduleResolution": "node" + } +} diff --git a/packages/common/src/load-module.ts b/packages/common/src/load-module.ts index e15588233..ea0c2a5c9 100644 --- a/packages/common/src/load-module.ts +++ b/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.) ], diff --git a/packages/custom-webpack/tests/integration.js b/packages/custom-webpack/tests/integration.js index c16f6a56b..8567c0671 100644 --- a/packages/custom-webpack/tests/integration.js +++ b/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', + }, ];