Angular：Error:Loading chunk {n} failed.问题的解决思路

最新推荐文章于 2024-05-22 10:38:28 发布

Angular baby

最新推荐文章于 2024-05-22 10:38:28 发布

阅读量5.8k

点赞数 1

分类专栏： Angular6基础学习前端开发

本文链接：https://blog.csdn.net/qq_36451496/article/details/100071790

版权

前端开发同时被 3 个专栏收录

142 篇文章 3 订阅

订阅专栏

Angular6基础学习

59 篇文章 5 订阅

订阅专栏

Angular6

52 篇文章 0 订阅

订阅专栏

代码打包发布，在测试环境运行的时候经常会有路由跳转卡住的情况，就是点击菜单时，对应的页面出不来，还停留在原来的页面。上网搜了半天，感觉很多讨论都是不了了之，有的人说目测是因为不稳定的网络连接和浏览器的缓存错误，我看了下控制台的报错信息，想到会不会是index.html文件中引入的一些依赖找不到导致的问题呢，就大概改了下。

首先，index.html修改前：

<!DOCTYPE html>

<html lang="">

<head>
  <meta charset="utf-8">
  <title>采购供应链平台</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
  <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=2tIMeG0W25pWyHDiBmskuxCIZVI5qMGY">
  </script>
</head>

<body>
  <app-root></app-root>
</body>

</html>

这里使用的quill.snow.css和百度地图的依赖都是从网上直接引入了api，我担心是因为我们这个平台是在公司的内部网络环境下使用的，所以可能有时候网络会拦截一些内容造成资源加载失败，所以我将这两个资源都下载下来存到本地一起打包，以期解决这个问题：

<!DOCTYPE html>

<html lang="">

<head>
  <meta charset="utf-8">
  <title>采购供应链平台</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="assets/fonts/quill.snow.css" type="text/css" rel="stylesheet">
  <script type="text/javascript" src="assets/libs/echarts/theme/getscript.js">
  </script>
</head>

<body>
  <app-root></app-root>
</body>

</html>

注意这里的路径直接从assets开始写就可以！这样打包发布后在控制台的Sources里面是可以看到自己的asserts里面的这两个文件的。

注意！还有个很重要的、很常见的问题，就是这两个文件有时候请求头中识别其类型会出错，有时候明明是javascript或者css类型的文件，却被识别成了html类型（在控制台的Network里面可以看到这两个文件的Content-Type）

我看有的博主会把上面的DOCTYPE声明注释掉，这是不被建议的方法，很有可能引发新的问题。

有个解决方案是在后端对请求进行分类，当为一些css等一类文件就以原来的方式请求进行，不做处理，其它的请求再作处理，修改后代码如下：

System.out.println("**********AllFilter开始工作*********");
        HttpServletRequest request=(HttpServletRequest)req;
        HttpServletResponse response=(HttpServletResponse)res;

        String url=request.getRequestURI();
        System.out.println("url:" +url);
        if(url.indexOf(".css")>0||url.indexOf(".js")>0||url.indexOf(".png")>0) {
            chain.doFilter(request, response);
            return;
        }
        response.setContentType("text/html;text/html; charset=UTF-8");

这样请求头中的文件类型就正常了。

这样做了修改之后，目前还没有发现出现Loading chunk {n} failed的问题再出现，希望以后也不会出现叭，如果有小伙伴有其他的思路，欢迎一起来探讨一下哦~

在解决问题的过程中搜了几篇资料，看到了一篇参考文章（这篇文章使用的是Vue框架）说，这个报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败，但是根本原因没有被找到，因为这个问题出现的偶然性比较高，不知道是网络原因还是webpack的bug。

博主在github、stackoverflow等各种地方也找不到原因和解决方案，这是github上关于这个问题的讨论：Loading chunk {n} failed #742，虽然最后还是不了了之，但是大家可以参考一下。

参考文档：https://segmentfault.com/a/1190000016382323

本篇文章最后的后端修改请求头中文件类型的代码出自下面这篇参考文档：https://www.cnblogs.com/StevenZheng/p/10797887.html

Angular baby

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
Angular：Error:Loading chunk {n} failed.问题的解决思路

代码打包发布，在测试环境运行的时候经常会有路由跳转卡住的情况，就是点击菜单时，对应的页面出不来，还停留在原来的页面。上网搜了半天，感觉很多讨论都是不了了之，有的人说目测是因为不稳定的网络连接和浏览器的缓存错误，我看了下控制台的报错信息，想到会不会是index.html文件中引入的一些依赖找不到导致的问题呢，就大概改了下。首先，index.html修改前：<!DOCTYPE ht...
复制链接

扫一扫