ng serve报错排查：旧Angular项目启动raw-loader相关问题

我之前也踩过类似Angular旧项目依赖兼容的坑，尤其是这种明明没在package.json里声明的loader却报错的情况，给你几个实用的排查和解决方向：

• 清理依赖缓存并重新安装
  Angular CLI本身会隐式依赖webpack和一系列loader（包括raw-loader），升级CLI后很可能出现子依赖版本不匹配的问题。先彻底清理旧依赖：

  1. 删除项目根目录下的node_modules文件夹、package-lock.json（或yarn.lock）
  2. 执行npm cache clean --force（用yarn的话就执行yarn cache clean）
  3. 重新执行npm install（或yarn install）
     这一步很多时候能搞定隐式依赖缺失或版本冲突的问题。

• 排查项目中是否有隐式使用raw-loader的代码
  虽然你的package.json里没直接声明raw-loader，但项目代码里可能藏着内联loader的写法，比如：

  const template = require('!!raw-loader!./custom-template.html');
  

  或者在angular.json的assets/scripts配置里，有需要用raw-loader处理的文件类型。可以全局搜索项目文件中的raw-loader字符串，找到这类用法后，要么调整代码适配当前CLI版本，要么确保对应的loader已正确安装。

• 手动添加兼容版本的raw-loader
  如果确认是raw-loader缺失导致的报错，可以根据当前Angular CLI的版本手动安装对应的raw-loader：

  • Angular 12及以上版本：执行npm install raw-loader@4.x --save-dev
  • Angular 11及以下版本：执行npm install raw-loader@3.x --save-dev
    安装完成后再尝试ng serve，大概率能解决问题。

• 检查并更新angular.json配置
  旧项目的angular.json可能存在过时的配置项，比如build选项中的loader规则、assets处理方式等。你可以新建一个同版本的Angular空白项目，对比两个项目的angular.json结构，把旧项目中过时的配置更新为新的格式，尤其是build和serve部分的options配置。

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