Javascript 如何在Angular 7中配置原始加载程序以加载文本文件？

我想在Angular 7中使用原始加载程序将文本文件导入到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”

错误，当我运行

ng build

时，我得到以下错误

src/app/app.component.ts（2,17）中出错：错误TS2307:找不到模块'example.txt'

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

然后，我添加了一个包含以下内容的

/src/typings.d.ts

文件，这修复了WebStorm中的错误

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

我再次运行

ng build

，错误消息变为无法找到模块

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

在长时间的谷歌搜索之后，我想我需要使用自定义的网页配置向Angular添加一个原始加载程序。这让我找到了这篇带有说明的博文

所以我安装了自定义网页包

我编辑我的

angular.json

，以便构建像这样使用

额外的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”

---

我一直无法超越这一点，我在谷歌上搜索到的一切似乎都暗示这就是应该做的<代码>模块未找到错误消息非常广泛，我找不到Angular 7的任何特定信息。

我找到了答案，答案在原始加载程序文档页面上。在底部，它解释了您必须在导入路径前面加上

raw loader


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

谷歌的搜索结果中没有一个显示所有与Angular 7相关的内容。所以我在其他人的搜索结果中发现了这一点。
在Angular 9,10中与常春藤一起工作

所以我终于让它工作了，从，这里是我采取的步骤，如果其他人正在寻求帮助

纱线添加-D@angular builders/定制网页包装原始加载器


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


将文件
webpack.partial.js
添加到
angular.json
module.exports={
模块：{
规则：[
{test://\（txt | md）$/，加载程序：“原始加载程序”}
]
} 
};

在文件
/types/textfile.d.ts
声明模块'！原始装载机！*'{
常量内容：字符串；
导出=内容；
}

确保您的
tsconfig
文件了解
textfile.d.ts
使用require语法导入文本文件
从'@angular/core'导入{Component}；
const myText=require（'！raw loader！。/my text file.txt'）；
@组成部分({
模板：`{myText}}}`，
})
导出类ChangeLogComponent{
myText=myText；
}

完成了！该项目现在应该在9,10提供服务/建造
我知道您已经将“Hello world”放在了这里，但您是否打算将example.txt作为静态字符串使用？@Vega我需要大字符串，它们也是捆绑包的一部分。我知道这在webpack上是可能的，因为我以前在其他JavaScript项目上也这样做过。我根本无法实现这一点，你能链接到存储库或stackblitz吗？我必须使用
！！原始装载机！绝对/路径/到/文件
，按照相同的说明。谢谢谢谢，这在启用常春藤的Angular 10中确实有效。我在配置时出错
发生未处理的异常：无法读取未定义的属性“flags”
module.exports = {
    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            }
        ]
    }
};

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

alert(str);

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

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

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

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

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

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