Angular4ローカルファイルを読み取る

Question

imageフォルダavatarのすべてのファイル名を読み取ろうとしていますが、エラーが発生しています。

Cannot find name 'require'. 

私はavatar内のファイルがたくさんあると<images>要素としてそれらを一覧表示します。それで、なぜ私はフォルダ内のファイル名を取得しようとしたのですか？

私は私のフォルダ構造がある角度4.2.5とのWebPACK

import { Component, Input } from '@angular/core'; 


var filesystem = require('fs') 

const AVATAR_PATH = '../assets/img/avatar' 

@Component({ 
    selector: 'profile', 
    templateUrl: 'profile.component.html', 
    styleUrls: ['profile.component.scss'] 
}) 
export class ProfileComponent { 

    path = AVATAR_PATH; 


    constructor() { 
    console.log(this.getFileNames(AVATAR_PATH)); 
    } 


    getFileNames(dir) 
    { 
    let results =[]; 
    filesystem.readdir(dir).forEach(function(file) { 

     file = dir+'/'+file; 
     results.push(file); 
    }); 

    return results; 
    } 
} 

を使用しています：あなたのコードで

-app 
---|room 
------|profile 
---|assets 
------|image 
----------|avatar 

Answer 1

、ラインvar filesystem = require('fs')がエクスポートすべてを受け取るファイルシステムという名前の変数を定義しますモジュール 'fs'によってこのモジュールはあなたのアプリケーションの外部にあります。これは、ファイルの作成、読み取り、書き込みの方法を知っている第三者図書館（他人が開発した図書館）です。 import句は、モジュール内のコードを取得してコード内で使用するようにjavascriptランタイムに指示します。 Webpackはこのimport文を取得し、コード内に必要なすべてのコードと 'pack'をコピーします。

通常、このサードパーティのライブラリはアプリケーションで直接利用できます。使用する前に、それらをコピーしてアプリケーションフォルダに配置する必要があります。

角度では、これを行う簡単な方法があります。 NPM（ノードパッケージマネージャ）を使用して、コードが依存するすべてのサードパーティをインストールします（依存関係として認識されます）。これを行うには、基本フォルダ（アプリケーションのルート）に移動し、コマンド：npm install fs --saveを使用します。このコマンドは、fsモジュールをダウンロードしてライブラリディレクトリに保存し、package.jsonを更新します。バンドルが作成されると、このファイルはWebpackによって読み取られます。