feat(@angular/cli): add ng4 option to ng new (#4507)

This allows to create a project with Angular 4 in the template.
Also fixes a few issues with ng4.

Author: hansl

.travis.yml

@@ -33,6 +33,9 @@ matrix:
     - node_js: "6"
       os: linux
       env: NODE_SCRIPT="tests/run_e2e.js --nightly"
+    - node_js: "6"
+      os: linux
+      env: NODE_SCRIPT="tests/run_e2e.js --ng4"
     - node_js: "7"
       os: linux
       env: NODE_SCRIPT=tests/run_e2e.js

packages/@angular/cli/blueprints/ng2/files/package.json

@@ -12,22 +12,22 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^2.3.1",
-    "@angular/compiler": "^2.3.1",
-    "@angular/core": "^2.3.1",
-    "@angular/forms": "^2.3.1",
-    "@angular/http": "^2.3.1",
-    "@angular/platform-browser": "^2.3.1",
-    "@angular/platform-browser-dynamic": "^2.3.1",
-    "@angular/router": "^3.3.1",
+    "@angular/common": "<%= ng4 ? '>=4.0.0-beta <5.0.0' : '^2.4.0' %>",
+    "@angular/compiler": "<%= ng4 ? '>=4.0.0-beta <5.0.0' : '^2.4.0' %>",
+    "@angular/core": "<%= ng4 ? '>=4.0.0-beta <5.0.0' : '^2.4.0' %>",
+    "@angular/forms": "<%= ng4 ? '>=4.0.0-beta <5.0.0' : '^2.4.0' %>",
+    "@angular/http": "<%= ng4 ? '>=4.0.0-beta <5.0.0' : '^2.4.0' %>",
+    "@angular/platform-browser": "<%= ng4 ? '>=4.0.0-beta <5.0.0' : '^2.4.0' %>",
+    "@angular/platform-browser-dynamic": "<%= ng4 ? '>=4.0.0-beta <5.0.0' : '^2.4.0' %>",
+    "@angular/router": "<%= ng4 ? '>=4.0.0-beta <5.0.0' : '^3.4.0' %>",
     "core-js": "^2.4.1",
     "rxjs": "^5.0.1",
     "ts-helpers": "^1.1.1",
     "zone.js": "^0.7.2"
   },
   "devDependencies": {
     "@angular/cli": "<%= version %>",
-    "@angular/compiler-cli": "^2.3.1",
+    "@angular/compiler-cli": "<%= ng4 ? '>=4.0.0-beta <5.0.0' : '^2.4.0' %>",
     "@types/jasmine": "2.5.38",
     "@types/node": "^6.0.42",
     "codelyzer": "~2.0.0-beta.1",

packages/@angular/cli/blueprints/ng2/index.ts

@@ -48,6 +48,7 @@ export default Blueprint.extend({
       routing: options.routing,
       inlineStyle: options.inlineStyle,
       inlineTemplate: options.inlineTemplate,
+      ng4: options.ng4,
       tests: this.tests
     };
   },

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

@@ -10,6 +10,7 @@ const InitCommand: any = Command.extend({
     { name: 'dry-run', type: Boolean, default: false, aliases: ['d'] },
     { name: 'verbose', type: Boolean, default: false, aliases: ['v'] },
     { name: 'link-cli', type: Boolean, default: false, aliases: ['lc'] },
+    { name: 'ng4', type: Boolean, default: false },
     { name: 'skip-npm', type: Boolean, default: false, aliases: ['sn'] },
     { name: 'skip-git', type: Boolean, default: false, aliases: ['sg'] },
     { name: 'skip-tests', type: Boolean, default: false, aliases: ['st'] },

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

@@ -15,6 +15,7 @@ const NewCommand = Command.extend({
     { name: 'dry-run', type: Boolean, default: false, aliases: ['d'] },
     { name: 'verbose', type: Boolean, default: false, aliases: ['v'] },
     { name: 'link-cli', type: Boolean, default: false, aliases: ['lc'] },
+    { name: 'ng4', type: Boolean, default: false },
     { name: 'skip-npm', type: Boolean, default: false, aliases: ['sn'] },
     { name: 'skip-git', type: Boolean, default: false, aliases: ['sg'] },
     { name: 'skip-tests', type: Boolean, default: false, aliases: ['st'] },

packages/@angular/cli/tasks/init.ts

@@ -71,6 +71,7 @@ export default Task.extend({
       inlineStyle: commandOptions.inlineStyle,
       inlineTemplate: commandOptions.inlineTemplate,
       ignoredUpdateFiles: ['favicon.ico'],
+      ng4: commandOptions.ng4,
       skipGit: commandOptions.skipGit,
       skipTests: commandOptions.skipTests
     };

packages/@ngtools/webpack/package.json

@@ -31,9 +31,9 @@
     "source-map": "^0.5.6"
   },
   "peerDependencies": {
-    "@angular/compiler": "^2.3.1",
-    "@angular/compiler-cli": "^2.3.1",
-    "@angular/core": "^2.3.1",
+    "@angular/compiler": "^2.3.1 || >=4.0.0-beta <5.0.0",
+    "@angular/compiler-cli": "^2.3.1 || >=4.0.0-beta <5.0.0",
+    "@angular/core": "^2.3.1 || >=4.0.0-beta <5.0.0",
     "@angular/tsc-wrapped": "^0.5.0",
     "typescript": "^2.0.2",
     "webpack": "2.2.0"

tests/e2e/setup/500-create-project.ts

@@ -24,7 +24,7 @@ export default function() {
   } else {
     // Otherwise create a project from scratch.
     createProject = Promise.resolve()
-      .then(() => ng('new', 'test-project', '--skip-npm'))
+      .then(() => ng('new', 'test-project', '--skip-npm', ...(argv['ng4'] ? ['--ng4'] : [])))
       .then(() => expectFileToExist(join(process.cwd(), 'test-project')))
       .then(() => process.chdir('./test-project'));
   }
@@ -37,7 +37,7 @@ export default function() {
       });
     }))
     .then(() => {
-      if (argv.nightly || argv['ng-sha']) {
+      if (argv['nightly'] || argv['ng-sha']) {
         const label = argv['ng-sha'] ? `#2.0.0-${argv['ng-sha']}` : '';
         return updateJsonFile('package.json', json => {
           // Install over the project with nightly builds.

tests/e2e/tests/build/rebuild-css-change.ts

@@ -7,7 +7,6 @@ import {
 import {appendToFile} from '../../utils/fs';
 
 const webpackGoodRegEx = /webpack: bundle is now VALID|webpack: Compiled successfully./;
-const webpackBadRegEx = /webpack: bundle is now INVALID|webpack: Compiling.../;
 
 export default function() {
   if (process.platform.startsWith('win')) {
@@ -17,10 +16,8 @@ export default function() {
   return silentExecAndWaitForOutputToMatch('ng', ['serve'], webpackGoodRegEx)
     // Should trigger a rebuild.
     .then(() => exec('touch', 'src/main.ts'))
-    .then(() => waitForAnyProcessOutputToMatch(webpackBadRegEx, 10000))
     .then(() => waitForAnyProcessOutputToMatch(webpackGoodRegEx, 10000))
     .then(() => appendToFile('src/app/app.component.css', ':host { color: blue; }'))
-    .then(() => waitForAnyProcessOutputToMatch(webpackBadRegEx, 10000))
     .then(() => waitForAnyProcessOutputToMatch(webpackGoodRegEx, 10000))
     .then(() => killAllProcesses(), (err: any) => {
       killAllProcesses();

tests/e2e/tests/build/rebuild.ts

@@ -60,8 +60,6 @@ export default function() {
       export class AppModule { }
     `))
     // Should trigger a rebuild with a new bundle.
-    .then(() => waitForAnyProcessOutputToMatch(
-        /webpack: bundle is now INVALID|webpack: Compiling.../, 10000))
     .then(() => waitForAnyProcessOutputToMatch(
         /webpack: bundle is now VALID|webpack: Compiled successfully./, 10000))
     // Count the bundles.