title: how to use file system (fs) in angular 2
body: <p>In my angular 2 application, need to use file system for uploading large files to Amazon S3 server. But, I have problem in importing file system in my application. Please help to implement file system in my application. </p>
  
  <p>My component.ts file</p>
  
  <pre><code>import { Component,ViewChild } from '@angular/core';
  import * as fs from 'fs';
  /* External Services */
  import { ApiWebConfig } from '../../../core/config/app.config';
  
  declare var $:any;
  @Component({
    selector: 'content-uploadpart',
    templateUrl: './app/modules/uploadpartcontent.html'
  })
  export class ContentUploadPartComponent {
    constructor( private config:ApiWebConfig ) { }  
    uploadToAWS(file:any) {
      var buffer = fs.readFile() 
      console.log('buffer',buffer);
    }
    ngOnInit() { }
  }
  </code></pre>
  
  <p>And my uploadpartcontent.html</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12 upload_part_wrap"&gt;
              &lt;input #fileUpload (change)="uploadToAWS($event)" type="file" value="Browse" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My Package.json file</p>
  
  <pre><code>{
    "name": "my-project",
    "version": "1.0.0",
    "description": "QuickStart package.json from the documentation, supplemented with testing support",
    "scripts": {
      "start": "tsc &amp;&amp; concurrently \"tsc -w\" \"lite-server\" ",
      "e2e": "tsc &amp;&amp; concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
      "lint": "tslint ./app/**/*.ts -t verbose",
      "lite": "lite-server",
      "pree2e": "webdriver-manager update",
      "test": "tsc &amp;&amp; concurrently \"tsc -w\" \"karma start karma.conf.js\"",
      "test-once": "tsc &amp;&amp; karma start karma.conf.js --single-run",
      "tsc": "tsc",
      "tsc:w": "tsc -w"
    },
    "keywords": [],
    "author": "",
    "license": "MIT",
    "dependencies": {
      "@angular/common": "~2.4.0",
      "@angular/compiler": "~2.4.0",
      "@angular/core": "~2.4.0",
      "@angular/forms": "~2.4.0",
      "@angular/http": "~2.4.0",
      "@angular/platform-browser": "~2.4.0",
      "@angular/platform-browser-dynamic": "~2.4.0",
      "@angular/router": "~3.4.0",
      "@types/filesystem": "0.0.28",
      "angular-in-memory-web-api": "~0.2.4",
      "aws-sdk": "2.14.0",
      "core-js": "^2.4.1",
      "fs-extra": "^2.1.2",
      "rxjs": "5.0.1",
      "systemjs": "0.19.40",
      "zone.js": "^0.7.4"
    },
    "devDependencies": {
      "@types/jasmine": "^2.5.36",
      "@types/node": "^6.0.46",
      "canonical-path": "0.0.2",
      "concurrently": "^3.1.0",
      "http-server": "^0.9.0",
      "jasmine-core": "~2.4.1",
      "karma": "^1.3.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "lite-server": "^2.2.2",
      "lodash": "^4.16.4",
      "protractor": "~4.0.14",
      "rimraf": "^2.5.4",
      "tslint": "^3.15.1",
      "typescript": "~2.0.10"
    },
    "repository": {}
  }
  </code></pre>
  
  <p>and System.config.js goes as follow:</p>
  
  <pre><code>/**
   * System configuration for Angular samples
   * Adjust as necessary for your application needs.
   */
  (function (global) {
    System.config({
      paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
      },
      // map tells the System loader where to look for things
      map: {
        // our app is within the app folder
        app: 'app',
  
        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  
        // other libraries
        'rxjs':                      'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
        'fs': 'npm:fs-extra/lib'
      },
      // packages tells the System loader how to load when no filename and/or no extension
      packages: {
        app: {
          main: './main.js',
          defaultExtension: 'js'
        },
        rxjs: {
          defaultExtension: 'js'
        },
        'fs': { 
          main: 'index.js', 
          defaultExtension: 'js' 
        }
      }
    });
  })(this);
  </code></pre>
  
  <p>after running my project, i get this following error.</p>
  
  <p><a href="https://i.stack.imgur.com/HxI7l.png" rel="noreferrer">Console Error after running the code</a></p>