Angular4讀取本地文件

我嘗試讀取我的image文件夾中的所有文件名avatar但出現錯誤。Angular4讀取本地文件

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

來源

2017-07-02 Samy

fs是節點內置庫;你爲什麼要在nodejs上運行angular？ – nadavvadan

那麼，如何在沒有fs的情況下讀取本地文件？ – Samy

您的文件夾結構 – Aravind

-2

在你的代碼中，行var filesystem = require('fs')定義變量指定的文件系統將接收一切出口由模塊'fs'。這個模塊在你的應用程序的外部。這是第三方庫（由其他人開發）知道如何創建，讀取和寫入文件。 import子句告訴javascript運行時獲取模塊中的代碼並在代碼中使用它。 Webpack將得到這個導入語句，並將所有必要的代碼和'pack'複製到你的代碼中。

這個第三方庫通常會直接提供給您的應用程序。在使用它之前，您必須將它們複製並放入應用程序文件夾中。

在角度上，有一個簡單的方法來做到這一點。您可以使用NPM（節點包管理器）來安裝代碼依賴的所有第三方（稱爲依賴關係）。爲此，請到您的基礎文件夾（您的應用程序的根目錄）並使用命令：npm install fs --save。該命令將下載fs模塊並將其保存在您的庫目錄中並更新您的package.json。當你的包被創建時，這個文件被Webpack讀取。

來源

2017-07-02 14:27:38

fs是一個內置的nodejs庫，而不是其他人的第三方庫。正如在評論中看到的，OP似乎將前端與後端JavaScript混爲一談。 – nadavvadan

對。我沒有想過觀點。 –

Angular4讀取本地文件

回答

相關問題