From 0df5aa9712811db31b29aa2013ce8c95b31d6073 Mon Sep 17 00:00:00 2001 From: Eduardo Speroni Date: Wed, 22 Dec 2021 16:54:17 -0300 Subject: [PATCH] feat(webpack): disable aot flag, optional angular dep and tsconfig utils (#9711) Co-authored-by: Igor Randjelovic --- .../__snapshots__/angular.spec.ts.snap | 6 +- packages/webpack5/package.json | 1 + .../webpack5/src/configuration/angular.ts | 57 +++++++++++++------ packages/webpack5/src/helpers/index.ts | 4 ++ packages/webpack5/src/helpers/tsconfig.ts | 19 +++++++ 5 files changed, 68 insertions(+), 19 deletions(-) create mode 100644 packages/webpack5/src/helpers/tsconfig.ts diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap index 0327df79e..51ea03a17 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap +++ b/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 } ) ], diff --git a/packages/webpack5/package.json b/packages/webpack5/package.json index efe0c2228..6f6fb84ca 100644 --- a/packages/webpack5/package.json +++ b/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", diff --git a/packages/webpack5/src/configuration/angular.ts b/packages/webpack5/src/configuration/angular.ts index bc7478942..74237fa2a 100644 --- a/packages/webpack5/src/configuration/angular.ts +++ b/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 diff --git a/packages/webpack5/src/helpers/index.ts b/packages/webpack5/src/helpers/index.ts index 56637d566..2bd6ababb 100644 --- a/packages/webpack5/src/helpers/index.ts +++ b/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, + }, }; diff --git a/packages/webpack5/src/helpers/tsconfig.ts b/packages/webpack5/src/helpers/tsconfig.ts new file mode 100644 index 000000000..25fd5b604 --- /dev/null +++ b/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; +}