Merge Webpack Feature branch into Master

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/ng2/files/README.md

@@ -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/__path__/app/app.component.ts

@@ -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/environments/environment.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/index.ts

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

addon/ng2/blueprints/ng2/files/__path__/index.html

@@ -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/__path__/polyfills.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';