Webpack raw-loader在Angular更新后不工作

o2rvlv0m 于 2023-03-30 发布在 Webpack

关注(0)|答案(2)|浏览(160)

我最近更新了我的Angular应用程序到V12。我使用Angular自己的国际化库@angular/localize。我使用webpack的raw-loader将xlf翻译文件作为字符串加载到我的main.ts中，使用以下代码

const locale = document['locale'] as string;
const translations =   require(`raw-loader!./assets/locale/messages.${locale}.xlf`).default;

platformBrowserDynamic().bootstrapModule(AppModule, {
providers: [
{ provide: TRANSLATIONS, useValue: translations },
{ provide: LOCALE_ID, useValue: locale },
{ provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }
 ]
});

更新后我得到以下错误错误：未找到模块：错误：无法解析“raw-loader”
这可能是什么原因呢？除了raw-loader还有其他方法吗？

webpack

来源：https://stackoverflow.com/questions/71437729/webpack-raw-loader-not-working-after-angular-update

2条答案

按热度按时间

ozxc1zmp1#

我在迁移angular版本时遇到了这个问题，我已经用npm install raw-loader --save-dev解决了这个问题。这是因为angular 12现在使用webpack 5。如果你不能解决这个问题，请尝试更改const translations = require（raw-loader!./assets/locale/messages.${locale}.xlf）.default;对于ES导入动态声明，比如在你的例子中，你在里面使用了一个变量${locale}，也许你可以看看这篇文章ES6 variable import name in node.js?。并使用！！raw-loader......而不是raw-loader

赞(0）回复(0）举报 2023-03-30

yrdbyhpb2#

**自webpack版本5起，raw-loader等加载器的使用已被弃用，并被称为Asset Modules的概念所取代。

要做到这一点，你首先需要定义如何加载资源。这在webpack的config中完成。raw-loader的替代品是asset/source类型：

网络包配置

module.exports = {
  ...
  module: {
    rules: [
      {
       test: /\.xlf/,
       type: 'asset/source',
      }
    ]
  },
};

之后，您可以像任何其他本地依赖项一样导入资产文件：

main.ts

const translations = require(`./assets/locale/messages.${locale}.xlf`).default;

赞(0）回复(0）举报 2023-03-30

我来回答

Webpack raw-loader在Angular更新后不工作

2条答案

网络包配置

main.ts

相关问题

热门标签

最新问答