feat(@angular/cli): adds --animation flag to ng new

Author: dave11mj

docs/documentation/new.md

@@ -68,6 +68,16 @@ Default applications are created in a directory of the same name, with an initia
   </p>
 </details>
 
+<details>
+  <summary>animation</summary>
+  <p>
+    `--animation` _default value: false_
+  </p>
+  <p>
+    Generate with animation support.
+  </p>
+</details>
+
 <details>
   <summary>skip-commit</summary>
   <p>

packages/@angular/cli/blueprints/ng/files/__path__/app/app-fade-in.animation.ts

@@ -0,0 +1,15 @@
+import { trigger, state, style, animate, transition } from '@angular/animations';
+
+export function AppFadeInAnimationTrigger() {
+  return trigger('appFadeInAnimation', [
+    state('void', style({
+      opacity: '0'
+    })),
+    state('*', style({
+      opacity: '1'
+    })),
+    transition('void <=> *', animate('5000ms ease'))
+  ])
+}
+
+export const AppFadeInAnimation = AppFadeInAnimationTrigger();

packages/@angular/cli/blueprints/ng/files/__path__/app/app.component.html

@@ -1,4 +1,4 @@
-<h1>
+<h1<% if(animation) { %> @appFadeInAnimation <% } %>>
   {{title}}
 </h1><% if (routing) { %>
 <router-outlet></router-outlet><% } %>

packages/@angular/cli/blueprints/ng/files/__path__/app/app.component.spec.ts

@@ -1,13 +1,21 @@
 import { TestBed, async } from '@angular/core/testing';<% if (routing) { %>
-import { RouterTestingModule } from '@angular/router/testing';<% } %>
+import { RouterTestingModule } from '@angular/router/testing';<% } %><% if (animation) { %>
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';<% } %>
 
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
-    TestBed.configureTestingModule({<% if (routing) { %>
+    TestBed.configureTestingModule({<% if (routing && animation) { %>
+      imports: [
+        RouterTestingModule,
+        BrowserAnimationsModule
+      ],<% } %><% if (routing && !animation) { %>
       imports: [
         RouterTestingModule
+      ],<% } %><% if (animation && !routing) { %>
+      imports: [
+        BrowserAnimationsModule
       ],<% } %>
       declarations: [
         AppComponent

packages/@angular/cli/blueprints/ng/files/__path__/app/app.component.ts

@@ -1,16 +1,18 @@
-import { Component } from '@angular/core';
+import { Component } from '@angular/core';<% if(animation) { %>
+import { AppFadeInAnimation } from './app-fade-in.animation';<% } %>
 
 @Component({
   selector: '<%= prefix %>-root',<% if (inlineTemplate) { %>
   template: `
-  <h1>
+  <h1<% if(animation) { %> @appFadeInAnimation <% } %>>
     {{title}}
   </h1><% if (routing) { %>
   <router-outlet></router-outlet><% } %>
   `,<% } else { %>
   templateUrl: './app.component.html',<% } %><% if (inlineStyle) { %>
   styles: []<% } else { %>
-  styleUrls: ['./app.component.<%= styleExt %>']<% } %>
+  styleUrls: ['./app.component.<%= styleExt %>']<% } %><% if(animation) { %>,
+  animations: [AppFadeInAnimation]<% } %>
 })
 export class AppComponent {
   title = '<%= prefix %> works!';

packages/@angular/cli/blueprints/ng/files/__path__/app/app.module.ts

@@ -1,4 +1,5 @@
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';<% if (animation) { %>
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';<% } %>
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
@@ -11,7 +12,8 @@ import { AppComponent } from './app.component';
     AppComponent
   ],
   imports: [
-    BrowserModule,
+    BrowserModule,<% if (animation) { %>
+    BrowserAnimationsModule,<% } %>
     FormsModule,
     HttpModule<% if (routing) { %>,
     AppRoutingModule<% } %>

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

@@ -19,7 +19,8 @@
     "@angular/http": "^4.0.0",
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
-    "@angular/router": "^4.0.0",
+    "@angular/router": "^4.0.0",<% if (animation) { %>
+    "@angular/animations": "^4.0.0",<% } %>
     "core-js": "^2.4.1",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"

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

@@ -13,6 +13,7 @@ export default Blueprint.extend({
     { name: 'prefix', type: String, default: 'app', aliases: ['p'] },
     { name: 'style', type: String },
     { name: 'routing', type: Boolean, default: false },
+    { name: 'animation', type: Boolean, default: false },
     { name: 'inline-style', type: Boolean, default: false, aliases: ['is'] },
     { name: 'inline-template', type: Boolean, default: false, aliases: ['it'] },
     { name: 'skip-git', type: Boolean, default: false, aliases: ['sg'] }
@@ -53,6 +54,7 @@ export default Blueprint.extend({
       styleExt: this.styleExt,
       relativeRootPath: relativeRootPath,
       routing: options.routing,
+      animation: options.animation,
       inlineStyle: options.inlineStyle,
       inlineTemplate: options.inlineTemplate,
       tests: this.tests,
@@ -66,6 +68,9 @@ export default Blueprint.extend({
     if (this.options && !this.options.routing) {
       fileList = fileList.filter(p => p.indexOf('app-routing.module.ts') < 0);
     }
+    if (this.options && !this.options.animation) {
+      fileList = fileList.filter(p => p.indexOf('app-fade-in.animation.ts') < 0);
+    }
     if (this.options && this.options.inlineTemplate) {
       fileList = fileList.filter(p => p.indexOf('app.component.html') < 0);
     }

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

@@ -108,6 +108,12 @@ const NewCommand = Command.extend({
       default: false,
       description: 'Generate a routing module.'
     },
+    {
+      name: 'animation',
+      type: Boolean,
+      default: false,
+      description: 'Generate with animation support.'
+    },
     {
       name: 'inline-style',
       type: Boolean,

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

@@ -74,6 +74,7 @@ export default Task.extend({
       style: commandOptions.style,
       prefix: commandOptions.prefix.trim() || 'app',
       routing: commandOptions.routing,
+      animation: commandOptions.animation,
       inlineStyle: commandOptions.inlineStyle,
       inlineTemplate: commandOptions.inlineTemplate,
       ignoredUpdateFiles: ['favicon.ico'],

tests/e2e/tests/commands/new/new-animation.ts

@@ -0,0 +1,11 @@
+import {ng} from '../../../utils/process';
+import {createProject} from '../../../utils/project';
+
+
+export default function() {
+  return Promise.resolve()
+    .then(() => createProject('animation-project', '--animation'))
+
+    // Try to run the unit tests.
+    .then(() => ng('test', '--single-run'));
+}