如何在 Angular 7 中配置 raw-loader 来加载文本文件？

Question

我想在 Angular 7 中使用 raw-loader 将文本文件导入我的 TypeScript 源代码。我找到了大量关于该主题的信息，并花了几个小时试图让它发挥作用，但我无法让它发挥作用。

我首先创建一个新项目

ng new example --defaults --minimal

我在/src/app/example.txt 创建了一个文本文件，其中包含消息“Hello World”

然后我修改app.component.ts 文件来导入这个文本文件。

import {Component} from '@angular/core';
import str from 'example.txt';

alert(str);

@Component({
    selector: 'app-root',
    template: ``,
    styles: []
})
export class AppComponent {
}

我在 WebStorm 中看到 Cannot load module "example.txt" 错误，当我运行 ng build 时出现以下错误。

src/app/app.component.ts(2,17) 中的错误：错误 TS2307：找不到模块“example.txt”

所以我用谷歌搜索了如何解决这个问题，我找到了这个答案。

How to import JSON File into a TypeScript file?

然后我添加了一个/src/typings.d.ts 包含以下内容的文件，这修复了WebStorm 中的错误。

declare module "*.txt" {
    const value: string;
    export default value;
}

我再次运行ng build，错误消息变为找不到模块。

找不到模块：错误：无法解析“C:\work\temp\example\src\app”中的“example.txt”

经过长时间的谷歌搜索，我认为我需要使用自定义 webpack 配置向 Angular 添加一个 raw-loader。这让我看到了这篇带有说明的博文。

https://codeburst.io/customizing-angular-cli-6-build-an-alternative-to-ng-eject-a48304cd3b21

所以我安装了 custom-webpack

npm i -D @angular-builders/custom-webpack

我编辑我的angular.json，以便构建使用extra-webpack.config.js，就像这样。

          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js"
            },

我在与angular.json 相同的文件夹中创建extra-webpack.config.js，内容如下。

module.exports = {
    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            }
        ]
    }
};

我尝试再次构建 ng build 但得到同样的错误。

找不到模块：错误：无法解析“C:\work\temp\example\src\app”中的“example.txt”

我一直无法超越这一点，到目前为止，我在 Google 上搜索到的所有内容似乎都暗示这是应该如何完成的。 Module not found 错误消息非常广泛，我找不到任何特定于 Angular 7 的信息。

Answer 1

我想通了，答案在 raw-loader 文档页面上。在底部它解释说你必须在导入路径前加上raw-loader!

https://webpack.js.org/loaders/raw-loader/#examples

import {Component} from '@angular/core';
import str from 'raw-loader!./example.txt';

alert(str);

@Component({
    selector: 'app-root',
    template: ``,
    styles: []
})
export class AppComponent {
}

我发现这很难弄清楚。你必须弄清楚如何让 TypeScript 识别模块，然后你必须配置 Angular 以使用加载器，然后你必须知道如何正确导入文件。

Google 搜索结果中没有一个显示与 Angular 7 相关的所有内容。所以我发现这出现在其他人的搜索结果中。

Answer 2

使用 Ivy 在 Angular 9,10 中工作

所以我终于让它工作了，来自this comment on an issue，这是我采取的步骤，如果其他人正在寻求帮助。

1. yarn add -D @angular-builders/custom-webpack raw-loader

2. 将angular.json 改为使用@angular-builders/custom-webpack

...
"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.partial.js"
      },
  ...
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "browserTarget": "PROJECTNAME:build"
    },
  ...

1. 在angular.json旁边添加文件webpack.partial.js

module.exports = {
  module: {
    rules: [
      { test: /\.(txt|md)$/, loader: 'raw-loader' }
    ]
  } 
};

4. 在文件./types/textfile.d.ts中添加类型声明

declare module '!raw-loader!*' {
  const contents: string;
  export = contents;
}

5. 确保您的tsconfig 文件知道textfile.d.ts

{
  "compilerOptions": {
...
    "typeRoots": ["node_modules/@types", "./types"],
...                                       // ^ this is important
}

6. 使用 require 语法导入您的文本文件

import { Component } from '@angular/core';

const myText = require('!raw-loader!./my-text-file.txt');

@Component({
  template: `<pre>{{myText}}</pre>`,
})
export class ChangeLogComponent {
  myText = myText;
}

1. 完成！该项目现在应该在 Angular 9,10 中提供/构建