feat(generate): support component --suffix=Route

docs/documentation/generate/component.md

@@ -4,6 +4,8 @@
 `ng generate component [name]` generates a component
 
 ## Options
+`--suffix` (`-s`) specifies the component suffix, defaults to `component`
+
 `--flat` flag to indicate if a dir is created
 
 `--inline-template` (`-it`) specifies if the template will be in the ts file

packages/angular-cli/blueprints/component/files/__path__/__name__.component.spec.ts → packages/angular-cli/blueprints/component/files/__path__/__name__.__suffix__.spec.ts

@@ -3,21 +3,21 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 
-import { <%= classifiedModuleName %>Component } from './<%= dasherizedModuleName %>.component';
+import { <%= classifiedModuleName %><%= classifiedSuffix %> } from './<%= dasherizedModuleName %>.<%= suffix %>';
 
-describe('<%= classifiedModuleName %>Component', () => {
-  let component: <%= classifiedModuleName %>Component;
-  let fixture: ComponentFixture<<%= classifiedModuleName %>Component>;
+describe('<%= classifiedModuleName %><%= classifiedSuffix %>', () => {
+  let component: <%= classifiedModuleName %><%= classifiedSuffix %>;
+  let fixture: ComponentFixture<<%= classifiedModuleName %><%= classifiedSuffix %>>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ <%= classifiedModuleName %>Component ]
+      declarations: [ <%= classifiedModuleName %><%= classifiedSuffix %> ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(<%= classifiedModuleName %>Component);
+    fixture = TestBed.createComponent(<%= classifiedModuleName %><%= classifiedSuffix %>);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

packages/angular-cli/blueprints/component/files/__path__/__name__.component.ts → packages/angular-cli/blueprints/component/files/__path__/__name__.__suffix__.ts

@@ -7,13 +7,13 @@ import { Component, OnInit<% if(viewEncapsulation) { %>, ViewEncapsulation<% }%>
       <%= dasherizedModuleName %> Works!
     </p>
   `,<% } else { %>
-  templateUrl: './<%= dasherizedModuleName %>.component.html',<% } if(inlineStyle) { %>
+  templateUrl: './<%= dasherizedModuleName %>.<%= suffix %>.html',<% } if(inlineStyle) { %>
   styles: []<% } else { %>
-  styleUrls: ['./<%= dasherizedModuleName %>.component.<%= styleExt %>']<% } %><% if(viewEncapsulation) { %>,
+  styleUrls: ['./<%= dasherizedModuleName %>.<%= suffix %>.<%= styleExt %>']<% } %><% if(viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection) { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
 })
-export class <%= classifiedModuleName %>Component implements OnInit {
+export class <%= classifiedModuleName %><%= classifiedSuffix %> implements OnInit {
 
   constructor() { }
 

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

@@ -13,6 +13,7 @@ module.exports = {
   description: '',
 
   availableOptions: [
+    { name: 'suffix', type: String, aliases: ['s'] },
     { name: 'flat', type: Boolean, default: false },
     { name: 'inline-template', type: Boolean, aliases: ['it'] },
     { name: 'inline-style', type: Boolean, aliases: ['is'] },
@@ -71,13 +72,20 @@ module.exports = {
   },
 
   locals: function (options) {
+
     this.styleExt = 'css';
     if (this.project.ngConfig &&
         this.project.ngConfig.defaults &&
         this.project.ngConfig.defaults.styleExt) {
       this.styleExt = this.project.ngConfig.defaults.styleExt;
     }
 
+    options.suffix = options.suffix !== undefined ?
+      stringUtils.dasherize(options.suffix) :
+      'component';
+
+    options.classifiedSuffix = stringUtils.classify(options.suffix);
+
     options.inlineStyle = options.inlineStyle !== undefined ?
       options.inlineStyle :
       this.project.ngConfigObj.get('defaults.inline.style');
@@ -100,6 +108,8 @@ module.exports = {
 
     return {
       dynamicPath: this.dynamicPath.dir.replace(this.dynamicPath.appRoot, ''),
+      suffix: options.suffix,
+      classifiedSuffix: options.classifiedSuffix,
       flat: options.flat,
       spec: options.spec,
       inlineTemplate: options.inlineTemplate,
@@ -123,7 +133,7 @@ module.exports = {
       fileList = fileList.filter(p => p.indexOf('.__styleext__') < 0);
     }
     if (this.options && !this.options.spec) {
-      fileList = fileList.filter(p => p.indexOf('__name__.component.spec.ts') < 0);
+      fileList = fileList.filter(p => p.indexOf('__name__.__suffix__.spec.ts') < 0);
     }
 
     return fileList;
@@ -142,6 +152,9 @@ module.exports = {
         this.generatePath = dir;
         return dir;
       },
+      __suffix__: () => {
+        return options.locals.suffix;
+      },
       __styleext__: () => {
         return this.styleExt;
       }
@@ -154,8 +167,8 @@ module.exports = {
     }
 
     const returns = [];
-    const className = stringUtils.classify(`${options.entity.name}Component`);
-    const fileName = stringUtils.dasherize(`${options.entity.name}.component`);
+    const className = stringUtils.classify(options.entity.name) + options.classifiedSuffix;
+    const fileName = stringUtils.dasherize(`${options.entity.name}.${options.suffix}`);
     const componentDir = path.relative(path.dirname(this.pathToModule), this.generatePath);
     const importPath = componentDir ? `./${componentDir}/${fileName}` : `./${fileName}`;
 

tests/acceptance/generate-component.spec.js

@@ -198,4 +198,30 @@ describe('Acceptance: ng generate component', function () {
       expect(existsSync(testPath)).to.equal(false);
     });
   });
+
+  it('my-comp --suffix=route', function () {
+    const testPath = path.join(root, 'tmp/foo/src/app/my-comp/my-comp.route.ts');
+    const appModule = path.join(root, 'tmp/foo/src/app/app.module.ts');
+    return ng(['generate', 'component', 'my-comp', '--suffix=route'])
+      .then(() => expect(existsSync(testPath)).to.equal(true))
+      .then(() => readFile(appModule, 'utf-8'))
+      .then(content => {
+        // Expect that the app.module contains a reference to my-comp and its import.
+        expect(content).matches(/import.*MyCompRoute.*from '.\/my-comp\/my-comp.route';/);
+        expect(content).matches(/declarations:\s*\[[^\]]+?,\r?\n\s+MyCompRoute\r?\n/m);
+      });
+  });
+
+  it('my-comp --suffix=smart-component', function () {
+    const testPath = path.join(root, 'tmp/foo/src/app/my-comp/my-comp.smart-component.ts');
+    const appModule = path.join(root, 'tmp/foo/src/app/app.module.ts');
+    return ng(['generate', 'component', 'my-comp', '--suffix=smart-component'])
+      .then(() => expect(existsSync(testPath)).to.equal(true))
+      .then(() => readFile(appModule, 'utf-8'))
+      .then(content => {
+        // Expect that the app.module contains a reference to my-comp and its import.
+        expect(content).matches(/import.*MyCompSmartComponent.*from '.\/my-comp\/my-comp.smart-component';/);
+        expect(content).matches(/declarations:\s*\[[^\]]+?,\r?\n\s+MyCompSmartComponent\r?\n/m);
+      });
+  });
 });