在 Angular 12 中,如果你更新了你的项目代码但是发现即使重新加载页面依然使用相同的代码,可能是因为输出文件被缓存了。这时就需要修改配置文件来解决问题。
可以使用 output-hashing=none 来在构建时禁用文件散列(hash),以便能够在应用代码发生更改时强制浏览器重新下载更新的文件。
修改 angular.json 文件的相关配置项:
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/my-app",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [],
"outputHashing": "none" // 修改该配置项
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all", // 修改该配置项
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
上述代码中已经将 outputHashing 设置为 none。这样就能够强制浏览器重新下载更新的文件