feat(build): update angular-cli.json

Author: filipesilva

README.md

@@ -36,6 +36,7 @@ The generated project has dependencies that require **Node 4 or greater**.
 * [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)
@@ -124,8 +125,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`,
@@ -143,14 +144,49 @@ 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.
+
+### Adding extra files to the build
+
+The `apps[0].additionalEntries` array in `angular-cli.json` allows a user to add more files to the build.
+
+The `additionalEntries` array supports two kinds of entries, with different behaviours.
+- strings will be bundled together with the `main` bundle
+- objects with `input` and `output` properties will create a new bundle which is loaded before the `main` bundle.
+
+By default it looks like this:
+
+```
+apps: [
+  {
+    //...
+    "additionalEntries": [
+      { "input": "polyfills.ts", "output": "polyfills.js" },
+      "scripts.ts",
+      "styles.css"
+    ],
+  }
+]
+```
+
+These entries correspond to the following files in `src/`:
+- `polifills.ts` has browser polyfills needed for Angular 2. It will be 
+bundled separately as `polyfills.js` and loaded before everything else.
+- `styles.css` 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`. It will be part of the main 
+bundle.
+- `scripts.ts` allows users to add global code outside of the Angular 2 app. It
+will also be part of the main bundle.
 
 ### Running unit tests
 

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/public/.gitignore renamed to addon/ng2/blueprints/ng2/files/__path__/assets/.gitignore

@@ -1,6 +1,7 @@
 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__/app/environments/environment.dev.ts renamed to addon/ng2/blueprints/ng2/files/__path__/environments/environment.dev.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__/app/environments/environment.prod.ts renamed to addon/ng2/blueprints/ng2/files/__path__/environments/environment.prod.ts

@@ -0,0 +1,2 @@
+// You can add additional imports to this file and 
+// they will be loaded before your app

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

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

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

@@ -5,9 +5,25 @@
   },
   "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 %>,
+      "additionalEntries": [
+        { "input": "polyfills.ts", "output": "polyfills.js" },
+        "scripts.ts",
+        "styles.<%= styleExt %>"
+      ],
+      "environments": {
+        "source": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts",
+        "dev": "environments/environment.dev.ts"
+      }
     }
   ],
   "addons": [],
@@ -23,8 +39,6 @@
     }
   },
   "defaults": {
-    "prefix": "<%= prefix %>",
-    "sourceDir": "<%= sourceDir %>",
     "styleExt": "<%= styleExt %>",
     "prefixInterfaces": false,
     "lazyRoutePrefix": "+"

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

@@ -6,7 +6,7 @@ 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';
 
 const fsReadFile = Promise.denodeify(fs.readFile);
@@ -26,11 +26,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: 'development', 
+      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 +64,37 @@ 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 WebpackBuild = new WebpackBuild({
       ui: this.ui,
       analytics: this.analytics,
       project: this.project
     });
 
     var buildOptions = {
+      target: options.environment,
       environment: options.environment,
-      outputPath: 'dist/'
+      outputPath: outDir
     };
 
     var createGithubRepoTask = new CreateGithubRepo({
@@ -116,7 +134,7 @@ module.exports = Command.extend({
 
     function build() {
       if (options.skipBuild) return Promise.resolve();
-      return buildTask.run(buildOptions);
+      return WebpackBuild.run(buildOptions);
     }
 
     function saveStartingBranchName() {
@@ -155,13 +173,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/blueprints/ng2/files/__path__/scripts.ts

@@ -5,20 +5,37 @@ import * as webpack from 'webpack';
 import { ForkCheckerPlugin } from 'awesome-typescript-loader';
 import { CliConfig } from './config';
 
-export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
+export function getWebpackCommonConfig(projectRoot: string, environment: string, appConfig: any) {
+
+  const appRoot = path.resolve(projectRoot, appConfig.root);
+  const appMain = path.resolve(appRoot, appConfig.main);
+
+  const bundledWithMain = appConfig.additionalEntries
+    .filter(entry => typeof entry === "string")
+    .map(filename => path.resolve(appRoot, filename));
+
+  const separateBundles = appConfig.additionalEntries.filter(entry => typeof entry === "object");
+  const entries = Object.assign(
+    { main: [appMain, ...bundledWithMain] },
+    separateBundles.reduce((obj, entry) =>
+      Object.assign(obj, { [entry.output]: path.resolve(appRoot, entry.input) }),
+      {})
+  );
+
+  const additionalFiles = separateBundles
+    .map(entry => path.resolve(appRoot, entry.input))
+    .concat(bundledWithMain);
+
   return {
     devtool: 'source-map',
     resolve: {
       extensions: ['', '.ts', '.js'],
-      root: path.resolve(projectRoot, `./${sourceDir}`)
+      root: appRoot
     },
     context: path.resolve(__dirname, './'),
-    entry: {
-      main: [path.resolve(projectRoot, `./${sourceDir}/main.ts`)],
-      polyfills: path.resolve(projectRoot, `./${sourceDir}/polyfills.ts`)
-    },
+    entry: entries,
     output: {
-      path: path.resolve(projectRoot, './dist'),
+      path: path.resolve(projectRoot, appConfig.outDir),
       filename: '[name].bundle.js'
     },
     module: {
@@ -30,7 +47,7 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
               loader: 'awesome-typescript-loader',
               query: {
                 useForkChecker: true,
-                tsconfig: path.resolve(projectRoot, `./${sourceDir}/tsconfig.json`)
+                tsconfig: path.resolve(appRoot, appConfig.tsconfig)
               }
             },
             {
@@ -39,23 +56,47 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
           ],
           exclude: [/\.(spec|e2e)\.ts$/]
         },
-        { test: /\.json$/, loader: 'json-loader'},
-        { test: /\.css$/,  loaders: ['raw-loader', 'postcss-loader'] },
-        { test: /\.styl$/, loaders: ['raw-loader', 'postcss-loader', 'stylus-loader'] },
-        { test: /\.less$/, loaders: ['raw-loader', 'postcss-loader', 'less-loader'] },
-        { test: /\.scss$|\.sass$/, loaders: ['raw-loader', 'postcss-loader', 'sass-loader'] },
-        { test: /\.(jpg|png)$/, loader: 'url-loader?limit=128000'},
-        { test: /\.html$/, loader: 'raw-loader' }
+
+        // in main, load css as raw text
+        { exclude: additionalFiles, test: /\.css$/, loaders: ['raw-loader', 'postcss-loader'] },
+        { exclude: additionalFiles, test: /\.styl$/, loaders: ['raw-loader', 'postcss-loader', 'stylus-loader'] },
+        { exclude: additionalFiles, test: /\.less$/, loaders: ['raw-loader', 'postcss-loader', 'less-loader'] },
+        { exclude: additionalFiles, test: /\.scss$|\.sass$/, loaders: ['raw-loader', 'postcss-loader', 'sass-loader'] },
+
+        // outside of main, load it via style-loader
+        { include: additionalFiles, test: /\.css$/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] },
+        { include: additionalFiles, test: /\.styl$/, loaders: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader'] },
+        { include: additionalFiles, test: /\.less$/, loaders: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] },
+        { include: additionalFiles, test: /\.scss$|\.sass$/, loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] },
+
+        { test: /\.json$/, loader: 'json-loader' },
+        { test: /\.(jpg|png)$/, loader: 'url-loader?limit=10000' },
+        { test: /\.html$/, loader: 'raw-loader' },
+
+        { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
+        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
+        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
+        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' }
       ]
     },
     plugins: [
       new ForkCheckerPlugin(),
       new HtmlWebpackPlugin({
-        template: path.resolve(projectRoot, `./${sourceDir}/index.html`),
+        template: path.resolve(appRoot, appConfig.index),
         chunksSortMode: 'dependency'
       }),
+      new webpack.NormalModuleReplacementPlugin(
+        // escape the path to make a regex
+        // TODO: this isn't working!
+        new RegExp(path.resolve(appRoot, appConfig.environments.source)
+          .replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&")),
+        path.resolve(appRoot, appConfig.environments[environment])
+      ),
       new webpack.optimize.CommonsChunkPlugin({
-        name: ['polyfills']
+        name: separateBundles
+          .concat('main')
+          .map(bundle => bundle.output)
+          .reverse()
       }),
       new webpack.optimize.CommonsChunkPlugin({
         minChunks: Infinity,
@@ -64,9 +105,9 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
         sourceMapFilename: 'inline.map'
       }),
       new CopyWebpackPlugin([{
-        context: path.resolve(projectRoot, './public'),
+        context: path.resolve(appRoot, appConfig.assets),
         from: '**/*',
-        to: path.resolve(projectRoot, './dist')
+        to: path.resolve(projectRoot, appConfig.outDir, appConfig.assets)
       }])
     ],
     node: {
@@ -79,3 +120,4 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
     }
   }
 };
+