From f100109e2d528aea9a389fdebe3d533878570e42 Mon Sep 17 00:00:00 2001 From: Ruslan Lekhman Date: Wed, 30 Nov 2022 06:51:05 -0700 Subject: [PATCH] fix(webpack): support angular 15.x (#10106) --- .../__snapshots__/angular.spec.ts.snap | 9 ++++- .../__tests__/configuration/angular.spec.ts | 22 +++++++++++ packages/webpack5/package.json | 2 +- .../webpack5/src/configuration/angular.ts | 37 ++++++++++++++++--- 4 files changed, 61 insertions(+), 9 deletions(-) diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap index aaf09f1a9..eeabb1d9e 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap @@ -1,5 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`angular configuration @angular-devkit/build-angular backwards compatible sets scriptTarget for version <15 1`] = ` +{ + "aot": true, + "scriptTarget": 99, +} +`; + exports[`angular configuration for android 1`] = ` "{ mode: 'development', @@ -201,7 +208,6 @@ exports[`angular configuration for android 1`] = ` { loader: '@angular-devkit/build-angular/src/babel/webpack-loader', options: { - scriptTarget: 99, aot: true } } @@ -625,7 +631,6 @@ exports[`angular configuration for ios 1`] = ` { loader: '@angular-devkit/build-angular/src/babel/webpack-loader', options: { - scriptTarget: 99, aot: true } } diff --git a/packages/webpack5/__tests__/configuration/angular.spec.ts b/packages/webpack5/__tests__/configuration/angular.spec.ts index 8cab9190b..b6eec6914 100644 --- a/packages/webpack5/__tests__/configuration/angular.spec.ts +++ b/packages/webpack5/__tests__/configuration/angular.spec.ts @@ -77,4 +77,26 @@ describe('angular configuration', () => { polyfillsPath = false; }); + + describe('@angular-devkit/build-angular backwards compatible', () => { + beforeAll(() => { + jest.mock('@angular-devkit/build-angular/package.json', () => ({ + version: '14.0.0', + })); + }); + + afterAll(() => { + jest.unmock('@angular-devkit/build-angular/package.json'); + }); + + it('sets scriptTarget for version <15', () => { + const config = angular(new Config()); + expect( + config.module + .rule('angular-webpack-loader') + .use('webpack-loader') + .get('options') + ).toMatchSnapshot(); + }); + }); }); diff --git a/packages/webpack5/package.json b/packages/webpack5/package.json index 31be6c595..3f2a9d6e2 100644 --- a/packages/webpack5/package.json +++ b/packages/webpack5/package.json @@ -54,7 +54,7 @@ "webpack-virtual-modules": "^0.4.0" }, "devDependencies": { - "@angular-devkit/build-angular": "^14.2.4", + "@angular-devkit/build-angular": "^15.0.1", "@types/css": "0.0.33", "@types/jest": "29.1.1", "@types/loader-utils": "2.0.3", diff --git a/packages/webpack5/src/configuration/angular.ts b/packages/webpack5/src/configuration/angular.ts index 6dd1c7bc0..adc2fa915 100644 --- a/packages/webpack5/src/configuration/angular.ts +++ b/packages/webpack5/src/configuration/angular.ts @@ -181,15 +181,19 @@ export default function (config: Config, env: IWebpackEnv = _env): Config { .loader('angular-hot-loader'); }); - const buildAngularPath = getDependencyPath('@angular-devkit/build-angular'); - if (buildAngularPath) { - const tsConfig = readTsConfig(tsConfigPath); - const { ScriptTarget } = getTypescript(); - const scriptTarget = tsConfig.options.target ?? ScriptTarget.ESNext; + const buildAngularMajorVersion = getBuildAngularMajorVersion(); + if (buildAngularMajorVersion) { const buildAngularOptions: any = { - scriptTarget, aot: !disableAOT, }; + + if (buildAngularMajorVersion < 15) { + const tsConfig = readTsConfig(tsConfigPath); + const { ScriptTarget } = getTypescript(); + buildAngularOptions.scriptTarget = + tsConfig.options.target ?? ScriptTarget.ESNext; + } + if (disableAOT) { buildAngularOptions.optimize = false; } @@ -291,3 +295,24 @@ function getAngularWebpackPlugin(): any { const { AngularWebpackPlugin } = require('@ngtools/webpack'); return AngularWebpackPlugin; } + +const MAJOR_VER_RE = /^(\d+)\./; +function getBuildAngularMajorVersion() { + const buildAngularPath = getDependencyPath('@angular-devkit/build-angular'); + if (!buildAngularPath) { + return null; + } + + try { + const buildAngularVersion = + require(`${buildAngularPath}/package.json`).version; + + const [_, majorStr] = buildAngularVersion.match(MAJOR_VER_RE); + + return Number(majorStr); + } catch (err) { + // ignore + } + + return null; +}