Angular11升级至12后SVG文件提示无对应loader处理错误如何解决

Angular 12 重构了内置资源处理逻辑，废弃了旧版本默认对 SVG 文件自动应用的 raw-loader 规则，默认没有配置对应loader处理直接导入的SVG文件，因此出现模块解析失败报错。

场景1：SVG作为静态图片资源引用（用在<img src>等位置） #

• 方案A：导入时增加资源标记，修改导入语句为

import yourSvg from './your-svg-file.svg?asset';

• 方案B：统一托管到静态资源目录，在angular.json中找到对应项目的projects -> [项目名] -> architect -> build -> options -> assets配置项，新增SVG资源映射：

{
  "glob": "**/*.svg",
  "input": "src/assets/svg",
  "output": "assets/svg"
}

之后直接通过路径引用即可，无需import：

<img src="/assets/svg/your-svg-file.svg" alt="icon">

场景2：需要获取SVG字符串内容直接嵌入模板渲染 #

1. 安装raw-loader依赖

npm install raw-loader --save-dev

2. 导入时指定loader：

import yourSvgContent from 'raw-loader!./your-svg-file.svg';

拿到的字符串可直接绑定到模板的innerHTML属性使用。

额外注意项 #

• 若项目使用了@angular-svg-icon、ng-inline-svg等第三方SVG处理库，需将依赖升级到适配Angular 12的对应版本。
• 若自定义了webpack配置，需删除旧版本中自行添加的SVG处理loader规则，避免和Angular内置规则冲突。

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