fix(@schematics/angular): generate component templates with a .ng.html file extension

To align with the updated style guide, Angular v20 will generate
component templates with a `.ng.html` file extension instead of
the previous `.html` by default. Projects will automatically
use this new template extension. Projects can however opt-out of
component generation using `.ng.html` by setting the `ngHtml`
option to false for the component schematic. This can be done as
a default in the `angular.json` or directly on the commandline
via `--no-ng-html` when executing `ng generate`.

Author: clydin

packages/schematics/angular/application/files/common-files/src/app/app.component.html.template packages/schematics/angular/application/files/common-files/src/app/app.component.ng.html.template

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
      %><router-outlet /><%
     } %>
   `,<% } else { %>
-  templateUrl: './app.component.html',<% } %>
+  templateUrl: './app.component.ng.html',<% } %>
   standalone: false,<% if(inlineStyle) { %>
   styles: []<% } else { %>
   styleUrl: './app.component.<%= style %>'<% } %>

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

@@ -11,7 +11,7 @@ import { RouterOutlet } from '@angular/router';<% } %>
      %><router-outlet /><%
     } %>
   `,<% } else { %>
-  templateUrl: './app.component.html',<% } if(inlineStyle) { %>
+  templateUrl: './app.component.ng.html',<% } if(inlineStyle) { %>
   styles: [],<% } else { %>
   styleUrl: './app.component.<%= style %>'<% } %>
 })

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

@@ -84,7 +84,7 @@ export default function (options: ApplicationOptions): Rule {
             ? filter((path) => !path.endsWith('tsconfig.spec.json.template'))
             : noop(),
           componentOptions.inlineTemplate
-            ? filter((path) => !path.endsWith('component.html.template'))
+            ? filter((path) => !path.endsWith('.ng.html.template'))
             : noop(),
           applyTemplates({
             utils: strings,

packages/schematics/angular/application/index.ts

@@ -57,7 +57,7 @@ describe('Application Schematic', () => {
         '/projects/foo/src/styles.css',
         '/projects/foo/src/app/app.module.ts',
         '/projects/foo/src/app/app.component.css',
-        '/projects/foo/src/app/app.component.html',
+        '/projects/foo/src/app/app.component.ng.html',
         '/projects/foo/src/app/app.component.spec.ts',
         '/projects/foo/src/app/app.component.ts',
       ]),
@@ -267,7 +267,7 @@ describe('Application Schematic', () => {
           '/src/main.ts',
           '/src/styles.css',
           '/src/app/app.component.css',
-          '/src/app/app.component.html',
+          '/src/app/app.component.ng.html',
           '/src/app/app.component.spec.ts',
           '/src/app/app.component.ts',
         ]),
@@ -448,7 +448,7 @@ describe('Application Schematic', () => {
     [
       '/projects/foo/tsconfig.spec.json',
       '/projects/foo/src/app/app.component.css',
-      '/projects/foo/src/app/app.component.html',
+      '/projects/foo/src/app/app.component.ng.html',
       '/projects/foo/src/app/app.component.spec.ts',
     ].forEach((x) => expect(files).not.toContain(x));
 
@@ -473,7 +473,7 @@ describe('Application Schematic', () => {
       '/projects/foo/tsconfig.spec.json',
       '/projects/foo/karma.conf.js',
       '/projects/foo/src/test.ts',
-      '/projects/foo/src/app/app.component.html',
+      '/projects/foo/src/app/app.component.ng.html',
       '/projects/foo/src/app/app.component.spec.ts',
     ].forEach((x) => expect(files).not.toContain(x));
 
@@ -510,7 +510,7 @@ describe('Application Schematic', () => {
         '/projects/foo/src/index.html',
         '/projects/foo/src/main.ts',
         '/projects/foo/src/styles.css',
-        '/projects/foo/src/app/app.component.html',
+        '/projects/foo/src/app/app.component.ng.html',
         '/projects/foo/src/app/app.component.ts',
       ]),
     );
@@ -532,7 +532,7 @@ describe('Application Schematic', () => {
         '/projects/foo/src/styles.css',
         '/projects/foo/src/app/app.config.ts',
         '/projects/foo/src/app/app.component.css',
-        '/projects/foo/src/app/app.component.html',
+        '/projects/foo/src/app/app.component.ng.html',
         '/projects/foo/src/app/app.component.spec.ts',
         '/projects/foo/src/app/app.component.ts',
       ]),
@@ -673,7 +673,7 @@ describe('Application Schematic', () => {
           '/projects/foo/src/app/app-routing.module.ts',
           '/projects/foo/src/app/app.module.ts',
           '/projects/foo/src/app/app.component.css',
-          '/projects/foo/src/app/app.component.html',
+          '/projects/foo/src/app/app.component.ng.html',
           '/projects/foo/src/app/app.component.spec.ts',
           '/projects/foo/src/app/app.component.ts',
         ]),

packages/schematics/angular/application/index_spec.ts

@@ -9,7 +9,7 @@ import { <% if(changeDetection !== 'Default') { %>ChangeDetectionStrategy, <% }%
       <%= dasherize(name) %> works!
     </p>
   `<% } else { %>
-  templateUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.html'<% } if(inlineStyle) { %>,
+  templateUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %><%= ngext %>.html'<% } if(inlineStyle) { %>,
   styles: `<% if(displayBlock){ %>
     :host {
       display: block;

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

@@ -72,6 +72,7 @@ export default function (options: ComponentOptions): Rule {
       applyTemplates({
         ...strings,
         'if-flat': (s: string) => (options.flat ? '' : s),
+        'ngext': options.ngHtml ? '.ng' : '',
         ...options,
       }),
       !options.type

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

@@ -30,6 +30,7 @@ describe('Component Schematic', () => {
     module: undefined,
     export: false,
     project: 'bar',
+    ngHtml: false,
   };
 
   const workspaceOptions: WorkspaceOptions = {
@@ -291,6 +292,33 @@ describe('Component Schematic', () => {
     expect(tree.files).toContain('/projects/bar/src/app/foo/foo.html');
   });
 
+  it('should not use `.ng.html` extension when ngHtml is false', async () => {
+    const options = { ...defaultOptions, ngHtml: false };
+    const tree = await schematicRunner.runSchematic('component', options, appTree);
+    const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
+    expect(content).toContain('foo.component.html');
+    expect(tree.files).toContain('/projects/bar/src/app/foo/foo.component.css');
+    expect(tree.files).toContain('/projects/bar/src/app/foo/foo.component.html');
+  });
+
+  it('should use `.ng.html` extension when ngHtml is true', async () => {
+    const options = { ...defaultOptions, ngHtml: true };
+    const tree = await schematicRunner.runSchematic('component', options, appTree);
+    const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
+    expect(content).toContain('foo.component.ng.html');
+    expect(tree.files).toContain('/projects/bar/src/app/foo/foo.component.css');
+    expect(tree.files).toContain('/projects/bar/src/app/foo/foo.component.ng.html');
+  });
+
+  it('should use `.ng.html` extension when ngHtml is not present', async () => {
+    const options = { ...defaultOptions, ngHtml: undefined };
+    const tree = await schematicRunner.runSchematic('component', options, appTree);
+    const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
+    expect(content).toContain('foo.component.ng.html');
+    expect(tree.files).toContain('/projects/bar/src/app/foo/foo.component.css');
+    expect(tree.files).toContain('/projects/bar/src/app/foo/foo.component.ng.html');
+  });
+
   it('should create the right selector with a path in the name', async () => {
     const options = { ...defaultOptions, name: 'sub/test' };
     appTree = await schematicRunner.runSchematic('component', options, appTree);

packages/schematics/angular/component/index.ts

@@ -135,6 +135,11 @@
       "type": "boolean",
       "default": false,
       "description": "Use a default export for the component in its TypeScript file instead of a named export."
+    },
+    "ngHtml": {
+      "type": "boolean",
+      "default": true,
+      "description": "Generate component template files with an '.ng.html' file extension instead of '.html'. The '.ng.html' file extension is recommended by the Angular style guide."
     }
   },
   "required": ["name", "project"]

packages/schematics/angular/component/index_spec.ts

@@ -153,7 +153,7 @@ describe('Module Schematic', () => {
           '/projects/bar/src/app/foo/foo.module.ts',
           '/projects/bar/src/app/foo/foo-routing.module.ts',
           '/projects/bar/src/app/foo/foo.component.ts',
-          '/projects/bar/src/app/foo/foo.component.html',
+          '/projects/bar/src/app/foo/foo.component.ng.html',
           '/projects/bar/src/app/foo/foo.component.css',
         ]),
       );
@@ -203,7 +203,7 @@ describe('Module Schematic', () => {
       expect(files).toContain('/projects/bar/src/app/foo/foo.module.ts');
       expect(files).not.toContain('/projects/bar/src/app/foo/foo-routing.module.ts');
       expect(files).toContain('/projects/bar/src/app/foo/foo.component.ts');
-      expect(files).toContain('/projects/bar/src/app/foo/foo.component.html');
+      expect(files).toContain('/projects/bar/src/app/foo/foo.component.ng.html');
       expect(files).toContain('/projects/bar/src/app/foo/foo.component.css');
 
       const appModuleContent = tree.readContent('/projects/bar/src/app/app.module.ts');
@@ -231,7 +231,7 @@ describe('Module Schematic', () => {
           '/projects/bar/src/app/foo.module.ts',
           '/projects/bar/src/app/foo-routing.module.ts',
           '/projects/bar/src/app/foo.component.ts',
-          '/projects/bar/src/app/foo.component.html',
+          '/projects/bar/src/app/foo.component.ng.html',
           '/projects/bar/src/app/foo.component.css',
         ]),
       );