title: Angular2 CLI what is different from ng build and auto reload?
body: <blockquote>
    <p>When i do <code>ng build</code> i have a set of files in my <code>/dist/vendor</code> folder. </p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/L4JpC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L4JpC.png" alt="enter image description here"></a> </p>
  
  <blockquote>
    <p>But when a file change is detected with the magic scripts that reload the browser page, and some other magic that they do, my <code>dist/vendor</code> folder gets "screwed" somehow. Look: </p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/S6DOd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S6DOd.png" alt="enter image description here"></a>  </p>
  
  <p>This is my <code>angular-cli-build.js</code> that should be responsible for this, but i don't see how:</p>
  
  <pre><code>var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
  
  module.exports = function(defaults) {
    return new Angular2App(defaults, {
      vendorNpmFiles: [
        'systemjs/dist/system-polyfills.js',
        'systemjs/dist/system.src.js',
        'zone.js/dist/**/*.+(js|js.map)',
        'es6-shim/es6-shim.js',
        'reflect-metadata/**/*.+(js|js.map)',
        'rxjs/**/*.+(js|js.map)',
        '@angular/**/*.+(js|js.map)',
        // above are the existing entries
        // below are the AngularFire entries
        'angularfire2/**/*.js',
        'firebase/*.js',
        '@angular2-material/**/*.js',   
        'ng2-uploader/*.js',   
        'underscore/underscore.js',   
        'primeng/**/*.js',
        'primeui/**/*.*'
      ]
    });
  };
  </code></pre>
  
  <p>This is the package.json:</p>
  
  <pre><code>{
    "name": "test",
    "version": "1.0.0",
    "license": "MIT",
    "angular-cli": {},
    "scripts": {
      "start": "ng serve",
      "postinstall": "typings install",
      "lint": "tslint \"src/**/*.ts\"",
      "test": "ng test",
      "pree2e": "webdriver-manager update",
      "e2e": "protractor"
    },
    "private": true,
    "dependencies": {
      "@angular/common": "2.0.0-rc.1",
      "@angular/compiler": "2.0.0-rc.1",
      "@angular/core": "2.0.0-rc.1",
      "@angular/http": "2.0.0-rc.1",
      "@angular/platform-browser": "2.0.0-rc.1",
      "@angular/platform-browser-dynamic": "2.0.0-rc.1",
      "@angular/router": "3.0.0-alpha.3",
      "@angular2-material/button": "^2.0.0-alpha.6",
      "@angular2-material/checkbox": "^2.0.0-alpha.6",
      "@angular2-material/core": "^2.0.0-alpha.6",
      "angularfire2": "^2.0.0-beta.2",
      "es6-shim": "0.35.1",
      "firebase": "^3.0.5",
      "ng2-slim-loading-bar": "^1.2.3",
      "primeng": "^1.0.0-beta.9",
      "primeui": "^4.1.12",
      "reflect-metadata": "0.1.3",
      "rxjs": "5.0.0-beta.6",
      "systemjs": "0.19.26",
      "underscore": "^1.8.3",
      "zone.js": "0.6.12"
    },
    "devDependencies": {
      "angular-cli": "1.0.0-beta.6",
      "codelyzer": "0.0.20",
      "ember-cli-inject-live-reload": "1.4.0",
      "jasmine-core": "2.4.1",
      "jasmine-spec-reporter": "2.5.0",
      "karma": "0.13.22",
      "karma-chrome-launcher": "0.2.3",
      "karma-jasmine": "0.3.8",
      "protractor": "3.3.0",
      "ts-node": "0.5.5",
      "tslint": "3.11.0",
      "typescript": "1.8.10",
      "typings": "0.8.1"
    }
  }
  </code></pre>
  
  <p><strong>This is messing up my 3-rd party libraries. Why is this happening?</strong></p>