fix(@schematics/angular): default component templates to not use .ng.html extension

To align with recent changes to the updated style guide, Angular v20 will now
generate component templates without a `.ng.html` file extension and instead use
the previous `.html` by default. The `--ng-html` option is still available for use if
the `.ng.html` extension is preferred in projects.

Author: clydin

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

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

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

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

packages/schematics/angular/application/files/standalone-files/src/app/app.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('.ng.html.template'))
+            ? filter((path) => !path.endsWith('app.html.template'))
             : noop(),
           applyTemplates({
             utils: strings,

packages/schematics/angular/application/index.ts

@@ -56,7 +56,7 @@ describe('Application Schematic', () => {
         '/projects/foo/src/styles.css',
         '/projects/foo/src/app/app-module.ts',
         '/projects/foo/src/app/app.css',
-        '/projects/foo/src/app/app.ng.html',
+        '/projects/foo/src/app/app.html',
         '/projects/foo/src/app/app.spec.ts',
         '/projects/foo/src/app/app.ts',
       ]),
@@ -266,7 +266,7 @@ describe('Application Schematic', () => {
           '/src/main.ts',
           '/src/styles.css',
           '/src/app/app.css',
-          '/src/app/app.ng.html',
+          '/src/app/app.html',
           '/src/app/app.spec.ts',
           '/src/app/app.ts',
         ]),
@@ -447,7 +447,7 @@ describe('Application Schematic', () => {
     [
       '/projects/foo/tsconfig.spec.json',
       '/projects/foo/src/app/app.css',
-      '/projects/foo/src/app/app.ng.html',
+      '/projects/foo/src/app/app.html',
       '/projects/foo/src/app/app.spec.ts',
     ].forEach((x) => expect(files).not.toContain(x));
 
@@ -472,7 +472,7 @@ describe('Application Schematic', () => {
       '/projects/foo/tsconfig.spec.json',
       '/projects/foo/karma.conf.js',
       '/projects/foo/src/test.ts',
-      '/projects/foo/src/app/app.ng.html',
+      '/projects/foo/src/app/app.html',
       '/projects/foo/src/app/app.spec.ts',
     ].forEach((x) => expect(files).not.toContain(x));
 
@@ -509,7 +509,7 @@ describe('Application Schematic', () => {
         '/projects/foo/src/index.html',
         '/projects/foo/src/main.ts',
         '/projects/foo/src/styles.css',
-        '/projects/foo/src/app/app.ng.html',
+        '/projects/foo/src/app/app.html',
         '/projects/foo/src/app/app.ts',
       ]),
     );
@@ -531,7 +531,7 @@ describe('Application Schematic', () => {
         '/projects/foo/src/styles.css',
         '/projects/foo/src/app/app.config.ts',
         '/projects/foo/src/app/app.css',
-        '/projects/foo/src/app/app.ng.html',
+        '/projects/foo/src/app/app.html',
         '/projects/foo/src/app/app.spec.ts',
         '/projects/foo/src/app/app.ts',
       ]),
@@ -672,7 +672,7 @@ describe('Application Schematic', () => {
           '/projects/foo/src/app/app-routing-module.ts',
           '/projects/foo/src/app/app-module.ts',
           '/projects/foo/src/app/app.css',
-          '/projects/foo/src/app/app.ng.html',
+          '/projects/foo/src/app/app.html',
           '/projects/foo/src/app/app.spec.ts',
           '/projects/foo/src/app/app.ts',
         ]),

packages/schematics/angular/application/index_spec.ts

@@ -310,13 +310,13 @@ describe('Component Schematic', () => {
     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 () => {
+  it('should not 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(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.ng.html');
+    expect(tree.files).toContain('/projects/bar/src/app/foo/foo.component.html');
   });
 
   it('should create the right selector with a path in the name', async () => {

packages/schematics/angular/component/index_spec.ts

@@ -137,8 +137,8 @@
     },
     "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."
+      "default": false,
+      "description": "Generate component template files with an '.ng.html' file extension instead of '.html'."
     }
   },
   "required": ["name", "project"]

packages/schematics/angular/component/schema.json

@@ -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.ts',
-          '/projects/bar/src/app/foo/foo.ng.html',
+          '/projects/bar/src/app/foo/foo.html',
           '/projects/bar/src/app/foo/foo.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.ts');
-      expect(files).toContain('/projects/bar/src/app/foo/foo.ng.html');
+      expect(files).toContain('/projects/bar/src/app/foo/foo.html');
       expect(files).toContain('/projects/bar/src/app/foo/foo.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.ts',
-          '/projects/bar/src/app/foo.ng.html',
+          '/projects/bar/src/app/foo.html',
           '/projects/bar/src/app/foo.css',
         ]),
       );