feat(@schematics/angular): Allow empty string in the type option

Currently, Component and Class have the options to add custom type. In the case of class, It's already working fine with  an empty string in type but in the case  of component When setting the type to an empty string the file names generated will contain an extra period (.) which breaks the flow.

With this PR, It will generate the files without an extra period (.)

Reference angular#16811 and angular#16891

Author: sacgrover

packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.spec.ts.template

@@ -1,6 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { <%= classify(name) %><%= classify(type) %> } from './<%= dasherize(name) %>.<%= dasherize(type) %>';
+import { <%= classify(name) %><%= classify(type) %> } from './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>';
 
 describe('<%= classify(name) %><%= classify(type) %>', () => {
   let component: <%= classify(name) %><%= classify(type) %>;

packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template

@@ -7,15 +7,15 @@ import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }
       <%= dasherize(name) %> works!
     </p>
   `,<% } else { %>
-  templateUrl: './<%= dasherize(name) %>.<%= dasherize(type) %>.html',<% } if(inlineStyle) { %>
+  templateUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.html',<% } if(inlineStyle) { %>
   styles: [<% if(displayBlock){ %>
     `
       :host {
         display: block;
       }
     `<% } %>
   ],<% } else { %>
-  styleUrls: ['./<%= dasherize(name) %>.<%= dasherize(type) %>.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
+  styleUrls: ['./<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
 })

packages/schematics/angular/component/index.ts

@@ -19,6 +19,7 @@ import {
   noop,
   url,
 } from '@angular-devkit/schematics';
+import { rename } from '@angular-devkit/schematics/src/rules/rename';
 import * as ts from '../third_party/github.com/Microsoft/TypeScript/lib/typescript';
 import {
   addDeclarationToModule,
@@ -49,15 +50,15 @@ function addDeclarationToNgModule(options: ComponentOptions): Rule {
       return host;
     }
 
-    options.type = !!options.type ? options.type : 'Component';
+    options.type = options.type != null ? options.type : 'Component';
 
     const modulePath = options.module;
     const source = readIntoSourceFile(host, modulePath);
 
     const componentPath = `/${options.path}/`
                           + (options.flat ? '' : strings.dasherize(options.name) + '/')
                           + strings.dasherize(options.name)
-                          + '.'
+                          + (options.type ? '.' : '')
                           + strings.dasherize(options.type);
     const relativePath = buildRelativePath(modulePath, componentPath);
     const classifiedName = strings.classify(options.name) + strings.classify(options.type);
@@ -155,6 +156,7 @@ export default function (options: ComponentOptions): Rule {
         'if-flat': (s: string) => options.flat ? '' : s,
         ...options,
       }),
+      !options.type ? rename(name => !!name.match(new RegExp('..')), (name) => name.replace('..', '.')) : noop(),
       move(parsedPath.path),
     ]);
 

packages/schematics/angular/component/index_spec.ts

@@ -297,6 +297,17 @@ describe('Component Schematic', () => {
     expect(tree.files).toContain('/projects/bar/src/app/foo/foo.route.html');
   });
 
+  it('should allow empty string in the type option', async () => {
+    const options = { ...defaultOptions, type: '' };
+    const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
+    const content = tree.readContent('/projects/bar/src/app/foo/foo.ts');
+    const testContent = tree.readContent('/projects/bar/src/app/foo/foo.spec.ts');
+    expect(content).toContain('export class Foo implements OnInit');
+    expect(testContent).toContain("describe('Foo'");
+    expect(tree.files).toContain('/projects/bar/src/app/foo/foo.css');
+    expect(tree.files).toContain('/projects/bar/src/app/foo/foo.html');
+  });
+
   it('should use the module flag even if the module is a routing module', async () => {
     const routingFileName = 'app-routing.module.ts';
     const routingModulePath = `/projects/bar/src/app/${routingFileName}`;