如何在 Angular 7 中配置 raw-loader 来加载文本文件? [英] How to configure raw-loader in Angular 7 to load text files?

问题描述

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

I want to use a raw-loader with my Angular 7 to import text files into my TypeScript source code. I've found plenty of information on the subject and spent a few hours trying to get it to work, but I can not get it to work.

我从创建一个新项目开始

I start by creating a new project

ng new example --defaults --minimal

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

I create a text file at /src/app/example.txt with the message "Hello World"

然后我修改 app.component.ts 文件以导入此文本文件.

I then modify the app.component.ts file to import this text file.

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 时出现以下错误.

I see a Cannot load module "example.txt" error in WebStorm, and when I run ng build and I get the following error.

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

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

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

So I Googled how to resolve this issue and I found this answer.

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

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

I then add a /src/typings.d.ts file with the following contents, and this fixes the error in WebStorm.

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

我再次运行 ng build 并且错误消息更改为找不到模块.

I run ng build again and the error message changes to say it can't find the module.

未找到模块:错误:无法解析C:work empexamplesrcapp"中的example.txt"

Module not found: Error: Can't resolve 'example.txt' in 'C:work empexamplesrcapp'

经过长时间的谷歌搜索后，我认为我需要使用自定义 webpack 配置向 Angular 添加一个原始加载器.这让我看到了这篇包含说明的博文.

After some lengthy Googling, I figure that I need to add a raw-loader to Angular using a custom webpack configuration. Which leads me to this blog post with instructions.

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 像这样.

I edit my angular.json so that the build uses extra-webpack.config.js like so.

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

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

I create the extra-webpack.config.js in the same folder as angular.json with the following contents.

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

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

I try building again ng build but get the same error.

未找到模块:错误:无法解析C:work empexamplesrcapp"中的example.txt"

Module not found: Error: Can't resolve 'example.txt' in 'C:work empexamplesrcapp'

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

I have been unable to get past this point, and everything I've Googled so far seems to imply that this is how it's supposed to be done. Module not found error messages are very broad and I can not find anything specific to Angular 7.

推荐答案

与 Ivy 一起使用 Angular 9,10

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

So I finally got it working, from this comment on an issue, here's the steps I took, if anyone else is looking for help.

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

更改 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' }
    ]
  } 
};

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

1. add type declaration in file ./types/textfile.d.ts

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

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

1. make sure that your tsconfig file knows about textfile.d.ts

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

1. 使用require语法导入文本文件

1. import your text files using require syntax

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. 完成！该项目现在应该以 9,10 的角度提供/构建

这篇关于如何在 Angular 7 中配置 raw-loader 来加载文本文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！