feat(@angular/cli): eject command

The command will generate a webpack.config.js and will add scripts to the package.json.

Author: hansl

.travis.yml

@@ -25,6 +25,9 @@ matrix:
     - node_js: "6"
       os: linux
       env: NODE_SCRIPT="tests/run_e2e.js --glob=tests/build/**"
+    - node_js: "6"
+      os: linux
+      env: NODE_SCRIPT="tests/run_e2e.js --eject --glob=tests/build/**"
     - node_js: "6"
       os: linux
       env: NODE_SCRIPT="tests/run_e2e.js --ignore=**/tests/build/**"

packages/@angular/cli/addon/index.js

@@ -21,6 +21,7 @@ module.exports = {
     return {
       'build': require('../commands/build').default,
       'serve': require('../commands/serve').default,
+      'eject': require('../commands/eject').default,
       'new': require('../commands/new').default,
       'generate': require('../commands/generate').default,
       'destroy': require('../commands/destroy').default,

packages/@angular/cli/commands/eject.ts

@@ -0,0 +1,37 @@
+import { BuildOptions } from '../models/build-options';
+import { Version } from '../upgrade/version';
+import {baseBuildCommandOptions} from './build';
+
+const Command = require('../ember-cli/lib/models/command');
+
+// defaults for BuildOptions
+export const baseEjectCommandOptions: any = [
+  ...baseBuildCommandOptions,
+  { name: 'force', 'type': Boolean }
+];
+
+export interface EjectTaskOptions extends BuildOptions {
+  force?: boolean;
+}
+
+
+const EjectCommand = Command.extend({
+  name: 'eject',
+  description: 'Ejects your app and output the proper webpack configuration and scripts.',
+
+  availableOptions: baseEjectCommandOptions,
+
+  run: function (commandOptions: EjectTaskOptions) {
+    const project = this.project;
+    const EjectTask = require('../tasks/eject').default;
+    const ejectTask = new EjectTask({
+      cliProject: project,
+      ui: this.ui,
+    });
+
+    return ejectTask.run(commandOptions);
+  }
+});
+
+
+export default EjectCommand;

packages/@angular/cli/lib/base-href-webpack/base-href-webpack-plugin.ts

@@ -3,7 +3,7 @@ export interface BaseHrefWebpackPluginOptions {
 }
 
 export class BaseHrefWebpackPlugin {
-  constructor(private options: BaseHrefWebpackPluginOptions) { }
+  constructor(public readonly options: BaseHrefWebpackPluginOptions) { }
 
   apply(compiler: any): void {
     // Ignore if baseHref is not passed

packages/@angular/cli/lib/config/schema.json

@@ -13,6 +13,11 @@
         },
         "name": {
           "type": "string"
+        },
+        "ejected": {
+          "description": "Whether or not this project was ejected.",
+          "type": "boolean",
+          "default": false
         }
       },
       "additionalProperties": false

packages/@angular/cli/models/webpack-configs/styles.ts

@@ -5,6 +5,7 @@ import {
 } from '../../plugins/suppress-entry-chunks-webpack-plugin';
 import { extraEntryParser, getOutputHashFormat } from './utils';
 import { WebpackConfigOptions } from '../webpack-config';
+import { pluginArgs } from '../../tasks/eject';
 
 const cssnano = require('cssnano');
 const autoprefixer = require('autoprefixer');
@@ -104,17 +105,23 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
 
   // load global css as css files
   if (globalStylePaths.length > 0) {
-    rules.push(...baseRules.map(({test, loaders}) => ({
-      include: globalStylePaths, test, loaders: ExtractTextPlugin.extract({
+    rules.push(...baseRules.map(({test, loaders}) => {
+      const extractTextPlugin = {
         use: [
           ...commonLoaders,
           ...loaders
         ],
         fallback: 'style-loader',
         // publicPath needed as a workaround https://github.com/angular/angular-cli/issues/4035
         publicPath: ''
-      })
-    })));
+      };
+      const ret: any = {
+        include: globalStylePaths, test, loaders: ExtractTextPlugin.extract(extractTextPlugin)
+      };
+      // Save the original options as arguments for eject.
+      ret[pluginArgs] = extractTextPlugin;
+      return ret;
+    }));
   }
 
   // supress empty .js files in css only entry points

packages/@angular/cli/plugins/webpack.js

@@ -0,0 +1,10 @@
+// Exports the webpack plugins we use internally.
+
+module.exports = {
+  BaseHrefWebpackPlugin:
+    require('../lib/base-href-webpack/base-href-webpack-plugin').BaseHrefWebpackPlugin,
+  GlobCopyWebpackPlugin: require('../plugins/glob-copy-webpack-plugin').GlobCopyWebpackPlugin,
+  SuppressExtractedTextChunksWebpackPlugin:
+    require('../plugins/suppress-entry-chunks-webpack-plugin')
+      .SuppressExtractedTextChunksWebpackPlugin
+};