如何配置Angular生产构建与本地一致以兼容docxtemplater？

问题描述 #

我有一个使用docxtemplater（依赖pizzip）的Angular应用，本地构建环境运行正常，但生产构建后失效。尝试过多种构建配置修改都没解决问题，现在因为演示需求，想把生产构建配置调整得和本地一致，请问是否可行？

以下是我的配置文件：

tsconfig.json #

{"compileOnSave": false,
"compilerOptions": {
    "strict": false,
    "forceConsistentCasingInFileNames": false,
    "noImplicitReturns": false,
    "noFallthroughCasesInSwitch": false,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./src",
    "typeRoots": [
        "node_modules/@types"
      ],
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
        "es2020",
        "dom"
    ],
    "paths": {
        "os:": [
            "src/empty.ts"
        ]
    },
    "resolveJsonModule": true
},
"angularCompilerOptions": {
    "disableTypeScriptVersionCheck": true,
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": false,
    "strictInputAccessModifiers": false,
    "strictTemplates": false
}
}

angular.json 中的production配置 #

"production": {
                        "budgets": [
                            {
                                "type": "initial",
                                "maximumWarning": "25mb",
                                "maximumError": "30mb"
                            },
                            {
                                "type": "anyComponentStyle",
                                "maximumWarning": "75kb",
                                "maximumError": "90kb"
                            }
                        ],
                        "fileReplacements": [
                            {
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod.ts"
                            }
                        ],
                        "outputHashing": "all", 
                        "buildOptimizer": false,
                        "optimization": false
                    }

可行性及调整方案 #

完全可行，生产构建配置可以调整为和本地开发环境一致，以此临时解决演示问题，具体调整步骤如下：

1. 对齐优化类配置
   本地开发环境默认关闭optimization、buildOptimizer、aot，你当前的production配置已经关闭了前两项，需要显式添加"aot": false，确保和本地一致。

2. 关闭输出哈希
   本地构建默认不启用outputHashing，你当前production配置设为了all，改成none即可对齐本地配置。

3. 调整环境文件替换（可选）
   如果演示需要用开发环境的配置，可以注释掉fileReplacements部分，这样构建时会使用environment.ts而非生产环境配置文件。

4. 启用sourceMap
   本地开发默认开启sourceMap，生产构建默认关闭，在production配置中添加"sourceMap": true，方便演示时的调试需求。

调整后的production配置示例：

"production": {
    "budgets": [
        {
            "type": "initial",
            "maximumWarning": "25mb",
            "maximumError": "30mb"
        },
        {
            "type": "anyComponentStyle",
            "maximumWarning": "75kb",
            "maximumError": "90kb"
        }
    ],
    // 可选：注释后使用开发环境配置
    // "fileReplacements": [
    //     {
    //         "replace": "src/environments/environment.ts",
    //         "with": "src/environments/environment.prod.ts"
    //     }
    // ],
    "outputHashing": "none",
    "buildOptimizer": false,
    "optimization": false,
    "aot": false,
    "sourceMap": true
}

5. 验证tsconfig配置
   你的tsconfig.json已经和本地开发配置基本一致（比如sourceMap: true、strict: false等），无需额外修改。

注意：这种配置仅适合演示场景，正式生产环境必须恢复优化配置，避免包体积过大、性能下降等问题。

内容的提问来源于stack exchange，提问作者wil