Как решается ошибка при перезагрузке чанков angular/webpack из кеша, когда сервер обновлился?

Question

[Роман Ракзин]

я получаю ошибку, когда обновлю прод сервер. После очистки кеша это проходит, но как решить данную проблему?
фото ошибки - > prnt.sc/26k942n
ChuncLoadError

Package.json

"scripts": {
    "ng": "ng",
    "start": "cross-env NODE_ENV=dev webpack-dev-server --port=4200",
    "build": "npm run clean && webpack",
    "build:dev": "cross-env NODE_ENV=dev npm run build --sourcemap --aot --vendor-chunk --common-chunk --delete-output-path --buildOptimizer",
    "build:test": "cross-env NODE_ENV=test npm run build --sourcemap --aot --vendor-chunk --common-chunk --delete-output-path --buildOptimizer",
    "build:prod": "cross-env NODE_ENV=prod npm run build --aot",
    "clean": "npm cache clean --force && npm run rimraf -- dist",
    "rimraf": "rimraf",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "protractor ./protractor.conf.js",
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet"
  },

в вебпаке каждый раз новые чанки, но ссылки почему-то из кеша берутся. Если я его чищу, то подтягиваются актуальные данные.

webpack.config.js

output: {
      path: path.join(process.cwd(), "dist"),
      chunkFilename: `[name].[hash].chunk.js`,
      filename: `[name].[hash].bundle.js`,
      crossOriginLoading: false
},

я ставил hash и contenthash для прод сервера.

Я пока что нашёл 2 решения- это перехвачивать ошибку, либо делать PWA приложение. До PWA нужно ещё изучать, а перехват ошибки вроде как лечение следствия, а не причины.
И как поступить тогда?

Answer 1

[Роман Ракзин]

Помогло в webpack поставить в output.
Заменил hash на contenthash (можно так же на chunchash).
Для оптимизации на Dev не делаю эту опцию, так как на сборку contenthash требуется больше времени

function generateOutputParams() {
  if (ENV === 'dev') {
    return {
      path: path.join(process.cwd(), "dist"),
      chunkFilename: `[name].[hash].chunk.js`,
      filename: `[name].[hash].bundle.js`,
      crossOriginLoading: false
    }
  }

  return {
    path: path.join(process.cwd(), "dist"),
    chunkFilename: `[name].[contenthash].chunk.js`,
    filename: `[name].[contenthash].bundle.js`,
    crossOriginLoading: false
  }
}

const outputValue = generateOutputParams();