2017-05-17 9 views
0

ビルド時に、ファイルの内容をロードしてTypeScriptの文字列として注入したいと思っています。私はこのコードは通常サーバーコードであると理解していますが、私が望むのは、ファイルを読み込んでその内容を文字列として注入するビルドステップを持つことです。私は私がこれを行うことができるようにすべきだと思うどのbabel-plugin-static-fsを発見したが、私はもともと(ngを使用していたビルド時にAngularでスタティックファイルをロードする

template: `<pre>"Hello World"</pre>` 

example.codeを想定し

import { readFileSync } from 'fs'; 
import { Component } from '@angular/core'; 

@Component({ 
    template: `<pre>${readFileSync('./example.code')}</pre>` 
}) 
export class ExampleComponent { } 

はちょうど私がこのファイルとして構築されたいと思う"Hello World"を持っていますangle-cli)を使ってプロジェクトを構築します。それはのように思える、私はwebpackを実行したとき、私はローダーの順序を逆にした場合しかし

module: { 
    rules: [ 
    /* snip */ 
    { 
     "test": /\.ts$/, 
     "use": [ 
     { 
      loader: "babel-loader", 
      options: { 
      plugins: ['babel-plugin-static-fs'] 
      } 
     }, 
     { 
      "loader": "@ngtools/webpack" 
     }, ] } ] } 

、私はまだ

Cannot find module 'fs'

取得:私はWebPACKのng ejectを行って、更新されていますババエルは、上記の@Componentなどのmayアノテーションで使用されている@が好きではないので、ローダーが機能しません。

Angularプロジェクトのビルド中に静的コンテンツとしてファイルをロードする方法はありますか?

+0

WebPackは、インポートされたものをバンドルします。 'import str from 'を試しましたか?/ example.code''? * .codeルールにローダーを割り当てる必要があるかもしれません。 – cgTag

+0

@ThinkingMediaこれは単なる例です。ファイル自体がタイプスクリプトファイルである可能性があります。私はこれらのファイルからソースコードを欲し、これらのファイルのいくつかはプロジェクトのソースコードとして使用することができますので、私はそれらのファイルを飛ばすことはできません。 –

+0

ローダーは、ファイル拡張子やファイル自体の位置に基づいて適切に設定できます。それは比較的簡単です。 –

答えて

0

実際問題は、AngularがAoT用に作成して使用するtsconfig.app.jsonファイルに関連しています。これは、実際にロード@types/nodeとなるプロジェクトを実際に構築するために使用されたtsconfig.jsonとは別です。

あなたはng newでプロジェクトを作成した場合、あなたはtsconfig.app.jsonを変更することができます。

- "types": [], 
+ "types": ["node"], 

これは、IBMアカデミーコンパイラが@types/nodeから型定義を使用しています。

関連する問題