feat(migrations): add migration to convert templates to use self-clos…

…ing tags (#57342)

This schematic helps developers to convert their templates to use self-closing tags mostly as a aesthetic change.

PR Close #57342

adev/src/app/sub-navigation-data.ts

@@ -1233,6 +1233,11 @@ const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
         path: 'reference/migrations/cleanup-unused-imports',
         contentPath: 'reference/migrations/cleanup-unused-imports',
       },
+      {
+        label: 'Self-closing tags',
+        path: 'reference/migrations/self-closing-tags',
+        contentPath: 'reference/migrations/self-closing-tags',
+      },
     ],
   },
 ];

adev/src/content/reference/migrations/overview.md

@@ -27,4 +27,7 @@ Learn about how you can migrate your existing angular project to the latest feat
   <docs-card title="Cleanup unused imports" link="Try it now" href="reference/migrations/cleanup-unused-imports">
     Clean up unused imports in your project.
   </docs-card>
+  <docs-card title="Self-closing tags" link="Migrate now" href="reference/migrations/self-closing-tags">
+    Convert component templates to use self-closing tags where possible.
+  </docs-card>
 </docs-card-container>

adev/src/content/reference/migrations/self-closing-tags.md

@@ -0,0 +1,26 @@
+# Migration to self-closing tags
+
+Self-closing tags are supported in Angular templates since [v16](https://blog.angular.dev/angular-v16-is-here-4d7a28ec680d#7065). .
+
+This schematic migrates the templates in your application to use self-closing tags.
+
+Run the schematic using the following command:
+
+<docs-code language="shell">
+
+ng generate @angular/core:self-closing-tag
+
+</docs-code>
+
+
+#### Before
+
+<docs-code language="angular-html">
+
+<!-- Before -->
+<hello-world></hello-world>
+
+<!-- After -->
+<hello-world />
+
+</docs-code>

packages/core/schematics/BUILD.bazel

@@ -18,6 +18,7 @@ pkg_npm(
         "//packages/core/schematics/ng-generate/inject-migration:static_files",
         "//packages/core/schematics/ng-generate/output-migration:static_files",
         "//packages/core/schematics/ng-generate/route-lazy-loading:static_files",
+        "//packages/core/schematics/ng-generate/self-closing-tags-migration:static_files",
         "//packages/core/schematics/ng-generate/signal-input-migration:static_files",
         "//packages/core/schematics/ng-generate/signal-queries-migration:static_files",
         "//packages/core/schematics/ng-generate/signals:static_files",
@@ -43,6 +44,7 @@ rollup_bundle(
         "//packages/core/schematics/ng-generate/signal-input-migration:index.ts": "signal-input-migration",
         "//packages/core/schematics/ng-generate/signal-queries-migration:index.ts": "signal-queries-migration",
         "//packages/core/schematics/ng-generate/output-migration:index.ts": "output-migration",
+        "//packages/core/schematics/ng-generate/self-closing-tags-migration:index.ts": "self-closing-tags-migration",
         "//packages/core/schematics/migrations/explicit-standalone-flag:index.ts": "explicit-standalone-flag",
         "//packages/core/schematics/migrations/pending-tasks:index.ts": "pending-tasks",
         "//packages/core/schematics/migrations/provide-initializer:index.ts": "provide-initializer",
@@ -63,6 +65,7 @@ rollup_bundle(
         "//packages/core/schematics/ng-generate/inject-migration",
         "//packages/core/schematics/ng-generate/output-migration",
         "//packages/core/schematics/ng-generate/route-lazy-loading",
+        "//packages/core/schematics/ng-generate/self-closing-tags-migration",
         "//packages/core/schematics/ng-generate/signal-input-migration",
         "//packages/core/schematics/ng-generate/signal-queries-migration",
         "//packages/core/schematics/ng-generate/signals",

packages/core/schematics/collection.json

@@ -51,6 +51,12 @@
       "description": "Removes unused imports from standalone components.",
       "factory": "./bundles/cleanup-unused-imports#migrate",
       "schema": "./ng-generate/cleanup-unused-imports/schema.json"
+    },
+    "self-closing-tags-migration": {
+      "description": "Updates the components templates to use self-closing tags where possible",
+      "factory": "./bundles/self-closing-tags-migration#migrate",
+      "schema": "./ng-generate/self-closing-tags-migration/schema.json",
+      "aliases": ["self-closing-tag"]
     }
   }
 }

packages/core/schematics/migrations/output-migration/output-migration.ts

@@ -7,7 +7,6 @@
  */
 
 import ts from 'typescript';
-import assert from 'assert';
 import {
   confirmAsSerializable,
   MigrationStats,

packages/core/schematics/migrations/self-closing-tags-migration/BUILD.bazel

@@ -0,0 +1,48 @@
+load("//tools:defaults.bzl", "jasmine_node_test", "ts_library")
+
+ts_library(
+    name = "migration",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["*.spec.ts"],
+    ),
+    visibility = [
+        "//packages/core/schematics/ng-generate/self-closing-tags-migration:__pkg__",
+        "//packages/language-service/src/refactorings:__pkg__",
+    ],
+    deps = [
+        "//packages/compiler",
+        "//packages/compiler-cli",
+        "//packages/compiler-cli/private",
+        "//packages/compiler-cli/src/ngtsc/annotations",
+        "//packages/compiler-cli/src/ngtsc/annotations/directive",
+        "//packages/compiler-cli/src/ngtsc/file_system",
+        "//packages/compiler-cli/src/ngtsc/imports",
+        "//packages/compiler-cli/src/ngtsc/metadata",
+        "//packages/compiler-cli/src/ngtsc/reflection",
+        "//packages/core/schematics/utils",
+        "//packages/core/schematics/utils/tsurge",
+        "@npm//@types/node",
+        "@npm//typescript",
+    ],
+)
+
+ts_library(
+    name = "test_lib",
+    testonly = True,
+    srcs = glob(
+        ["**/*.spec.ts"],
+    ),
+    deps = [
+        ":migration",
+        "//packages/compiler-cli",
+        "//packages/compiler-cli/src/ngtsc/file_system/testing",
+        "//packages/core/schematics/utils/tsurge",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    srcs = [":test_lib"],
+    env = {"FORCE_COLOR": "3"},
+)