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

问题描述

我想在我的Angular 7中使用raw-loader将文本文件导入到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.

我首先创建一个新项目

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'

所以我用Google搜索了如何解决此问题，并找到了答案.

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

如何将JSON文件导入TypeScript文件?/a>

How to import JSON File into a TypeScript file?

然后我添加一个具有以下内容的/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 \ temp \ example \ src \ app'中解析'example.txt'

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

经过长时间的谷歌搜索，我认为我需要使用自定义的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 \ temp \ example \ src \ app'中解析'example.txt'

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

我一直无法超越这一点，到目前为止，我在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"
      },
  ...
  "build": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "browserTarget": "PROJECTNAME:build"
    },
  ...

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

1. add file webpack.partial.js next to angular.json

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屋！