Angular 12 升级问题：您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件

Posted 2023-03-13

【中文标题】Angular 12 升级问题：您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件

【英文标题】：Angular 12 upgrade issue : You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

【发布时间】：2021-08-13 09:57:31

【问题描述】：

我已从 Agular 11 升级到 12，每个 SVG 文件都出现以下错误。

错误：模块解析失败：意外令牌 (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。

例如 SVG 文件

  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48">
        <linearGradient id="linear-gradient-searchquery" x1="-5.5" y1="41.5" x2="35" y2="1" gradientTransform="matrix(1, 0, 0, -1, 0, 48)" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#fff"/>
          <stop offset="0.232" stop-color="#fafafa"/>
          <stop offset="0.496" stop-color="#ededed"/>
          <stop offset="0.775" stop-color="#d6d6d6"/>
          <stop offset="1" stop-color="#bebebe"/>
        </linearGradient>
        <linearGradient id="paper_gradient-searchquery" data-name="paper gradient" x1="19.25" y1="44.25" x2="32.25" y2="31.25" gradientTransform="matrix(1, 0, 0, -1, 0, 48)" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#fff"/>
          <stop offset="0.221" stop-color="#f8f8f8"/>
          <stop offset="0.541" stop-color="#e5e5e5"/>
          <stop offset="0.92" stop-color="#c6c6c6"/>
          <stop offset="1" stop-color="#bebebe"/>
        </linearGradient>
        <linearGradient id="Dark_Blue_Grad_2" data-name="Dark Blue Grad 2" x1="20.172" y1="39.828" x2="23.172" y2="42.828" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#74b3c7"/>
          <stop offset="0.177" stop-color="#6badc2"/>
          <stop offset="0.464" stop-color="#539db4"/>
          <stop offset="0.822" stop-color="#2d839d"/>
          <stop offset="1" stop-color="#177490"/>
        </linearGradient>
      <polygon points="22.5 0.5 0.5 0.5 0.5 46.5 35.5 46.5 35.5 13.5 22.5 0.5" stroke="#464646" stroke-miterlimit="10" fill="url(#linear-gradient-searchquery)"/>
      <polygon points="22.5 0.5 22.5 13.5 35.5 13.5 22.5 0.5" stroke="#464646" stroke-linejoin="round" fill="url(#paper_gradient-searchquery)"/>
      <rect x="5.5" y="37.5"   fill="none" stroke="#464646" stroke-miterlimit="10"/>
      <rect x="5.5" y="30.5"   fill="none" stroke="#464646" stroke-miterlimit="10"/>
      <rect x="5.5" y="23.5"   fill="none" stroke="#464646" stroke-miterlimit="10"/>
      <rect x="5.5" y="16.5"   fill="none" stroke="#464646" stroke-miterlimit="10"/>
      <path id="_Compound_Path_" data-name="&lt;Compound Path&gt;" d="M25.672,34.328l-9.586,9.586a2,2,0,0,0,0,2.829l.171.171a2,2,0,0,0,2.829,0l9.586-9.586" transform="translate(0)" stroke="#464646" stroke-miterlimit="10" fill="url(#Dark_Blue_Grad_2)"/>
      <circle cx="35.5" cy="27.5" r="12" fill="#f0f0f0" stroke="#464646" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>

请帮忙解决。

【问题讨论】：

我在 PNG 和 SVG 上也有同样的问题，也许还有更多。还注意到它正在加载/解析我什至没有导入语句的 SCSS 文件。他们做出了非常奇怪的改变。如果我找到答案，我会告诉你

您可能正在使用 'require(path/to/svg)' 似乎不再支持这样的 require 语句？您可以设置自定义 webpack 配置，然后通过使用文件复制来再次支持这些配置。

【参考方案1】：

我遇到了同样的问题，经过几次搜索后，我才意识到这个错误是由 Webpack 5 的重大更改（在 Angular 12 中遇到的）引起的。在以前的版本中，资产是用加载器加载的，现在 Assets Modules 替换所有这些加载器 doc

就我而言：我将import 更改为new URL(path, import.meta.url) 并解决了错误

【讨论】：

就我而言，我必须将require('../assets/xxx.svg').default 更改为new URL('../assets/xxx.svg', import.meta.url)。

离合器！这就是我一直在寻找的答案。

是否会像使用 require/import 一样复制引用的资产以使用哈希构建根目录？

是的，这就是我使用导入加载资产的原因：使用哈希添加资产并避免添加为简单资产。

【参考方案2】：

我也有同样的问题，然后我解决了我的问题如下。

我有icons.js 文件，我将它与Angular 11 一起使用如下。

import Calendar from "../assets/icons/calendar.svg";
import Menu from "../assets/icons/menu.svg";
import User from "../assets/icons/user.svg";

export default 
    Calendar,
    Menu,
    User
;

在Angular 13 升级后，上面的用法给了我一个错误，因为问题中我是根据@ebhh2001 的建议更改我的用法，如下所示。

const Calendar = new URL( "../assets/icons/calendar.svg", import.meta.url);
const Menu = new URL( "../assets/icons/menu.svg", import.meta.url);
const User = new URL( "../assets/icons/user.svg", import.meta.url);

export default 
    Calendar,
    Menu,
    User
;

现在可以正常使用了。