Angular 17 SSR项目移除modulepreload及解决NG0507问题

初始modulepreload chunk的用途 #

Angular 17.3.0 SSR构建后生成的3个带modulepreload的初始chunk，各自负责不同核心功能：

• runtime chunk：处理模块加载、代码分割的底层运行时逻辑，是Angular应用启动的基础框架
• polyfills chunk：包含浏览器兼容性补丁，比如ES6+特性的垫片，确保应用能在老旧浏览器正常运行
• main chunk：承载应用的主组件、核心业务初始化代码，是实现应用功能的核心载体

调整预加载顺序触发NG0507错误的原因 #

手动修改构建后index.html里的link标签顺序，会破坏Angular SSR的初始化依赖链。Angular启动时依赖这些预加载的chunk提前就绪，顺序打乱后会出现运行时模块未加载完成的情况，直接触发NG0507错误（本质是模块加载顺序错误导致的依赖缺失）。

优化LCP的可行方案 #

通过关闭Angular自动添加的初始chunk预加载，手动控制预加载优先级，具体操作如下：
在项目的angular.json配置文件中，找到architect > build > options > index节点，添加"preloadInitial": false配置：

"architect": {
  "build": {
    "options": {
      "index": {
        "input": "src/index.html",
        "preloadInitial": false
      },
      // 其他构建配置...
    }
  }
}

关闭自动预加载后，你可以在src/index.html中手动添加图片的预加载标签，让图片预加载优先于chunk加载，从而有效提升LCP指标。

内容的提问来源于stack exchange，提问作者user24670032