Question

我想在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中看到一个Cannot load module "example.txt"错误，当我运行ng build时，出现以下错误。

src / app / app.component.ts（2,17）中的错误：错误TS2307：找不到模块“ 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;
}

我再次运行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

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

我在与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'

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

Answer 1

使用Ivy在Angular 9,10中工作

所以我终于从this comment on an issue开始工作了，如果有人需要帮助，这就是我采取的步骤。

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

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

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

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

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

确保您的tsconfig文件了解textfile.d.ts

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

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

完成！该项目现在应在9,10角提供服务/建造

Answer 2

我知道了，答案在原始加载器文档页面上。在底部，它说明您必须在导入路径前加上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相关的所有内容。因此，我发现其他人的搜索结果中都出现了这种情况。

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

2 个答案: