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

我想在我的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中看到无法加载模块“example.txt”错误,当我运行构建时,我收到以下错误.

ERROR in src/app/app.component.ts(2,17): error TS2307: Cannot find module ‘example.txt’

所以我用Google搜索了如何解决这个问题,我找到了答案.

How to import JSON File into a TypeScript file?

然后我添加一个带有以下内容的/src/typings.d.ts文件,这将修复WebStorm中的错误.

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

我再次运行构建,错误消息更改为说它找不到模块.

Module not found: Error: Can’t resolve ‘example.txt’ in ‘C:\work\temp\example\src\app’

经过一段漫长的谷歌搜索,我想我需要使用自定义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但得到相同的错误.

Module not found: Error: Can’t resolve ‘example.txt’ in ‘C:\work\temp\example\src\app’

我一直无法超越这一点,到目前为止我用Google搜索的所有内容似乎暗示这就是应该如何完成的.未找到模块错误消息非常广泛,我找不到任何特定于Angular 7的内容.

解决方法:

我想通了,答案是在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以使用加载器,然后您必须知道如何正确导入文件.

没有任何谷歌搜索结果显示所有内容,因为它与Angular 7有关.所以我发现这在其他人的搜索结果中出现了.