Как настроить raw-загрузчик в Angular 7 для загрузки текстовых файлов?

Question

Я хочу использовать raw-загрузчик с моим 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'

Так что я гуглил, как решить эту проблему, и нашел этот ответ.

Как импортировать файл JSON в файл TypeScript?

Затем я добавляю файл /src/typings.d.ts со следующим содержимым, и это исправляет ошибку в WebStorm.

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

Я снова запускаю ng build, и сообщение об ошибке меняется, говоря, что он не может найти модуль.

Модуль не найден: Ошибка: не удается разрешить файл «example.txt» в «C: \ work \ temp \ example \ src \ app»

После долгого поиска в Google, я думаю, что мне нужно добавить raw-загрузчик в 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, но получаю ту же ошибку.

Модуль не найден: Ошибка: не удается разрешить файл «example.txt» в «C: \ work \ temp \ example \ src \ app»

Мне не удалось обойти эту точку, и все, что я до сих пор гуглял, похоже, подразумевает, что это как это должно быть сделано. Module not found Сообщения об ошибках очень широки, и я не могу найти ничего специфического для Angular 7.

Answer 1

Я понял это, и ответ был на странице документации по raw-загрузчику. Внизу объясняется, что вы должны префикс пути импорта с 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. Так что я обнаружил, что это появляется в результатах поиска для других людей.