fix(webpack): typescript imports in non-ts projects (#9714)

packages/webpack5/src/configuration/angular.ts

@@ -1,12 +1,11 @@
-import { ScriptTarget } from 'typescript';
 import { extname, resolve } from 'path';
 import Config from 'webpack-chain';
 import { existsSync } from 'fs';
 
+import { getTypescript, readTsConfig } from '../helpers/typescript';
 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,
@@ -179,6 +178,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 		const buildAngularPath = getDependencyPath('@angular-devkit/build-angular');
 		if (buildAngularPath) {
 			const tsConfig = readTsConfig(tsConfigPath);
+			const { ScriptTarget } = getTypescript();
 			const scriptTarget = tsConfig.options.target ?? ScriptTarget.ESNext;
 			const buildAngularOptions: any = {
 				scriptTarget,

packages/webpack5/src/helpers/index.ts

@@ -26,7 +26,7 @@ import {
 	getPlatform,
 	getPlatformName,
 } from './platform';
-import { readTsConfig } from './tsconfig';
+import { readTsConfig } from './typescript';
 
 // intentionally populated manually
 // as this generates nicer typings

packages/webpack5/src/helpers/tsconfig.ts

@@ -1,19 +0,0 @@
-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;
-}

packages/webpack5/src/helpers/typescript.ts

@@ -0,0 +1,54 @@
+import { dirname } from 'path';
+import { env } from '..';
+
+import { warnOnce } from './log';
+
+/**
+ * @internal
+ */
+let typescript: typeof import('typescript');
+
+/**
+ * Helper used to import typescript.
+ *
+ * The reason this exists is that not all flavors use Typescript, and
+ * in those cases just importing this helper will throw an exception.
+ */
+export function getTypescript(): typeof import('typescript') {
+	if (typescript) {
+		return typescript;
+	}
+
+	try {
+		typescript = require('typescript');
+		return typescript;
+	} catch (err) {
+		warnOnce(
+			'typescript-missing',
+			`TypeScript is not installed in this project, but a config is trying to use it.`,
+			env.verbose
+				? new Error().stack
+				: 'Run with --env.verbose to log a stack trace to help debug this further.'
+		);
+
+		return {} as any;
+	}
+}
+
+export function readTsConfig(path: string) {
+	const { readConfigFile, parseJsonConfigFileContent, sys } = getTypescript();
+	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;
+}