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

Question

我想在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 {
}

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

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

因此，我用Google搜索了如何解决此问题，并找到了答案。

如何将JSON文件导入TypeScript文件？

然后，我添加一个/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添加原始加载器。这将我带到此博客文章，并附有说明。

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

所以我安装了自定义的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"
            },

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

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

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

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

我一直无法让过去这一点上，和一切我一派到目前为止似乎在暗示，这是怎么它应该做。Module not found错误消息非常广泛，我找不到特定于Angular 7的任何内容。

Answer 1

我想通了，答案就在原始加载程序文档页面上。在底部，它说明您必须在导入路径前加上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

所以我终于让它工作了，从这个问题的评论中，如果其他人正在寻求帮助，这是我采取的步骤。

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"
    },
  ...

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

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;
}

7. 完毕！该项目现在应该以 9,10 角度服务/构建