feat(webpack): disable aot flag, optional angular dep and tsconfig utils (#9711)

Co-authored-by: Igor Randjelovic <rigor789@gmail.com>

packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap

@@ -400,7 +400,8 @@ exports[`angular configuration for android 1`] = `
     new AngularWebpackPlugin(
       {
         tsconfig: '__jest__/tsconfig.json',
-        directTemplateLoading: false
+        directTemplateLoading: false,
+        jitMode: false
       }
     )
   ],
@@ -816,7 +817,8 @@ exports[`angular configuration for ios 1`] = `
     new AngularWebpackPlugin(
       {
         tsconfig: '__jest__/tsconfig.json',
-        directTemplateLoading: false
+        directTemplateLoading: false,
+        jitMode: false
       }
     )
   ],

packages/webpack5/package.json

@@ -54,6 +54,7 @@
 		"webpack-virtual-modules": "^0.4.0"
 	},
 	"devDependencies": {
+		"@angular-devkit/build-angular": "^13.1.2",
 		"@types/css": "0.0.33",
 		"@types/jest": "27.0.1",
 		"@types/loader-utils": "2.0.3",

packages/webpack5/src/configuration/angular.ts

@@ -3,8 +3,11 @@ import { extname, resolve } from 'path';
 import Config from 'webpack-chain';
 import { existsSync } from 'fs';
 
+import { getDependencyPath } from '../helpers/dependencies';
 import { getProjectFilePath } from '../helpers/project';
 import { env as _env, IWebpackEnv } from '../index';
+import { readTsConfig } from '../helpers/tsconfig';
+import { warnOnce } from '../helpers/log';
 import {
 	getEntryDirPath,
 	getEntryPath,
@@ -22,6 +25,8 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 		getProjectFilePath('tsconfig.json'),
 	].find((path) => existsSync(path));
 
+	const disableAOT = !!env.disableAOT;
+
 	// remove default ts rule
 	config.module.rules.delete('ts');
 
@@ -158,6 +163,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 			{
 				tsconfig: tsConfigPath,
 				directTemplateLoading: false,
+				jitMode: disableAOT,
 			},
 		]);
 
@@ -169,23 +175,40 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 				.use('angular-hot-loader')
 				.loader('angular-hot-loader');
 		});
-		// zone + async/await
-		config.module
-			.rule('angular-webpack-loader')
-			.test(/\.[cm]?[tj]sx?$/)
-			.exclude.add(
-				/[/\\](?:core-js|@babel|tslib|web-animations-js|web-streams-polyfill)[/\\]/
-			)
-			.end()
-			.resolve.set('fullySpecified', false)
-			.end()
-			.before('angular')
-			.use('webpack-loader')
-			.loader('@angular-devkit/build-angular/src/babel/webpack-loader')
-			.options({
-				scriptTarget: ScriptTarget.ESNext,
-				aot: true,
-			});
+
+		const buildAngularPath = getDependencyPath('@angular-devkit/build-angular');
+		if (buildAngularPath) {
+			const tsConfig = readTsConfig(tsConfigPath);
+			const scriptTarget = tsConfig.options.target ?? ScriptTarget.ESNext;
+			const buildAngularOptions: any = {
+				scriptTarget,
+				aot: !disableAOT,
+			};
+			if (disableAOT) {
+				buildAngularOptions.optimize = false;
+			}
+			// zone + async/await
+			config.module
+				.rule('angular-webpack-loader')
+				.test(/\.[cm]?[tj]sx?$/)
+				.exclude.add(
+					/[/\\](?:core-js|@babel|tslib|web-animations-js|web-streams-polyfill)[/\\]/
+				)
+				.end()
+				.resolve.set('fullySpecified', false)
+				.end()
+				.before('angular')
+				.use('webpack-loader')
+				.loader('@angular-devkit/build-angular/src/babel/webpack-loader')
+				.options(buildAngularOptions);
+		} else {
+			warnOnce(
+				'build-angular-missing',
+				`
+				@angular-devkit/build-angular is missing! Some features may not work as expected. Please install it manually to get rid of this warning.
+				`
+			);
+		}
 	}
 
 	// look for platform specific polyfills first

packages/webpack5/src/helpers/index.ts

@@ -26,6 +26,7 @@ import {
 	getPlatform,
 	getPlatformName,
 } from './platform';
+import { readTsConfig } from './tsconfig';
 
 // intentionally populated manually
 // as this generates nicer typings
@@ -75,4 +76,7 @@ export default {
 		addVirtualEntry,
 		addVirtualModule,
 	},
+	tsconfig: {
+		readTsConfig,
+	},
 };

packages/webpack5/src/helpers/tsconfig.ts

@@ -0,0 +1,19 @@
+import { readConfigFile, parseJsonConfigFileContent, sys } from 'typescript';
+import { dirname } from 'path';
+
+export function readTsConfig(path: string) {
+	const f = readConfigFile(path, sys.readFile);
+
+	const parsed = parseJsonConfigFileContent(
+		f.config,
+		{
+			fileExists: sys.fileExists,
+			readFile: sys.readFile,
+			readDirectory: sys.readDirectory,
+			useCaseSensitiveFileNames: true,
+		},
+		dirname(path)
+	);
+
+	return parsed;
+}