import { AngularWebpackPlugin , AngularWebpackPluginOptions } from "@ngtools/webpack" ; import linkerPlugin from "@angular/compiler-cli/linker/babel" ; import { BuildAngularCompilationFlags , BuildEnvVars } from "webpack-configs/model" ; import { ENVIRONMENT , rootRelativePath } from "webpack-configs/lib" ; import { LegacyNgcOptions , StrictTemplateOptions } from "@angular/compiler-cli/src/ngtsc/core/api" ; import { WEBPACK_WEB_CHUNK_NAMES } from "src/shared/webpack-conts" ; import { browserWindowAppPath , browserWindowPath , buildBaseWebConfig , cssRuleSetRules , sassLoaderRuleSetRules } from "./lib" ; import { readConfiguration } from "@angular/compiler-cli" ; const angularCompilationFlags = { aot : true , ivy : true } ; const tsConfigFile = browserWindowPath ( ( { production : "./tsconfig.json" , development : "./tsconfig.development.json" , test : "./test/tsconfig.json" , } as Record < BuildEnvVars [ "BUILD_ENVIRONMENT" ] , string > ) [ ENVIRONMENT ] ) ; const config = buildBaseWebConfig ( { module : { rules : [ { test : /\.m?[j|t]s$/ , use : { loader : "babel-loader" , options : { cacheDirectory : true , compact : false , plugins : [ linkerPlugin , "@babel/plugin-proposal-async-generator-functions" , "@babel/plugin-transform-async-to-generator" , "@babel/plugin-transform-runtime" , ] , } , } , } , { test : /\.[jt]sx?$/ , loader : "@ngtools/webpack" , } , { test : /\.scss$/ , use : [ "to-string-loader" , ... cssRuleSetRules ( ) , "resolve-url-loader" , ... sassLoaderRuleSetRules , ] , include : [ browserWindowAppPath ( "/" ) , ] , } , { test : rootRelativePath ( "./node_modules/monaco-editor/esm/vs/base/common/platform.js" ) , use : [ { loader : "imports-loader" , options : { additionalCode : `
                                    const self = {
                                        MonacoEnvironment: {
                                            getWorker(...[/* workerId */, label]) {
                                                return new Worker(
                                                    ["typescript", "javascript"].includes(label)
                                                        ? "./monaco-editor.ts.worker.mjs"
                                                        : "./monaco-editor.editor.worker.mjs",
                                                    { name: label, type: "module" },
                                                );
                                            },
                                        },
                                    };
                                ` , } , } , ] , } , ] , } , resolve : { alias : { images : rootRelativePath ( "images" ) , } , } , plugins : [ ( ( ) => { const strictTemplateOptions = { strictTemplates : angularCompilationFlags . ivy , } ; const legacyNgcOptions = { fullTemplateTypeCheck : angularCompilationFlags . aot || angularCompilationFlags . ivy , strictInjectionParameters : true , } ; const compilerOptions = { preserveWhitespaces : false , disableTypeScriptVersionCheck : true , enableIvy : angularCompilationFlags . ivy , ... legacyNgcOptions , ... strictTemplateOptions , ... readConfiguration ( tsConfigFile ) . options , } ; const angularCompilerPluginOptions = { tsconfig : tsConfigFile , compilerOptions , jitMode : ! angularCompilationFlags . aot , directTemplateLoading : false , emitClassMetadata : false , emitNgModuleScope : false , substitutions : { } , fileReplacements : { } , } ; return new AngularWebpackPlugin ( angularCompilerPluginOptions ) ; } ) ( ) , ] , optimization : { splitChunks : { cacheGroups : { defaultVendors : false , vendors : { test : /[\\/]node_modules[\\/]/ , priority : - 10 , filename ( { chunk } ) { if ( ! chunk ?. hash ) { throw new Error ( `Invalid "chunk.hash" value` ) ; } return `vendor_${ chunk . hash }.js` ; } , } , ... Object . entries ( { "shared-vendor-dark" : "browser-window/vendor/shared-vendor-dark.scss" , "shared-vendor-light" : "browser-window/vendor/shared-vendor-light.scss" , "vendor-dark" : "browser-window/vendor/vendor-dark.scss" , "vendor-light" : "browser-window/vendor/vendor-light.scss" , "app-theming-dark" : "browser-window/app-theming-dark.scss" , "app-theming-light" : "browser-window/app-theming-light.scss" , } as const ) . reduce ( ( accumulator , [ name , value ] ) => { return { ... accumulator , [ `styles-${ name }` ] : { test : new RegExp ( `src/web/${ value }` . replace ( /\//g , "(\|\\\\|/)" ) , "g" ) , name , chunks : "all" , enforce : true , } , } ; } , { } ) , } , } , } , } , { tsConfigFile , chunkName : WEBPACK_WEB_CHUNK_NAMES [ "browser-window" ] , entries : { "monaco-editor.ts.worker" : rootRelativePath ( "./node_modules/monaco-editor/esm/vs/language/typescript/ts.worker" ) , "monaco-editor.editor.worker" : rootRelativePath ( "./node_modules/monaco-editor/esm/vs/editor/editor.worker.js" ) , } , htmlWebpackPlugin : { inject : false , } , } ) ; export default config ;