fix(@schematics/angular): issues in apps generated with '--file-name-style-guide=2016' flag

Author: pawelfras

packages/schematics/angular/application/files/module-files/src/app/app__suffix__.spec.ts.template

@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';<% if (routing) { %>
 import { RouterModule } from '@angular/router';<% } %>
-import { App } from './app';
+import { App } from './app<%= suffix %>';
 
 describe('App', () => {
   beforeEach(async () => {

packages/schematics/angular/application/files/module-files/src/app/app__suffix__.ts.template

@@ -9,10 +9,10 @@ import { Component, signal } from '@angular/core';
      %><router-outlet /><%
     } %>
   `,<% } else { %>
-  templateUrl: './app.html',<% } %>
+  templateUrl: './app<%= suffix %>.html',<% } %>
   standalone: false,<% if(inlineStyle) { %>
   styles: []<% } else { %>
-  styleUrl: './app.<%= style %>'<% } %>
+  styleUrl: './app<%= suffix %>.<%= style %>'<% } %>
 })
 export class App {
   protected readonly title = signal('<%= name %>');

…ule-files/src/app/app-module.ts.template …p/app__typeSeparator__module.ts.templatepackages/schematics/angular/application/files/module-files/src/app/app-module.ts.template renamed to packages/schematics/angular/application/files/module-files/src/app/app__typeSeparator__module.ts.template packages/schematics/angular/application/files/module-files/src/app/app-module.ts.template renamed to packages/schematics/angular/application/files/module-files/src/app/app__typeSeparator__module.ts.template

@@ -1,8 +1,8 @@
 import { NgModule, provideBrowserGlobalErrorListeners } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 <% if (routing) { %>
-import { AppRoutingModule } from './app-routing-module';<% } %>
-import { App } from './app';
+import { AppRoutingModule } from './app-routing<%= typeSeparator %>module';<% } %>
+import { App } from './app<%= suffix %>';
 
 @NgModule({
   declarations: [

packages/schematics/angular/application/files/standalone-files/src/app/app__suffix__.spec.ts.template

@@ -1,5 +1,5 @@
 import { TestBed } from '@angular/core/testing';
-import { App } from './app';
+import { App } from './app<%= suffix %>';
 
 describe('App', () => {
   beforeEach(async () => {

packages/schematics/angular/application/index.ts

@@ -68,6 +68,7 @@ export default function (options: ApplicationOptions): Rule {
       await getAppOptions(host, options);
 
     const suffix = options.fileNameStyleGuide === '2016' ? '.component' : '';
+    const typeSeparator = options.fileNameStyleGuide === '2016' ? '.' : '-';
 
     return chain([
       addAppToWorkspaceFile(options, appDir),
@@ -85,7 +86,7 @@ export default function (options: ApplicationOptions): Rule {
             routingScope: 'Root',
             path: sourceDir,
             project: options.name,
-            typeSeparator: undefined,
+            typeSeparator,
           }),
       schematic('component', {
         name: 'app',
@@ -111,6 +112,7 @@ export default function (options: ApplicationOptions): Rule {
             appName: options.name,
             folderName,
             suffix,
+            typeSeparator,
           }),
           move(appDir),
         ]),

packages/schematics/angular/application/index_spec.ts

@@ -879,5 +879,62 @@ describe('Application Schematic', () => {
       expect(component).toContain(`templateUrl: './app.component.html'`);
       expect(component).toContain(`styleUrl: './app.component.css'`);
     });
+
+    it('should create a test file with import from the path without suffix', async () => {
+      const options = { ...defaultOptions, fileNameStyleGuide: '2016' as const };
+      const tree = await schematicRunner.runSchematic('application', options, workspaceTree);
+      const componentSpec = tree.readContent('/projects/foo/src/app/app.component.spec.ts');
+      expect(componentSpec).toContain(`import { App } from './app.component'`);
+    });
+
+    describe('standalone: false', () => {
+      it('should create a component with the correct template and style urls', async () => {
+        const options = {
+          ...defaultOptions,
+          standalone: false,
+          fileNameStyleGuide: '2016' as const,
+        };
+        const tree = await schematicRunner.runSchematic('application', options, workspaceTree);
+        const component = tree.readContent('/projects/foo/src/app/app.component.ts');
+        expect(component).toContain(`templateUrl: './app.component.html'`);
+        expect(component).toContain(`styleUrl: './app.component.css'`);
+      });
+
+      it('should create a test file with import from the path without suffix', async () => {
+        const options = {
+          ...defaultOptions,
+          standalone: false,
+          fileNameStyleGuide: '2016' as const,
+        };
+        const tree = await schematicRunner.runSchematic('application', options, workspaceTree);
+        const componentSpec = tree.readContent('/projects/foo/src/app/app.component.spec.ts');
+        expect(componentSpec).toContain(`import { App } from './app.component'`);
+      });
+
+      it('should create a module with the correct suffix', async () => {
+        const options = {
+          ...defaultOptions,
+          standalone: false,
+          fileNameStyleGuide: '2016' as const,
+        };
+        const tree = await schematicRunner.runSchematic('application', options, workspaceTree);
+        const module = tree.readContent('/projects/foo/src/app/app.module.ts');
+        expect(module).toContain(`import { App } from './app.component'`);
+      });
+
+      it('should create a routing module with the correct suffix', async () => {
+        const options = {
+          ...defaultOptions,
+          standalone: false,
+          routing: true,
+          fileNameStyleGuide: '2016' as const,
+        };
+        const tree = await schematicRunner.runSchematic('application', options, workspaceTree);
+        const module = tree.readContent('/projects/foo/src/app/app.module.ts');
+        const routingModule = tree.readContent('/projects/foo/src/app/app-routing.module.ts');
+        expect(routingModule).toBeDefined();
+        expect(module).toContain(`import { AppRoutingModule } from './app-routing.module'`);
+      });
+    });
   });
 });