feat(@angular/cli): add an 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/**"

package.json

@@ -117,7 +117,7 @@
     "@types/express": "^4.0.32",
     "@types/fs-extra": "0.0.37",
     "@types/glob": "^5.0.29",
-    "@types/jasmine": "^2.2.32",
+    "@types/jasmine": "~2.2.0",
     "@types/lodash": "4.14.50",
     "@types/mock-fs": "^3.6.30",
     "@types/node": "^6.0.36",

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/blueprints/ng2/files/__path__/tsconfig.json

@@ -17,5 +17,9 @@
     "typeRoots": [
       "<%= relativeRootPath %>/node_modules/@types"
     ]
-  }
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
 }

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

@@ -0,0 +1,61 @@
+import { BuildOptions } from '../models/build-options';
+import { Version } from '../upgrade/version';
+
+const Command = require('../ember-cli/lib/models/command');
+
+// defaults for BuildOptions
+export const baseEjectCommandOptions: any = [
+  {
+    name: 'target',
+    type: String,
+    default: 'development',
+    aliases: ['t', { 'dev': 'development' }, { 'prod': 'production' }]
+  },
+  { name: 'environment', type: String, aliases: ['e'] },
+  { name: 'output-path', type: 'Path', aliases: ['op'] },
+  { name: 'aot', type: Boolean },
+  { name: 'sourcemap', type: Boolean, aliases: ['sm', 'sourcemaps'] },
+  { name: 'vendor-chunk', type: Boolean, default: true, aliases: ['vc'] },
+  { name: 'base-href', type: String, aliases: ['bh'] },
+  { name: 'deploy-url', type: String, aliases: ['d'] },
+  { name: 'verbose', type: Boolean, default: false, aliases: ['v'] },
+  { name: 'progress', type: Boolean, default: true, aliases: ['pr'] },
+  { name: 'i18n-file', type: String },
+  { name: 'i18n-format', type: String },
+  { name: 'locale', type: String },
+  { name: 'extract-css', type: Boolean, aliases: ['ec'] },
+  {
+    name: 'output-hashing',
+    type: String,
+    values: ['none', 'all', 'media', 'bundles'],
+    description: 'define the output filename cache-busting hashing mode',
+    aliases: ['oh']
+  },
+  { 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,10 @@
         },
         "name": {
           "type": "string"
+        },
+        "ejected": {
+          "type": "boolean",
+          "default": false
         }
       },
       "additionalProperties": false

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

@@ -9,7 +9,7 @@ import { WebpackConfigOptions } from '../webpack-config';
 const autoprefixer = require('autoprefixer');
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
 
 /**
  * Enumerate loaders and their dependencies from this file to let the dependency validator

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/models/webpack-configs/typescript.ts

@@ -16,7 +16,7 @@ function _createAotPlugin(wco: WebpackConfigOptions, options: any) {
   const { appConfig, projectRoot, buildOptions } = wco;
 
   // Read the environment, and set it in the compiler host.
-  let hostOverrideFileSystem: any = {};
+  let hostReplacementPaths: any = {};
   // process environment file replacement
   if (appConfig.environments) {
     if (!('source' in appConfig.environments)) {
@@ -29,9 +29,10 @@ function _createAotPlugin(wco: WebpackConfigOptions, options: any) {
     const appRoot = path.resolve(projectRoot, appConfig.root);
     const sourcePath = appConfig.environments['source'];
     const envFile = appConfig.environments[buildOptions.environment];
-    const environmentContent = fs.readFileSync(path.join(appRoot, envFile)).toString();
 
-    hostOverrideFileSystem = { [path.join(appRoot, sourcePath)]: environmentContent };
+    hostReplacementPaths = {
+      [path.join(appRoot, sourcePath)]: path.join(appRoot, envFile)
+    };
   }
 
   return new AotPlugin(Object.assign({}, {
@@ -40,15 +41,18 @@ function _createAotPlugin(wco: WebpackConfigOptions, options: any) {
       i18nFile: buildOptions.i18nFile,
       i18nFormat: buildOptions.i18nFormat,
       locale: buildOptions.locale,
-      hostOverrideFileSystem
+      hostReplacementPaths
     }, options));
 }
 
 
 export const getNonAotConfig = function(wco: WebpackConfigOptions) {
   const { projectRoot, appConfig } = wco;
   let exclude = [ '**/*.spec.ts' ];
-  if (appConfig.test) { exclude.push(path.join(projectRoot, appConfig.root, appConfig.test)); };
+  if (appConfig.test) {
+    exclude.push(path.join(projectRoot, appConfig.root, appConfig.test));
+  }
+
   return {
     module: {
       rules: [

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
+};