feat(build): update angular-cli.json (#1633)

README.md

@@ -37,13 +37,14 @@ The generated project has dependencies that require **Node 4 or greater**.
 * [Generating a Route](#generating-a-route)
 * [Creating a Build](#creating-a-build)
 * [Build Targets and Environment Files](#build-targets-and-environment-files)
-* [Bundling](#bundling)
+* [Adding extra files to the build](#adding-extra-files-to-the-build)
 * [Running Unit Tests](#running-unit-tests)
 * [Running End-to-End Tests](#running-end-to-end-tests)
 * [Deploying the App via GitHub Pages](#deploying-the-app-via-github-pages)
 * [Linting and formatting code](#linting-and-formatting-code)
 * [Support for offline applications](#support-for-offline-applications)
 * [Commands autocompletion](#commands-autocompletion)
+* [Global styles](#global-styles)
 * [CSS preprocessor integration](#css-preprocessor-integration)
 * [3rd Party Library Installation](#3rd-party-library-installation)
 * [Updating angular-cli](#updating-angular-cli)
@@ -126,8 +127,8 @@ 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.
 
-At build time, `src/app/environments/environment.ts` will be replaced by
-`src/app/environments/environment.{NAME}.ts` where `NAME` is the argument 
+At build time, `src/environments/environment.ts` will be replaced by
+`src/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`,
@@ -145,14 +146,15 @@ ng build --dev
 ng build
 ```
 
-You can also add your own env files other than `dev` and `prod` by creating a
-`src/app/environments/environment.{NAME}.ts` and use them by using the `--env=NAME`
-flag on the build/serve commands.
+You can also add your own env files other than `dev` and `prod` by doing the following:
+- create a `src/environments/environment.NAME.ts`
+- add `{ NAME: 'src/environments/environment.NAME.ts' }` to the the `apps[0].environments` object in `angular-cli.json` 
+- use them by using the `--env=NAME` flag on the build/serve commands.
 
 ### Bundling
 
-Builds created with the `-prod` flag via `ng build -prod` or `ng serve -prod` bundle
-all dependencies into a single file, and make use of tree-shaking techniques.
+All builds make use of bundling, and using the `--prod` flag in  `ng build --prod` 
+or `ng serve --prod` will also make use of uglifying and tree-shaking functionality.
 
 ### Running unit tests
 
@@ -240,6 +242,13 @@ ng completion >> ~/.bash_profile
 source ~/.bash_profile
 ```
 
+### Global styles
+
+The `styles.css` file allows users to add global styles and supports 
+[CSS imports](https://developer.mozilla.org/en/docs/Web/CSS/@import). 
+
+If the project is created with the `--style=sass` option, this will be a `.sass` 
+file instead, and the same applies to `scss/less/styl`. 
 
 ### CSS Preprocessor integration
 

addon/ng2/blueprints/component/index.js

@@ -25,9 +25,9 @@ module.exports = {
 
     var defaultPrefix = '';
     if (this.project.ngConfig &&
-        this.project.ngConfig.defaults &&
-        this.project.ngConfig.defaults.prefix) {
-      defaultPrefix = this.project.ngConfig.defaults.prefix + '-';
+        this.project.ngConfig.apps[0] &&
+        this.project.ngConfig.apps[0].prefix) {
+      defaultPrefix = this.project.ngConfig.apps[0].prefix + '-';
     }
     var prefix = this.options.prefix ? defaultPrefix : '';
     this.selector = stringUtils.dasherize(prefix + parsedPath.name);
@@ -97,7 +97,7 @@ module.exports = {
             dir = dirParts.join(path.sep);
           }
         }
-        var srcDir = this.project.ngConfig.defaults.sourceDir;
+        var srcDir = this.project.ngConfig.apps[0].root;
         this.appDir = dir.substr(dir.indexOf(srcDir) + srcDir.length);
         this.generatePath = dir;
         return dir;

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

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

addon/ng2/blueprints/ng2/files/__path__/main.ts

@@ -1,6 +1,9 @@
+import "./polyfills.ts";
+
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { enableProdMode } from '@angular/core';
-import { AppModule, environment } from './app/';
+import { environment } from './environments/environment';
+import { AppModule } from './app/';
 
 if (environment.production) {
   enableProdMode();

addon/ng2/blueprints/ng2/files/__path__/polyfills.ts

@@ -1,4 +1,5 @@
-// Prefer CoreJS over the polyfills above
+// This file includes polyfills needed by Angular 2 and is loaded before
+// the app. You can add your own extra polyfills to this file.
 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';

addon/ng2/blueprints/ng2/files/__path__/styles.__styleext__

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

addon/ng2/blueprints/ng2/files/__path__/test.ts

@@ -1,10 +1,5 @@
-import 'core-js/es6';
-import 'core-js/es7/reflect';
+import "./polyfills.ts";
 
-// Typescript emit helpers polyfill
-import 'ts-helpers';
-
-import 'zone.js/dist/zone';
 import 'zone.js/dist/long-stack-trace-zone';
 import 'zone.js/dist/jasmine-patch';
 import 'zone.js/dist/async-test';

addon/ng2/blueprints/ng2/files/angular-cli.json

@@ -5,9 +5,21 @@
   },
   "apps": [
     {
-      "main": "<%= sourceDir %>/main.ts",
-      "tsconfig": "<%= sourceDir %>/tsconfig.json",
-      "mobile": <%= isMobile %>
+      "root": "<%= sourceDir %>",
+      "outDir": "dist",
+      "assets": "assets",
+      "index": "index.html",
+      "main": "main.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.json",
+      "prefix": "<%= prefix %>",
+      "mobile": <%= isMobile %>,
+      "styles": "styles.<%= styleExt %>",
+      "environments": {
+        "source": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts",
+        "dev": "environments/environment.dev.ts"
+      }
     }
   ],
   "addons": [],
@@ -23,8 +35,6 @@
     }
   },
   "defaults": {
-    "prefix": "<%= prefix %>",
-    "sourceDir": "<%= sourceDir %>",
     "styleExt": "<%= styleExt %>",
     "prefixInterfaces": false,
     "lazyRoutePrefix": "+"

addon/ng2/commands/github-pages-deploy.ts

@@ -6,8 +6,9 @@ import * as chalk from 'chalk';
 import * as fs from 'fs';
 import * as fse from 'fs-extra';
 import * as path from 'path';
-import * as BuildTask from 'ember-cli/lib/tasks/build';
+import * as WebpackBuild from '../tasks/build-webpack';
 import * as CreateGithubRepo from '../tasks/create-github-repo';
+import { CliConfig } from '../models/config';
 
 const fsReadFile = Promise.denodeify(fs.readFile);
 const fsWriteFile = Promise.denodeify(fs.writeFile);
@@ -26,11 +27,16 @@ module.exports = Command.extend({
       type: String,
       default: 'new gh-pages version',
       description: 'The commit message to include with the build, must be wrapped in quotes.'
-    }, {
+    }, { 
+      name: 'target',
+      type: String,
+      default: 'production', 
+      aliases: ['t', { 'dev': 'development' }, { 'prod': 'production' }]
+    }, { 
       name: 'environment',
       type: String,
-      default: 'production',
-      description: 'The Angular environment to create a build for'
+      default: '',
+      aliases: ['e']
     }, {
       name: 'user-page',
       type: Boolean,
@@ -59,24 +65,40 @@ module.exports = Command.extend({
     var execOptions = {
       cwd: root
     };
+
+    if (options.environment === ''){
+      if (options.target === 'development') {
+        options.environment = 'dev';
+      }
+      if (options.target === 'production') {
+        options.environment = 'prod';
+      } 
+    }
+
     var projectName = this.project.pkg.name;
 
+    const outDir = CliConfig.fromProject().apps[0].outDir;
+
     let ghPagesBranch = 'gh-pages';
     let destinationBranch = options.userPage ? 'master' : ghPagesBranch;
     let initialBranch;
 
     // declared here so that tests can stub exec
     const execPromise = Promise.denodeify(exec);
 
-    var buildTask = new BuildTask({
+    var buildTask = new WebpackBuild({
       ui: this.ui,
       analytics: this.analytics,
-      project: this.project
+      cliProject: this.project,
+      target: options.target,
+      environment: options.environment,
+      outputPath: outDir
     });
 
     var buildOptions = {
+      target: options.target,
       environment: options.environment,
-      outputPath: 'dist/'
+      outputPath: outDir
     };
 
     var createGithubRepoTask = new CreateGithubRepo({
@@ -155,13 +177,13 @@ module.exports = Command.extend({
     }
 
     function copyFiles() {
-      return fsReadDir('dist')
+      return fsReadDir(outDir)
         .then((files) => Promise.all(files.map((file) => {
           if (file === '.gitignore'){
             // don't overwrite the .gitignore file
             return Promise.resolve();
           }
-          return fsCopy(path.join('dist', file), path.join('.', file))
+          return fsCopy(path.join(outDir, file), path.join('.', file))
         })));
     }
 

addon/ng2/commands/serve.ts

@@ -46,7 +46,6 @@ module.exports = Command.extend({
     { name: 'live-reload-live-css', type: Boolean, default: true,                              description: 'Whether to live reload CSS (default true)' },
     { name: 'target',               type: String,  default: 'development', aliases: ['t', { 'dev': 'development' }, { 'prod': 'production' }] },
     { name: 'environment',          type: String,  default: '', aliases: ['e'] },
-    { name: 'output-path',          type: 'Path',  default: 'dist/',       aliases: ['op', 'out'] },
     { name: 'ssl',                  type: Boolean, default: false },
     { name: 'ssl-key',              type: String,  default: 'ssl/server.key' },
     { name: 'ssl-cert',             type: String,  default: 'ssl/server.crt' }

addon/ng2/models/config.ts

@@ -1,5 +1,6 @@
 import * as fs from 'fs';
 import * as path from 'path';
+import * as chalk from 'chalk';
 
 const schemaPath = path.resolve(process.env.CLI_ROOT, 'lib/config/schema.json');
 const schema = require(schemaPath);
@@ -166,6 +167,24 @@ export class CliConfig {
 
   public static fromProject(): any {
     const configPath = CliConfig._configFilePath();
-    return configPath ? require(configPath) : {};
+
+    if (!configPath) {
+      return {};
+    }
+
+    let config = require(configPath);
+
+    if (config.defaults.sourceDir || config.defaults.prefix) {
+      config.apps[0].root = config.apps[0].root || config.defaults.sourceDir;
+      config.apps[0].prefix = config.apps[0].prefix || config.defaults.prefix;
+
+      console.error(chalk.yellow(
+          'The "defaults.prefix" and "defaults.sourceDir" properties of angular-cli.json '
+        + 'are deprecated in favor of "apps[0].root" and "apps[0].prefix".\n'
+        + 'Please update in order to avoid errors in future versions of angular-cli.'
+      ));
+    }
+
+    return config;
   }
 }