英文:
ChunkLoadError: Loading chunk 552 failed
问题
我正在将Angular 12迁移到13，虽然迁移成功，但在成功构建后在浏览器中运行项目时，它没有显示应用程序。当我检查控制台时，显示以下错误：
ChunkLoadError：加载块552失败。
此外，它显示找不到2个文件，但当我在dist文件夹中检查时，这些文件是存在的。
下面是控制台中的错误日志：
我不确定为什么会显示这些错误。我尝试了多个来自stackoverflow的解决方案，但都没有成功。
ng v
英文:
I am migrating the Angular 12 to 13, though the migration is successful but when I run project in the browser after successful build, It doesn't show the application. When I checked the console, it shows below error:
> ChunkLoadError: Loading chunk 552 failed.
Also, It shows 2 files are not found, but when I checked in dist folder, those files exists:
Below is the error log in console:
I am not sure why it is showing this errors. I tried multiple solutions from the stackoverflow but no luck.
ng v
答案1
得分: 1
因为您提供的资源不足以理解您的情况，让我分享一下我的方法，以了解您的问题。
- 您能再次确认您是否仍在使用旧版本的CLI？
- 在 angular.json 中，您能确保它与 Angular 13 的正确设置相匹配，包括 outputPath 和 publicPath 属性，它们是否被正确配置？
- 请删除 node_modules 文件夹并重新安装依赖项。
- 请检查 tsconfig.json 文件中的编译器选项。确保 module 值设置为 es2020 或更高版本。这可以帮助避免与块加载相关的兼容性问题。
- 如果您正在使用服务工作器或任何缓存机制，请禁用或清除缓存，以确保提供的是应用程序的最新版本。
- 您可以尝试直接使用类似 webpack 的替代构建工具，以查看问题是否仍然存在。
- 如果您的应用程序使用延迟加载，请暂时禁用它。这可以帮助缩小问题的根本原因。
- 强烈建议：创建一个新的 Angular 项目。作为最后的手段，考虑创建一个新的 Angular 13 项目，逐渐将您的代码和依赖项迁移到新项目中。这可以帮助隔离可能导致问题的配置或兼容性问题。
希望我的方法能为您提供解决问题的线索。
英文:
Since your resource given was not sufficient to understand your situation, let me share my approach to get a picture of your concern.
- Can you double check if you are still using the old version cli?
- In angular.json, can you ensure that it aligns with the correct settings for angular 13, including outputPath and publicPath properties, that they are conrrectly configured?
- Please delete node_modules folder and reinstall dependencies.
- Please review the compiler options in the tsconfig.json file. Ensure that the module value is set to es2020 or higher. This can help avoid compatibility issues with chunk loading.
- If you are using a service worker or any caching mechanism, disable or clear the cache to ensure that the latest version of the application is being served.
- Can you try alternative build tools like webpack directly to see if the issue persists.
- If your app uses lazy loading, please disable it temporarily. This can help narrow down the cause of the problem.
- Strongly recommend this: Create a new angular project. As a last resort, consider creating a new angular project with angular 13 and gradually migrate your code and dependencies to the new project. This can help isolate any configuration or compatibility issues that might be causing the problem.
Hope my approach would give you any hint to resolve the issue.
答案2
得分: 0
在这里找到了解决方案：https://github.com/angular/angular-cli/issues/22113#issuecomment-1004279867
我必须将以下代码放入我的 main.ts 文件中：
declare var __webpack_public_path__: string;
__webpack_public_path__ = '以前使用_deployUrl分配的值';
将 以前使用_deployUrl分配的值 替换为包含代码块的文件夹路径。
英文:
Found a solution here: https://github.com/angular/angular-cli/issues/22113#issuecomment-1004279867
I have to put following code in my main.ts file:
declare var __webpack_public_path__: string;
__webpack_public_path__ = 'valueFormerlyAssignedUsing_deployUrl';
Replace valueFormerlyAssignedUsing_deployUrl with your path to folder containing chunks.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论