feature(new): allow specification of --inline-style & --inline-template for new apps (angular#2455)

Fixes angular#2446

Author: Brocco

packages/angular-cli/blueprints/ng2/files/__path__/app/app.component.ts

@@ -2,14 +2,14 @@ import { Component } from '@angular/core';<% if (isMobile) { %>
 import { APP_SHELL_DIRECTIVES } from '@angular/app-shell';<% } %>
 
 @Component({
-  selector: '<%= prefix %>-root',
-  <% if (isMobile) { %>template: `
+  selector: '<%= prefix %>-root',<% if (isMobile || inlineTemplate) { %>
+  template: `
   <h1>
     {{title}}
   </h1>
-  `,
-  styles: [],
-  directives: [APP_SHELL_DIRECTIVES]<% } else { %>templateUrl: './app.component.html',
+  `,<% } else { %>
+  templateUrl: './app.component.html',<% } %><% if (isMobile || inlineStyle) { %>
+  styles: []<% } else { %>
   styleUrls: ['./app.component.<%= styleExt %>']<% } %>
 })
 export class AppComponent {

packages/angular-cli/blueprints/ng2/index.js

@@ -11,7 +11,9 @@ module.exports = {
     { name: 'prefix', type: String, default: 'app', aliases: ['p'] },
     { name: 'style', type: String, default: 'css' },
     { name: 'mobile', type: Boolean, default: false },
-    { name: 'routing', type: Boolean, default: false }
+    { name: 'routing', type: Boolean, default: false },
+    { name: 'inline-style', type: Boolean, default: false, aliases: ['is'] },
+    { name: 'inline-template', type: Boolean, default: false, aliases: ['it'] }
   ],
 
   afterInstall: function (options) {
@@ -40,18 +42,26 @@ module.exports = {
       styleExt: this.styleExt,
       relativeRootPath: relativeRootPath,
       isMobile: options.mobile,
-      routing: options.routing
+      routing: options.routing,
+      inlineStyle: options.inlineStyle,
+      inlineTemplate: options.inlineTemplate
     };
   },
 
   files: function() {
     var fileList = getFiles.call(this);
     if (this.options && this.options.mobile) {
-      fileList = fileList.filter(p => p.indexOf('__name__.component.html') < 0);
-      fileList = fileList.filter(p => p.indexOf('__name__.component.__styleext__') < 0);
+      fileList = fileList.filter(p => p.indexOf('app.component.html') < 0);
+      fileList = fileList.filter(p => p.indexOf('app.component.__styleext__') < 0);
     }
     if (this.options && !this.options.routing) {
-      fileList = fileList.filter(p => p.indexOf('__name__-routing.module.ts') < 0);
+      fileList = fileList.filter(p => p.indexOf('app-routing.module.ts') < 0);
+    }
+    if (this.options && this.options.inlineTemplate) {
+      fileList = fileList.filter(p => p.indexOf('app.component.html') < 0);
+    }
+    if (this.options && this.options.inlineStyle) {
+      fileList = fileList.filter(p => p.indexOf('app.component.__styleext__') < 0);
     }
 
     return fileList;

packages/angular-cli/commands/init.ts

@@ -27,7 +27,9 @@ const InitCommand: any = Command.extend({
     { name: 'style', type: String, default: 'css' },
     { name: 'prefix', type: String, default: 'app', aliases: ['p'] },
     { name: 'mobile', type: Boolean, default: false },
-    { name: 'routing', type: Boolean, default: false }
+    { name: 'routing', type: Boolean, default: false },
+    { name: 'inline-style', type: Boolean, default: false, aliases: ['is'] },
+    { name: 'inline-template', type: Boolean, default: false, aliases: ['it'] }
   ],
 
   anonymousOptions: ['<glob-pattern>'],
@@ -106,7 +108,9 @@ const InitCommand: any = Command.extend({
       style: commandOptions.style,
       prefix: commandOptions.prefix,
       mobile: commandOptions.mobile,
-      routing: commandOptions.routing
+      routing: commandOptions.routing,
+      inlineStyle: commandOptions.inlineStyle,
+      inlineTemplate: commandOptions.inlineTemplate
     };
 
     if (!validProjectName(packageName)) {

packages/angular-cli/commands/new.ts

@@ -25,7 +25,9 @@ const NewCommand = Command.extend({
     { name: 'style', type: String, default: 'css' },
     { name: 'prefix', type: String, default: 'app', aliases: ['p'] },
     { name: 'mobile', type: Boolean, default: false },
-    { name: 'routing', type: Boolean, default: false }
+    { name: 'routing', type: Boolean, default: false },
+    { name: 'inline-style', type: Boolean, default: false, aliases: ['is'] },
+    { name: 'inline-template', type: Boolean, default: false, aliases: ['it'] }
   ],
 
   run: function (commandOptions: any, rawArgs: string[]) {

tests/acceptance/init.spec.js

@@ -17,6 +17,7 @@ var unique = require('lodash/uniq');
 var forEach = require('lodash/forEach');
 var any = require('lodash/some');
 var EOL = require('os').EOL;
+var existsSync = require('exists-sync');
 
 var defaultIgnoredFiles = Blueprint.ignoredFiles;
 
@@ -44,7 +45,8 @@ describe('Acceptance: ng init', function () {
     return tmp.teardown('./tmp');
   });
 
-  function confirmBlueprinted(isMobile) {
+  function confirmBlueprinted(isMobile, routing) {
+    routing = !!routing;
     var blueprintPath = path.join(root,  'blueprints', 'ng2', 'files');
     var mobileBlueprintPath = path.join(root, 'blueprints', 'mobile', 'files');
     var expected = unique(walkSync(blueprintPath).concat(isMobile ? walkSync(mobileBlueprintPath) : []).sort());
@@ -55,14 +57,18 @@ describe('Acceptance: ng init', function () {
     });
 
     expected.forEach(function (file, index) {
-      expected[index] = file.replace(/__name__/g, 'tmp');
+      expected[index] = file.replace(/__name__/g, 'app');
       expected[index] = expected[index].replace(/__styleext__/g, 'css');
       expected[index] = expected[index].replace(/__path__/g, 'src');
     });
-    
+
     if (isMobile) {
-      expected = expected.filter(p => p.indexOf('tmp.component.html') < 0);
-      expected = expected.filter(p => p.indexOf('tmp.component.css') < 0);
+      expected = expected.filter(p => p.indexOf('app.component.html') < 0);
+      expected = expected.filter(p => p.indexOf('app.component.css') < 0);
+    }
+
+    if (!routing) {
+      expected = expected.filter(p => p.indexOf('app-routing.module.ts') < 0);
     }
 
     removeIgnored(expected);
@@ -200,4 +206,20 @@ describe('Acceptance: ng init', function () {
       })
       .then(confirmBlueprinted);
   });
+
+  it('ng init --inline-template does not generate a template file', () => {
+    return ng(['init', '--skip-npm', '--skip-git', '--inline-template'])
+      .then(() => {
+        const templateFile = path.join('src', 'app', 'app.component.html');
+        expect(existsSync(templateFile)).to.equal(false);
+      });
+  });
+
+  it('ng init --inline-style does not gener a style file', () => {
+    return ng(['init', '--skip-npm', '--skip-git', '--inline-style'])
+      .then(() => {
+        const styleFile = path.join('src', 'app', 'app.component.css');
+        expect(existsSync(styleFile)).to.equal(false);
+      });
+  });
 });

tests/acceptance/new.spec.js

@@ -168,4 +168,20 @@ describe('Acceptance: ng new', function () {
         expect(pkgJson.name).to.equal('foo', 'uses app name for package name');
       });
   });
+
+  it('ng new --inline-template does not generate a template file', () => {
+    return ng(['new', 'foo', '--skip-npm', '--skip-git', '--inline-template'])
+      .then(() => {
+        const templateFile = path.join('src', 'app', 'app.component.html');
+        expect(existsSync(templateFile)).to.equal(false);
+      });
+  });
+
+  it('ng new --inline-style does not gener a style file', () => {
+    return ng(['new', 'foo', '--skip-npm', '--skip-git', '--inline-style'])
+      .then(() => {
+        const styleFile = path.join('src', 'app', 'app.component.css');
+        expect(existsSync(styleFile)).to.equal(false);
+      });
+  });
 });