Update to Angular 15

2026-09-24 21:55:52 +02:00 · 2026-03-24 20:30:01 +01:00
parent 5e578a292a
commit e009dd4dd0
4 changed files with 2361 additions and 5393 deletions
@@ -0,0 +1,151 @@
+import path from 'path';
+import webpack from 'webpack';
+import { merge } from 'webpack-merge';
+import TerserPlugin from 'terser-webpack-plugin';
+import WrapperPlugin from 'wrapper-webpack-plugin';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import { AngularWebpackPlugin } from '@ngtools/webpack';
+import linkerPlugin from '@angular/compiler-cli/linker/babel';
+import common from './webpack.common.js';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const r = p => JSON.parse(fs.readFileSync(p, 'utf8'));
+
+const config = r('./config.json');
+
+const analytics = config.analytics ? `
+	(function(i, s, o, g, r, a, m) {i['GoogleAnalyticsObject']=r; i[r]=i[r]||function() {
+	(i[r].q=i[r].q||[]).push(arguments) }, i[r].l=1*new Date(); a=s.createElement(o),
+	m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g; m.parentNode.insertBefore(a, m)
+	}) (window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
+	ga('create', '${config.analytics.trackingID}', 'auto');
+	ga('send', 'pageview');
+` : ``;
+
+const compilerOptions = r('./tsconfig-aot.json').compilerOptions;
+//const compilerOptionsES = r('./tsconfig-aot-es.json').compilerOptions;
+
+const scripts = [
+	['bootstrap', 'app/app.module#AppModule', 'assets', compilerOptions, 'tsconfig-aot.json', 5, false],
+	// ['bootstrap-es', 'app/app.module#AppModule', 'assets', compilerOptionsES, 'tsconfig-aot-es.json', 7, false],
+	['bootstrap-admin', 'admin/admin.module#AdminAppModule', 'assets-admin', compilerOptions, 'tsconfig-aot-admin.json', 5, true],
+	['bootstrap-tools', 'tools/tools.module#ToolsAppModule', 'assets', compilerOptions, 'tsconfig-aot-tools.json', 5, true],
+];
+
+
+const max = Math.max(...([...scripts].map(e => e[0].length)));
+function getScripts(args) {
+	const { analyze, main, admin, tools, beta } = args;
+	if (tools || beta) {
+		return [...scripts, toolsScrips];
+	}
+
+	if (analyze || main) {
+		return [scripts[0]];
+	} else if (admin) {
+		return [scripts[2]];
+	} else {
+		return scripts;
+	}
+}
+
+export default (args = {}) =>
+	getScripts(args)
+		.map(([script, entry, outDir, compilerOptions, tsconfig, _ecma, TOOLS]) => merge(common, {
+			mode: 'production',
+			performance: {
+				maxEntrypointSize: 10000000,
+				maxAssetSize: 10000000,
+			},
+			entry: {
+				[script]: `./ts/${script}`,
+			},
+			output: Object.assign({}, common.output, {
+				filename: '[name]-[chunkhash:10].js',
+				path: path.resolve(__dirname, 'dist', 'browser' , outDir, 'scripts'),
+			}),
+			devtool: script === 'bootstrap' ? 'source-map' : false,
+			module: {
+				rules: [
+					{
+						test: /\.m?js$/,
+						use: {
+						  loader: 'babel-loader',
+						  options: {
+								plugins: [linkerPlugin],
+								compact: false,
+								cacheDirectory: true,
+						  }
+						}
+					},
+					{
+						test: /\.[jt]sx?$/,
+						use: [{
+							loader: '@ngtools/webpack', options: {
+								sourcemap: true,
+							 	compilerOptions,
+							}
+						}],
+					},
+				],
+			},
+			stats: {
+				preset: 'normal',
+				reasons: true,
+				modules: true,
+				errorDetails: true,
+				moduleTrace: true
+			},	
+			optimization: {
+				minimizer: [
+					new TerserPlugin({
+						extractComments: {
+							condition: true,
+							banner: false,
+						},
+						terserOptions: {
+							sourceMap: true,
+							ecma: 5,
+							mangle: {
+								properties: {
+									regex: /^__(?!default$)/,
+								},
+							},
+							output: { comments: false },
+						},
+					}),
+				],
+			},
+			plugins: [
+				new AngularWebpackPlugin({
+					tsconfig,
+					compilerOptions: {
+						angularCompilerOptions: {
+							entryModule: `src/ts/components/${entry}`,
+						},
+				 }
+				}),
+				(script === 'bootstrap' && !args.analyze) ? new WrapperPlugin({ test: /\.js$/, header: analytics }) : undefined,
+				args.analyze ? new BundleAnalyzerPlugin({ analyzerMode: 'static' }) : undefined,
+				new webpack.DefinePlugin({
+					DEVELOPMENT: false, TOOLS, SERVER: false, BETA: !!args.beta,
+					TIMING: !!args.timing, TESTS: false,
+					ngJitMode: false, // NOTE: Enable this if you need more detailed JIT compiler error
+					ngI18nClosureMode: false, // disables localization closure
+					ngDevMode: false, // Disable angular dev
+				}),
+				new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }),
+				new webpack.ProgressPlugin({
+					handler: (percentage, message, ...args) => {
+					  const fullMsg = `${args.join(' ')} ${message}`.trim();
+					  const p = Math.floor(percentage * 100).toString();
+					  const emp = ' '.repeat(3 - p.length);
+					  const l = script.length;
+					  const emp2 = ' '.repeat(max - l);
+					  console.log(`[${p}%]${emp}[${script}] ${emp2} | ${fullMsg}`);
+					},
+				  }),
+			].filter(x => x),
+		}));