web-dev-qa-db-ja.com

Angular 7でraw-loaderを設定してテキストファイルをロードする方法は？

Angular 7でraw-loaderを使用して、テキストファイルをTypeScriptソースコードにインポートします。この件に関する多くの情報を見つけ、それを取得するために数時間を費やしました動作しますが、動作しません。

新しいプロジェクトを作成することから始めます

ng new example --defaults --minimal

「Hello World」というメッセージを含むテキストファイルを/src/app/example.txtに作成します

次に、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」が見つかりません

だから私はこの問題を解決する方法をグーグル検索し、私はこの答えを見つけました。

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」を解決できません

長いグーグルの後、Raw-LoaderをAngularにカスタムWebpack構成を使用して追加する必要があると思います。これにより、このブログ記事の説明が表示されます。

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」を解決できません

私はこの時点を乗り越えることができませんでした、そして私がこれまでにグーグル化したすべてはこれが方法それが行われることになっていることを意味するようです。 Module not foundエラーメッセージは非常に広範囲であり、Angular 7.に固有のメッセージは見つかりません。

javascriptangulartypescriptwebpack
8
Reactgular

私はそれを理解し、答えはローローダーのドキュメントページにありました。下部には、インポートパスの前に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を構成する必要があります。次に、ファイルを正しくインポートする方法を知る必要があります。

Angular 7.に関連しているため、すべてのGoogle検索結果にはすべてが表示されていませんでした。したがって、他の人の検索結果でこのことが判明しました。

5
Reactgular