fix add-view for Angular (#934)

Author: GoodDayForSurf

packages/devextreme-schematics/src/add-layout/index.ts

@@ -208,14 +208,16 @@ function updateAppModule(host: Tree, sourcePath: string) {
 
 function getComponentName(host: Tree, sourcePath: string) {
   let name = '';
-  const index = 1;
+  let index = 0;
 
   if (!host.exists(sourcePath + 'app.component.ts')) {
     name = 'app';
   }
 
   while (!name) {
+    index++;
     const componentName = `app${index}`;
+
     if (!host.exists(`${sourcePath}${componentName}.component.ts`)) {
       name = componentName;
     }

packages/devextreme-schematics/src/add-view/index.ts

@@ -151,12 +151,12 @@ async function addContentToTS(options: any) {
   const content = `import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-new-page',
-  templateUrl: './new-page.component.html',
-  styleUrl: './new-page.component.css',
+  selector: 'app-${name}',
+  templateUrl: './${name}.component.html',
+  styleUrl: './${name}.component.css',
   standalone: false
 })
-export class NewPageComponent {
+export class ${strings.classify(basename(normalize(name)))}Component {
 
 }
 `;

packages/devextreme-schematics/src/add-view/index_spec.ts

@@ -1,5 +1,6 @@
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
 import { Schema as WorkspaceOptions } from '@schematics/angular/workspace/schema';
+import { strings, basename, normalize } from '@angular-devkit/core';
 import * as path from 'path';
 
 const collectionPath = path.join(__dirname, '../collection.json');
@@ -45,6 +46,7 @@ describe('view', () => {
 
   it('should create new view', async () => {
     const runner = new SchematicTestRunner('schematics', collectionPath);
+    const componentName = componentOptions.name;
     let tree = await runner.runSchematic('add-layout', { layout: 'side-nav-outer-toolbar' }, appTree);
     tree = await runner.runSchematic('add-view', componentOptions, appTree);
 
@@ -55,7 +57,11 @@ describe('view', () => {
     const contentTS = tree.readContent('/src/app/pages/test/test.component.ts');
 
     expect(contentHTML).toMatch(/<h2>Test<\/h2>/);
+    expect(contentTS).toContain(`selector: 'app-${componentName}'`);
+    expect(contentTS).toContain(`templateUrl: './${componentName}.component.html'`);
+    expect(contentTS).toContain(`styleUrl: './${componentName}.component.css'`);
     expect(contentTS).toContain('standalone: false');
+    expect(contentTS).toContain(`export class ${strings.classify(basename(normalize(componentName)))}Component`);
   });
 
   it('should add view to default routing module', async () => {