Ionic serve修改代码后多次重复编译问题求助

先修复angular.json中的明显配置问题 #

1. 清理重复的资源条目
   你的test配置里，assets数组重复添加了四次src/manifest.webmanifest，这会导致每次编译时多次复制同一文件，触发文件系统的多次变更通知，进而引发重复编译。修改后只保留一次：

   "assets": [
     {
       "glob": "favicon.ico",
       "input": "src/",
       "output": "/"
     },
     {
       "glob": "**/*",
       "input": "src/assets",
       "output": "/assets"
     },
     "src/manifest.webmanifest"
   ]
   

2. 开发环境禁用Service Worker
   当前build配置中serviceWorker设为true，开发环境下Service Worker的缓存机制会和Angular的热重载逻辑冲突，导致重复触发编译。修改build的options：

   "serviceWorker": false
   

   若需要在生产环境保留，可只在production配置中开启serviceWorker: true。

3. 启用热模块替换（HMR）优化重载
   在serve的options中添加HMR配置，减少全页重载的次数，同时避免重复编译：

   "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
       "browserTarget": "app:build",
       "hmr": true,
       "liveReload": true
     },
     // ... 其他配置
   }
   

额外优化步骤 #

• 添加文件监听排除项
  在build的options中加入watchOptions，排除无需监听的目录，避免无关文件变化触发编译：

  "watchOptions": {
    "ignored": ["node_modules/**", "dist/**", "**/*.log"]
  }
  

• 修复CSS选择器警告
  控制台中出现的:host-context相关警告，是Ionic版本与Angular CSS编译器不兼容导致的。升级Ionic和Angular到匹配的稳定版本（比如Ionic 6+搭配Angular 14+），可消除这些警告，避免编译流程因错误处理重复触发。

• 修正字体加载方式
  字体解析错误虽不直接导致重复编译，但会引发页面资源重复请求。将Google Fonts的引入改为在index.html中直接添加<link>标签：

  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  

  替代CSS中的@import，避免字体资源加载异常。

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