fix(webpack): support angular 15.x (#10106)

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
             }
           }

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();
+		});
+	});
 });

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",

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;
+}