Угловая 4-страничная перезагрузка или переадресация бросков «loadChunkError»: true - PullRequest
Новая
       28

Угловая 4-страничная перезагрузка или переадресация бросков «loadChunkError»: true

0 голосов
/ 07 сентября 2018

Я использую угловое приложение 6 MVC со сборкой webpack. Выдает "loadChunkError": true " случайным образом при загрузке страницы или перенаправлении, После возникновения ошибки угловая маршрутизация не работает и постоянно выдает ошибку консоли.

[ Примечание: Как только я очистил кеш браузера, а затем маршрутизация работает нормально]

Файл веб-пакета 

const webpack = require("webpack");

const path = require("path"); 

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
var SourceMapDevToolPlugin = require('webpack/lib/SourceMapDevToolPlugin');
let SharedCache = {};
const entryPath = path.resolve(__dirname, "src");
const viewPath = path.resolve(
    __dirname,
    "../Views/Home"
);

const { BaseHrefWebpackPlugin } = require('base-href-webpack-plugin');
const ROOT = path.resolve(__dirname, '');

const app = ${entryPath}; module.exports = envOptions => { envOptions = envOptions || {}; 

const config = {
    entry: {
        polyfills: `${entryPath}\\polyfills.ts`,
        vendors: `${entryPath}\\vendor.ts`,
        app: `${entryPath}\\main.ts`
    },
    output: {
        path: viewPath,
        publicPath: '/',
        filename: "../../angularBundle/[name].js",
        chunkFilename: '../../angularBundle/[name].js',
        sourceMapFilename: "../../angularBundle/[name].js.map",
    },
    resolve: {
        extensions: [".ts", ".js", ".html"],
        alias: {
            jquery: "jquery/src/jquery"
        }
    },  
module: {
  rules: [
    {
      test: /\.ts$/,
      loaders: ["awesome-typescript-loader?configFileName=./src/tsconfig.json", "angular2-template-loader"]
      },
      {
          test: /\.(ts|js)$/,
          loaders: [
              'angular-router-loader'
          ]
      },
    {
      test: /\.html$/,
      loader: "raw-loader"
    },
    {
      test: /\.css$/,
      loader: "raw-loader"
      }
      ,
      {
          test: /\.(png|jpg|eot|cur|svg|gif|ttf|woff|otf)$/,
          loader: "file-loader",
          options: {
              outputPath: 'fonts/'
          }
      } 
  ]
    },
    devtool: 'eval',
    plugins: [
  new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({
        template: viewPath + "/loader.cshtml",
        filename: viewPath + "/Index.cshtml",
        inject: false
        })
    ],
  optimization: {
      splitChunks: { chunks: 'all' },
    },
 };

if (envOptions.MODE === "prod") {
    config.plugins.push(
        new UglifyJsPlugin()
    );
  }

 return config;
};

Error

Ошибка: Uncaught (в обещании): Object: {"loadChunkError": true, "details": {"type": "missing", "request"}

Пожалуйста, предложите решение или шаги по устранению проблемы.

Спасибо, Вивек

Ответы [ 2 ]

0 голосов
/ 25 марта 2019

Основная причина: В моем случае существует ошибка фрагмента загрузки, которая возникает из-за старых кэшированных фрагментов js.
Исправлено: Исправлена ​​проблема с созданием уникальных js с помощью хеша

[хеш] - это «уникальный хеш, сгенерированный для каждой сборки»

Существующий
output: { path: viewPath, publicPath: '/', filename: "../../angularBundle/[name].js", chunkFilename: '../../angularBundle/[name].js', sourceMapFilename: "../../angularBundle/[name].js.map", }

Обновлено [Исправлено] ]
output: { path: viewPath, publicPath: '/', filename: "../../angularBundle/[name].[hash].js", chunkFilename: '../../angularBundle/[name].[hash].js', sourceMapFilename: "../../angularBundle/[name].[hash].js.map", }

0 голосов
/ 24 марта 2019

  • Шаг 1: Загрузите компонент напрямую, используя component вместо loadChildren, тогда вы увидите фактическую ошибку

  • Шаг 2: исправить ошибку.

  • Шаг 3: Загрузите компонент лениво, как вы делали раньше.

...