Skip to content

Commit 1cd3a7d

Browse files
eneajahothePunderWoman
authored andcommittedFeb 18, 2025·
feat(migrations): add migration to convert templates to use self-closing tags (#57342)
This schematic helps developers to convert their templates to use self-closing tags mostly as a aesthetic change. PR Close #57342
1 parent b6fa69f commit 1cd3a7d

19 files changed

+984
-22
lines changed
 

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

+5
Original file line numberDiff line numberDiff line change
@@ -1233,6 +1233,11 @@ const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
12331233
path: 'reference/migrations/cleanup-unused-imports',
12341234
contentPath: 'reference/migrations/cleanup-unused-imports',
12351235
},
1236+
{
1237+
label: 'Self-closing tags',
1238+
path: 'reference/migrations/self-closing-tags',
1239+
contentPath: 'reference/migrations/self-closing-tags',
1240+
},
12361241
],
12371242
},
12381243
];

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

+3
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,7 @@ Learn about how you can migrate your existing angular project to the latest feat
2727
<docs-card title="Cleanup unused imports" link="Try it now" href="reference/migrations/cleanup-unused-imports">
2828
Clean up unused imports in your project.
2929
</docs-card>
30+
<docs-card title="Self-closing tags" link="Migrate now" href="reference/migrations/self-closing-tags">
31+
Convert component templates to use self-closing tags where possible.
32+
</docs-card>
3033
</docs-card-container>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Migration to self-closing tags
2+
3+
Self-closing tags are supported in Angular templates since [v16](https://blog.angular.dev/angular-v16-is-here-4d7a28ec680d#7065). .
4+
5+
This schematic migrates the templates in your application to use self-closing tags.
6+
7+
Run the schematic using the following command:
8+
9+
<docs-code language="shell">
10+
11+
ng generate @angular/core:self-closing-tag
12+
13+
</docs-code>
14+
15+
16+
#### Before
17+
18+
<docs-code language="angular-html">
19+
20+
<!-- Before -->
21+
<hello-world></hello-world>
22+
23+
<!-- After -->
24+
<hello-world />
25+
26+
</docs-code>

‎packages/core/schematics/BUILD.bazel

+3
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ pkg_npm(
1818
"//packages/core/schematics/ng-generate/inject-migration:static_files",
1919
"//packages/core/schematics/ng-generate/output-migration:static_files",
2020
"//packages/core/schematics/ng-generate/route-lazy-loading:static_files",
21+
"//packages/core/schematics/ng-generate/self-closing-tags-migration:static_files",
2122
"//packages/core/schematics/ng-generate/signal-input-migration:static_files",
2223
"//packages/core/schematics/ng-generate/signal-queries-migration:static_files",
2324
"//packages/core/schematics/ng-generate/signals:static_files",
@@ -43,6 +44,7 @@ rollup_bundle(
4344
"//packages/core/schematics/ng-generate/signal-input-migration:index.ts": "signal-input-migration",
4445
"//packages/core/schematics/ng-generate/signal-queries-migration:index.ts": "signal-queries-migration",
4546
"//packages/core/schematics/ng-generate/output-migration:index.ts": "output-migration",
47+
"//packages/core/schematics/ng-generate/self-closing-tags-migration:index.ts": "self-closing-tags-migration",
4648
"//packages/core/schematics/migrations/explicit-standalone-flag:index.ts": "explicit-standalone-flag",
4749
"//packages/core/schematics/migrations/pending-tasks:index.ts": "pending-tasks",
4850
"//packages/core/schematics/migrations/provide-initializer:index.ts": "provide-initializer",
@@ -63,6 +65,7 @@ rollup_bundle(
6365
"//packages/core/schematics/ng-generate/inject-migration",
6466
"//packages/core/schematics/ng-generate/output-migration",
6567
"//packages/core/schematics/ng-generate/route-lazy-loading",
68+
"//packages/core/schematics/ng-generate/self-closing-tags-migration",
6669
"//packages/core/schematics/ng-generate/signal-input-migration",
6770
"//packages/core/schematics/ng-generate/signal-queries-migration",
6871
"//packages/core/schematics/ng-generate/signals",

‎packages/core/schematics/collection.json

+6
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,12 @@
5151
"description": "Removes unused imports from standalone components.",
5252
"factory": "./bundles/cleanup-unused-imports#migrate",
5353
"schema": "./ng-generate/cleanup-unused-imports/schema.json"
54+
},
55+
"self-closing-tags-migration": {
56+
"description": "Updates the components templates to use self-closing tags where possible",
57+
"factory": "./bundles/self-closing-tags-migration#migrate",
58+
"schema": "./ng-generate/self-closing-tags-migration/schema.json",
59+
"aliases": ["self-closing-tag"]
5460
}
5561
}
5662
}

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

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
*/
88

99
import ts from 'typescript';
10-
import assert from 'assert';
1110
import {
1211
confirmAsSerializable,
1312
MigrationStats,
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
load("//tools:defaults.bzl", "jasmine_node_test", "ts_library")
2+
3+
ts_library(
4+
name = "migration",
5+
srcs = glob(
6+
["**/*.ts"],
7+
exclude = ["*.spec.ts"],
8+
),
9+
visibility = [
10+
"//packages/core/schematics/ng-generate/self-closing-tags-migration:__pkg__",
11+
"//packages/language-service/src/refactorings:__pkg__",
12+
],
13+
deps = [
14+
"//packages/compiler",
15+
"//packages/compiler-cli",
16+
"//packages/compiler-cli/private",
17+
"//packages/compiler-cli/src/ngtsc/annotations",
18+
"//packages/compiler-cli/src/ngtsc/annotations/directive",
19+
"//packages/compiler-cli/src/ngtsc/file_system",
20+
"//packages/compiler-cli/src/ngtsc/imports",
21+
"//packages/compiler-cli/src/ngtsc/metadata",
22+
"//packages/compiler-cli/src/ngtsc/reflection",
23+
"//packages/core/schematics/utils",
24+
"//packages/core/schematics/utils/tsurge",
25+
"@npm//@types/node",
26+
"@npm//typescript",
27+
],
28+
)
29+
30+
ts_library(
31+
name = "test_lib",
32+
testonly = True,
33+
srcs = glob(
34+
["**/*.spec.ts"],
35+
),
36+
deps = [
37+
":migration",
38+
"//packages/compiler-cli",
39+
"//packages/compiler-cli/src/ngtsc/file_system/testing",
40+
"//packages/core/schematics/utils/tsurge",
41+
],
42+
)
43+
44+
jasmine_node_test(
45+
name = "test",
46+
srcs = [":test_lib"],
47+
env = {"FORCE_COLOR": "3"},
48+
)

0 commit comments

Comments
 (0)
Please sign in to comment.