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

fs是节点内置库;你为什么要在nodejs上运行angular？ – nadavvadan

那么，如何在没有fs的情况下读取本地文件？ – Samy

您的文件夹结构 – Aravind

答

在你的代码中，行var filesystem = require('fs')定义变量指定的文件系统将接收一切出口由模块'fs'。这个模块在你的应用程序的外部。这是第三方库（由其他人开发）知道如何创建，读取和写入文件。 import子句告诉javascript运行时获取模块中的代码并在代码中使用它。 Webpack将得到这个导入语句，并将所有必要的代码和'pack'复制到你的代码中。

这个第三方库通常会直接提供给您的应用程序。在使用它之前，您必须将它们复制并放入应用程序文件夹中。

在角度上，有一个简单的方法来做到这一点。您可以使用NPM（节点包管理器）来安装代码依赖的所有第三方（称为依赖关系）。为此，请到您的基础文件夹（您的应用程序的根目录）并使用命令：npm install fs --save。该命令将下载fs模块并将其保存在您的库目录中并更新您的package.json。当你的包被创建时，这个文件被Webpack读取。

fs是一个内置的nodejs库，而不是其他人的第三方库。正如在评论中看到的，OP似乎将前端与后端JavaScript混为一谈。 – nadavvadan

对。我没有想过观点。 –

Angular4读取本地文件

相关推荐