Merge Webpack Feature branch into Master (angular#1455)

* build: use webpack for building apps.

This pull request replaces the underlying broccoli build system and then
replaces it with webpack as the build and bundler.

This will affect the following commands (however the user-level)
functionality should go unchanged (besides unimplemented flags which
will come after this PR.):

ng build (with --env flag and --watch flag supported)
ng serve (with --port flag supported)
ng test / ng e2e

The webpack configuration is blackboxed, and therefore users will not
see a webpack.config.js file in their repository.

Also this PR will bump the typescript version to 2.0 (beta).

Fixes angular#909 angular#1155 angular#882

* chore(lint) Corrected any eslint errors and cleaned up unused files

* chore(cleanup) additional cleanup tasks performed. Removed unneeded code, indentation causing linting errors, add back tsconfig sourcemapping, removed console logs, deleted material unused files.

* chore: remove bind from serve command

* chore: simplify test command

* chore: fix test warnings

* chore: revert whitespace changes

* chore: re-add mapRoot to tsconfig

* chore: remove unused import

* bugfix: fix broken tests

* fix: fix mobile-specific feature test

* bugfix: fix public folder test

* fix: fixes for path mappings, tests, and coverage (angular#1359)

* fix(): Multiple fixes for path mappings:

* Removed invalid test case that was throwing path mappings  tests because of a typescript bug.
* Readded PathsPlugin for Path Mappings
* Removed coverage preprocessor which was throwing bad type errors against ts code when it shouldn't be.
* Added sourcemap support for istanbul instrumenter. Coverage files are still being generated.

* fix: fix the way the build command runs for mobile tests

* fix: fix the way the build command runs for mobile tests

* fix: replaced promise based ng command with sh.exec to allow mappings test to run correctly against mobile

* fix: replaced promise based ng command with sh.exec to allow mappings test to run correctly against mobile

* fix: add environment configuration replacement (angular#1364)

* fix: add environment configuration replacement

* remove debuggers

* fix: move mobile test above config test because it relies on prod build from previous step

* fix: removed unneeded interface moved config paths

* fix(tests): re-enable sass/less/stylus tests (angular#1363)

* chore: remove systemjs (angular#1376)

* chore: remove vendor.ts (angular#1383)

* chore: remove material2 test option (angular#1385)

* fix(build): re-add support for sourceDir (angular#1378)

* chore(build): remove broccoli (angular#1386)

* chore: remove windows elevation check (angular#1384)

* fix(test): add missing sourceDir (angular#1387)

* fix: update node polyfill support properties for prod config to allow dev-server (aka ng serve) (angular#1395)

* chore(tests): add prod env e2e test (angular#1394)

* chore: cleanup of new files (angular#1388)

* fix(serve): disable HMR (angular#1402)

* chore: review docs (angular#1407)

* feat(env): decouple build from env file (angular#1404)

* fix: fix tsconfig for editors (angular#1420)

* chore: fix webpack branch after merge conflicts (angular#1423)

* fix: update to awesome-typescript-loader 2.1.0 (angular#1425)

* fix: update to awesome-typescript-loader 2.1.0 which fixes a few issues shimming typings libs in tsconfig.json

* fix: forgot to set libs in tsconfig blueprint

* chore(blueprints): remove module.id (angular#1426)

* feat: add host flag support for ng serve (angular#1442)

* feat(test): add karma plugin (angular#1437)

* chore(blueprints): re-add outDir (angular#1428)

* feat: use @types instead of typings (angular#1449)

* fix: make sourcemaps work in test (angular#1447)

* feat: add utilities for typescript ast (angular#1159) (angular#1453)

'ast-utils.ts' provides typescript ast utility functions

Author: hansl

README.md

@@ -18,9 +18,7 @@ If you wish to collaborate while the project is still young, check out [our issu
 
 ## Prerequisites
 
-The generated project has dependencies that require 
-* **Node 4 or greater**.
-* **Typings v1 or greater**.
+The generated project has dependencies that require **Node 4 or greater**.
 
 ## Table of Contents
 
@@ -30,7 +28,7 @@ The generated project has dependencies that require
 * [Generating Components, Directives, Pipes and Services](#generating-components-directives-pipes-and-services)
 * [Generating a Route](#generating-a-route)
 * [Creating a Build](#creating-a-build)
-* [Environments](#environments)
+* [Build Targets and Environment Files](#build-targets-and-environment-files)
 * [Bundling](#bundling)
 * [Running Unit Tests](#running-unit-tests)
 * [Running End-to-End Tests](#running-end-to-end-tests)
@@ -114,17 +112,33 @@ ng build
 
 The build artifacts will be stored in the `dist/` directory.
 
-### Environments
+### Build Targets and Environment Files
 
-At build time, the `src/app/environment.ts` will be replaced by either
-`config/environment.dev.ts` or `config/environment.prod.ts`, depending on the
-current cli environment. The resulting file will be `dist/app/environment.ts`.
+A build can specify both a build target (`development` or `production`) and an 
+environment file to be used with that build. By default, the development build 
+target is used.
 
-Environment defaults to `dev`, but you can generate a production build via
-the `-prod` flag in either `ng build -prod` or `ng serve -prod`.
+At build time, `src/app/environments/environment.ts` will be replaced by
+`src/app/environments/environment.{NAME}.ts` where `NAME` is the argument 
+provided to the `--environment` flag.
+
+These options also apply to the serve command. If you do not pass a value for `environment`,
+it will default to `dev` for `development` and `prod` for `production`.
+
+```bash
+# these are equivalent
+ng build --target=production --environment=prod
+ng build --prod --env=prod
+ng build --prod
+# and so are these
+ng build --target=development --environment=dev
+ng build --dev --e=dev
+ng build --dev
+ng build
+```
 
 You can also add your own env files other than `dev` and `prod` by creating a
-`config/environment.{NAME}.ts` and use them by using the `--env=NAME`
+`src/app/environments/environment.{NAME}.ts` and use them by using the `--env=NAME`
 flag on the build/serve commands.
 
 ### Bundling
@@ -138,13 +152,7 @@ all dependencies into a single file, and make use of tree-shaking techniques.
 ng test
 ```
 
-Tests will execute after a build is executed via [Karma](http://karma-runner.github.io/0.13/index.html), and it will automatically watch your files for changes.
-
-You can run tests a single time via `--watch=false`, and turn off building of the app via `--build=false` (useful for running it at the same time as `ng serve`).
-
-**WARNING:** On Windows, `ng test` is hitting a file descriptor limit (see https://github.com/angular/angular-cli/issues/977).
-The solution for now is to instead run `ng serve` and `ng test --build=false` in separate console windows. 
-
+Tests will execute after a build is executed via [Karma](http://karma-runner.github.io/0.13/index.html), and it will automatically watch your files for changes. You can run tests a single time via `--watch=false`.
 
 ### Running end-to-end tests
 
@@ -198,7 +206,7 @@ You can modify the these scripts in `package.json` to run whatever tool you pref
 
 ### Support for offline applications
 
-The index.html file includes a commented-out code snippet for installing the angular2-service-worker. This support is experimental, please see the angular/mobile-toolkit project and https://mobile.angular.io/ for documentation on how to make use of this functionality.
+Angular-CLI includes support for offline applications via the `--mobile` flag on `ng new`. Support is experimental, please see the angular/mobile-toolkit project and https://mobile.angular.io/ for documentation on how to make use of this functionality.
 
 ### Commands autocompletion
 
@@ -225,19 +233,44 @@ source ~/.bash_profile
 
 ### CSS Preprocessor integration
 
-We support all major CSS preprocessors:
+Angular-CLI supports all major CSS preprocessors:
 - sass (node-sass)
 - less (less)
 - compass (compass-importer + node-sass)
 - stylus (stylus)
 
-To use one just install for example `npm install node-sass` and rename `.css` files in your project to `.scss` or `.sass`. They will be compiled automatically.
+To use these prepocessors simply add the file to your component's `styreUrl`:
+
+```
+@Component({
+  moduleId: module.id,
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.scss']
+})
+export class AppComponent {
+  title = 'app works!';
+}
+```
+
+When generating a new project you can also define which extention you want for
+style files:
 
-The `Angular2App`'s options argument has `sassCompiler`, `lessCompiler`, `stylusCompiler` and `compassCompiler` options that are passed directly to their respective CSS preprocessors.
+```bash
+ng new sassy-project --style=sass
+
+```
 
 ### 3rd Party Library Installation
 
-The installation of 3rd party libraries are well described at our [Wiki Page](https://github.com/angular/angular-cli/wiki/3rd-party-libs)
+Simply install your library via `npm install lib-name` and import it in your code.
+
+If the library does not include typings, you can install them using npm:
+
+```bash
+npm install moment
+npm install @types/moment
+```
 
 ### Updating angular-cli
 
@@ -307,6 +340,8 @@ the local `angular-cli` from the project which was fetched remotely from npm.
 Now the `angular-cli` you cloned before is in three places:
 The folder you cloned it into, npm's folder where it stores global packages and the `angular-cli` project you just created.
 
+You can also use `ng new foo --link-cli` to automatically link the `angular-cli` package.
+
 Please read the official [npm-link documentation](https://www.npmjs.org/doc/cli/npm-link.html)
 and the [npm-link cheatsheet](http://browsenpm.org/help#linkinganynpmpackagelocally) for more information.
 

addon/ng2/blueprints/component/files/__path__/__name__.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: '<%= selector %>',<% if(inlineTemplate) { %>
   template: `
     <p>
@@ -10,7 +9,7 @@ import { Component, OnInit } from '@angular/core';
   `,<% } else { %>
   templateUrl: '<%= dasherizedModuleName %>.component.html',<% } if(inlineStyle) { %>
   styles: []<% } else { %>
-  styleUrls: ['<%= dasherizedModuleName %>.component.css']<% } %>
+  styleUrls: ['<%= dasherizedModuleName %>.component.<%= styleExt %>']<% } %>
 })
 export class <%= classifiedModuleName %>Component implements OnInit {
 

addon/ng2/blueprints/component/index.js

@@ -54,7 +54,8 @@ module.exports = {
       route: options.route,
       isLazyRoute: !!options.isLazyRoute,
       isAppComponent: !!options.isAppComponent,
-      selector: this.selector
+      selector: this.selector,
+      styleExt: this.styleExt
     };
   },
 
@@ -114,20 +115,7 @@ module.exports = {
     }
 
     if (!options.flat) {
-      var filePath = path.join(this.project.ngConfig.defaults.sourceDir, 'system-config.ts');
-      var barrelUrl = this.appDir.replace(/\\/g, '/');
-      if (barrelUrl[0] === '/') {
-        barrelUrl = barrelUrl.substr(1);
-      }
-
-      return addBarrelRegistration(this, this.generatePath)
-        .then(() => {
-          return this.insertIntoFile(
-            filePath,
-            `  '${barrelUrl}',`,
-            { before: '  /** @cli-barrel */' }
-          );
-        });
+      return addBarrelRegistration(this, this.generatePath);
     } else {
       return addBarrelRegistration(
         this,

addon/ng2/blueprints/mobile/files/__path__/main-app-shell.ts

@@ -1,29 +1,44 @@
+import 'angular2-universal-polyfills';
 import { provide } from '@angular/core';
 import { APP_BASE_HREF } from '@angular/common';
 import { APP_SHELL_BUILD_PROVIDERS } from '@angular/app-shell';
-import { AppComponent } from './app/';
-import {
-  REQUEST_URL,
-  ORIGIN_URL
+import { 
+  REQUEST_URL, 
+  ORIGIN_URL, 
+  Bootloader, 
+  BootloaderConfig, 
+  AppConfig 
 } from 'angular2-universal';
+import { AppComponent } from './app/';
 
-export const options = {
-  directives: [
-    // The component that will become the main App Shell
-    AppComponent
-  ],
+const bootloaderConfig: BootloaderConfig = {
   platformProviders: [
     APP_SHELL_BUILD_PROVIDERS,
     provide(ORIGIN_URL, {
-      useValue: ''
-    })
+      useValue: 'http://localhost:4200' // full urls are needed for node xhr
+    }),
+    provide(APP_BASE_HREF, { useValue: '/' }),
+  ],
+  async: true,
+  preboot: false
+}
+
+const appConfig: AppConfig = {
+  directives: [
+    // The component that will become the main App Shell
+    AppComponent
   ],
   providers: [
     // What URL should Angular be treating the app as if navigating
-    provide(APP_BASE_HREF, {useValue: '/'}),
-    provide(REQUEST_URL, {useValue: '/'})
-  ],
-  async: false,
-  preboot: false
-};
+    provide(REQUEST_URL, { useValue: '/' })
+  ]
+}
+
+export function getBootloader() : Bootloader  {
+  return new Bootloader(bootloaderConfig);
+}
 
+export function serialize(bootloader: Bootloader, template: string) : string {
+  appConfig.template = template;
+  return bootloader.serializeApplication(appConfig);
+}

addon/ng2/blueprints/mobile/files/__path__/system-import.js

@@ -7,7 +7,7 @@ Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app w
 
 ## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/route/class`.
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.
 
 ## Build
 

addon/ng2/blueprints/ng2/files/README.md

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';<% if (isMobile) { %>
 import { APP_SHELL_DIRECTIVES } from '@angular/app-shell';<% } %>
 
 @Component({
-  moduleId: module.id,
   selector: '<%= prefix %>-root',
   <% if (isMobile) { %>template: `
   <h1>
@@ -11,7 +10,7 @@ import { APP_SHELL_DIRECTIVES } from '@angular/app-shell';<% } %>
   `,
   styles: [],
   directives: [APP_SHELL_DIRECTIVES]<% } else { %>templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']<% } %>
+  styleUrls: ['app.component.<%= styleExt %>']<% } %>
 })
 export class AppComponent {
   title = 'app works!';

addon/ng2/blueprints/ng2/files/__path__/app/app.component.ts

@@ -0,0 +1,8 @@
+// The file for the current environment will overwrite this one during build.
+// Different environments can be found in ./environment.{dev|prod}.ts, and
+// you can create your own and use it with the --env flag.
+// The build system defaults to the dev environment.
+
+export const environment = {
+  production: false
+};

addon/ng2/blueprints/ng2/files/__path__/app/environment.ts

@@ -1,2 +1,2 @@
-export * from './environment';
+export * from './environments/environment';
 export * from './app.component';

addon/ng2/blueprints/ng2/files/config/environment.dev.ts renamed to addon/ng2/blueprints/ng2/files/__path__/app/environments/environment.dev.ts

@@ -5,53 +5,26 @@
   <title><%= jsComponentName %></title>
   <base href="/">
 
-  {{#unless environment.production}}
-  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
-  {{/unless}}
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico"><% if (isMobile) { %>
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="theme-color" content="#000000">
   <link rel="manifest" href="/manifest.webapp">
-  {{#each mobile.icons}}
-    <link rel="{{rel}}" {{#if sizes}}sizes="{{sizes}}" {{/if}}href="{{href}}">
-  {{/each}}
-
-  {{#if environment.production}}
-  <script type="text/javascript">
-    if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('/worker.js').catch(function(err) {
-        console.log('Error installing service worker: ', err);
-      });
-    }
-  </script>
-  {{/if}}
+  <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
+  <link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-touch-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-touch-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-touch-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-touch-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-touch-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-touch-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png">
+  <link rel="apple-touch-startup-image" href="/icons/apple-touch-icon-180x180.png">
   <% } %>
+  
 </head>
 <body>
   <<%= prefix %>-root>Loading...</<%= prefix %>-root>
-  <% if (isMobile) { %>
-    {{#if environment.production}}
-      <script src="/app-concat.js" async></script>
-    {{else}}
-      {{#each scripts.polyfills}}
-      <script src="{{.}}"></script>
-      {{/each}}
-      <script>
-        System.import('system-config.js').then(function () {
-          System.import('main');
-        }).catch(console.error.bind(console));
-      </script>
-    {{/if}}
-  <% } else { %>
-    {{#each scripts.polyfills}}
-    <script src="{{.}}"></script>
-    {{/each}}
-    <script>
-      System.import('system-config.js').then(function () {
-        System.import('main');
-      }).catch(console.error.bind(console));
-    </script>
-  <% } %>
 </body>
 </html>

addon/ng2/blueprints/ng2/files/config/environment.prod.ts renamed to addon/ng2/blueprints/ng2/files/__path__/app/environments/environment.prod.ts

@@ -0,0 +1,18 @@
+// Prefer CoreJS over the polyfills above
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'core-js/es6/reflect';
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';