Skip to content

Commit a3c54e8

Browse files
JackWBakerJackWBaker
authored
cleanup(angular): remove CommonModule from component generators (#32215)
## Current Behavior When generating a new Angular component it imports `CommonModule` by default. ## Expected Behavior The `CommonModule` is not needed as often in modern angular because of the new control flow syntax and the move away from `[ngClass]` and `[ngStyle]` in favour of `[class]` and `[style]`. It is also not included by the official angular component generator.
1 parent 6e02724 commit a3c54e8

File tree

12 files changed

+43
-50
lines changed

12 files changed

+43
-50
lines changed

‎packages/angular/src/generators/component/__snapshots__/component.spec.ts.snap‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ exports[`component Generator secondary entry points should create the component
1919
@Component({
2020
selector: 'example',
2121
standalone: false,
22+
imports: [],
2223
templateUrl: './example.html',
2324
styleUrl: './example.css'
2425
})
@@ -37,6 +38,7 @@ exports[`component Generator should create component files correctly: component
3738
@Component({
3839
selector: 'example',
3940
standalone: false,
41+
imports: [],
4042
templateUrl: './example.html',
4143
styleUrl: './example.css',
4244
})
@@ -87,6 +89,7 @@ exports[`component Generator should create the component correctly and export it
8789
@Component({
8890
selector: 'example',
8991
standalone: false,
92+
imports: [],
9093
templateUrl: './example.html',
9194
styleUrl: './example.css'
9295
})
@@ -101,11 +104,10 @@ export * from './lib/example/example';"
101104
102105
exports[`component Generator should create the component correctly and export it in the entry point when is standalone and "export=true" 1`] = `
103106
"import { Component } from '@angular/core';
104-
import { CommonModule } from '@angular/common';
105107
106108
@Component({
107109
selector: 'example',
108-
imports: [CommonModule],
110+
imports: [],
109111
templateUrl: './example.html',
110112
styleUrl: './example.css'
111113
})
@@ -119,6 +121,7 @@ exports[`component Generator should create the component correctly and not expor
119121
@Component({
120122
selector: 'example',
121123
standalone: false,
124+
imports: [],
122125
templateUrl: './example.html',
123126
styleUrl: './example.css'
124127
})
@@ -128,11 +131,10 @@ export class Example {}
128131
129132
exports[`component Generator should create the component correctly and not export it in the entry point when is standalone and "export=false" 1`] = `
130133
"import { Component } from '@angular/core';
131-
import { CommonModule } from '@angular/common';
132134
133135
@Component({
134136
selector: 'example',
135-
imports: [CommonModule],
137+
imports: [],
136138
templateUrl: './example.html',
137139
styleUrl: './example.css'
138140
})
@@ -146,6 +148,7 @@ exports[`component Generator should create the component correctly and not expor
146148
@Component({
147149
selector: 'example',
148150
standalone: false,
151+
imports: [],
149152
templateUrl: './example.html',
150153
styleUrl: './example.css'
151154
})
@@ -159,6 +162,7 @@ exports[`component Generator should create the component correctly but not expor
159162
@Component({
160163
selector: 'example',
161164
standalone: false,
165+
imports: [],
162166
templateUrl: './example.html',
163167
styleUrl: './example.css'
164168
})
@@ -168,11 +172,10 @@ export class Example {}
168172
169173
exports[`component Generator should handle path with file extension: component 1`] = `
170174
"import { Component } from '@angular/core';
171-
import { CommonModule } from '@angular/common';
172175
173176
@Component({
174177
selector: 'example.component',
175-
imports: [CommonModule],
178+
imports: [],
176179
templateUrl: './example.component.html',
177180
styleUrl: './example.component.css',
178181
})
@@ -220,6 +223,7 @@ exports[`component Generator should inline styles when --inline-style=true 1`] =
220223
@Component({
221224
selector: 'example',
222225
standalone: false,
226+
imports: [],
223227
templateUrl: './example.html',
224228
styles: \`\`
225229
})
@@ -233,6 +237,7 @@ exports[`component Generator should inline template when --inline-template=true
233237
@Component({
234238
selector: 'example',
235239
standalone: false,
240+
imports: [],
236241
template: \`<p>example works!</p>\`,
237242
styleUrl: './example.css'
238243
})

‎packages/angular/src/generators/component/component.spec.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,10 @@ describe('component Generator', () => {
7272
expect(tree.read('libs/lib1/src/lib/example/example.component.ts', 'utf-8'))
7373
.toMatchInlineSnapshot(`
7474
"import { Component } from '@angular/core';
75-
import { CommonModule } from '@angular/common';
7675
7776
@Component({
7877
selector: 'example',
79-
imports: [CommonModule],
78+
imports: [],
8079
templateUrl: './example.component.html',
8180
styleUrl: './example.component.css',
8281
})
@@ -143,11 +142,10 @@ describe('component Generator', () => {
143142
expect(tree.read('libs/lib1/src/lib/example/example.ts', 'utf-8'))
144143
.toMatchInlineSnapshot(`
145144
"import { Component } from '@angular/core';
146-
import { CommonModule } from '@angular/common';
147145
148146
@Component({
149147
selector: 'example',
150-
imports: [CommonModule],
148+
imports: [],
151149
templateUrl: './example.ng.html',
152150
styleUrl: './example.css',
153151
})
@@ -352,6 +350,7 @@ describe('component Generator', () => {
352350
@Component({
353351
selector: 'example',
354352
standalone: false,
353+
imports: [],
355354
templateUrl: './example.html'
356355
})
357356
export class Example {}
@@ -1128,11 +1127,10 @@ export class LibModule {}
11281127
tree.read('libs/lib1/src/lib/example/example.component.ts', 'utf-8')
11291128
).toMatchInlineSnapshot(`
11301129
"import { Component } from '@angular/core';
1131-
import { CommonModule } from '@angular/common';
11321130
11331131
@Component({
11341132
selector: 'example',
1135-
imports: [CommonModule],
1133+
imports: [],
11361134
templateUrl: './example.component.html',
11371135
styleUrl: './example.component.css',
11381136
})

‎packages/angular/src/generators/component/files/__fileName__.ts__tpl__‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { <% if(changeDetection !== 'Default') { %>ChangeDetectionStrategy, <% }%>Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%> } from '@angular/core';<% if(standalone) {%>
2-
import { CommonModule } from '@angular/common';<% } %>
1+
import { <% if(changeDetection !== 'Default') { %>ChangeDetectionStrategy, <% }%>Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%> } from '@angular/core';
32

43
@Component({<% if(!skipSelector) {%>
54
selector: '<%= selector %>',<%}%><% if (setStandalone) { %>
6-
standalone: <%= standalone %>,<% } %><% if(standalone) { %>
7-
imports: [CommonModule],<%}%><% if(inlineTemplate) { %>
5+
standalone: <%= standalone %>,<% } %>
6+
imports: [],<% if(inlineTemplate) { %>
87
template: `<p><%= name %> works!</p>`<% } else { %>
98
templateUrl: './<%= fileName %><%= ngext %>.html'<% } if(inlineStyle) { %>,
109
styles: `<% if(displayBlock){ %>

‎packages/angular/src/generators/host/host.spec.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -585,11 +585,10 @@ describe('Host App Generator', () => {
585585
tree.read('remote1/src/app/remote-entry/entry.component.ts', 'utf-8')
586586
).toMatchInlineSnapshot(`
587587
"import { Component } from '@angular/core';
588-
import { CommonModule } from '@angular/common';
589588
import { NxWelcomeComponent } from './nx-welcome.component';
590589
591590
@Component({
592-
imports: [CommonModule, NxWelcomeComponent],
591+
imports: [NxWelcomeComponent],
593592
selector: 'app-remote1-entry',
594593
template: \`<app-nx-welcome></app-nx-welcome>\`
595594
})

‎packages/angular/src/generators/library/__snapshots__/library.spec.ts.snap‎

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@ exports[`lib --standalone should generate a library with a standalone component
44

55
exports[`lib --standalone should generate a library with a standalone component and have it flat 2`] = `
66
"import { Component } from '@angular/core';
7-
import { CommonModule } from '@angular/common';
87
98
@Component({
109
selector: 'lib-my-lib',
11-
imports: [CommonModule],
10+
imports: [],
1211
templateUrl: './my-lib.html',
1312
styleUrl: './my-lib.css'
1413
})
@@ -49,11 +48,10 @@ export * from './lib/my-lib';"
4948
5049
exports[`lib --standalone should generate a library with a standalone component and have it flat with routing setup 2`] = `
5150
"import { Component } from '@angular/core';
52-
import { CommonModule } from '@angular/common';
5351
5452
@Component({
5553
selector: 'lib-my-lib',
56-
imports: [CommonModule],
54+
imports: [],
5755
templateUrl: './my-lib.html',
5856
styleUrl: './my-lib.css'
5957
})
@@ -100,11 +98,10 @@ exports[`lib --standalone should generate a library with a standalone component
10098
10199
exports[`lib --standalone should generate a library with a standalone component as entry point 2`] = `
102100
"import { Component } from '@angular/core';
103-
import { CommonModule } from '@angular/common';
104101
105102
@Component({
106103
selector: 'lib-my-lib',
107-
imports: [CommonModule],
104+
imports: [],
108105
templateUrl: './my-lib.html',
109106
styleUrl: './my-lib.css'
110107
})
@@ -141,11 +138,10 @@ exports[`lib --standalone should generate a library with a standalone component
141138
142139
exports[`lib --standalone should generate a library with a standalone component as entry point and set up view encapsulation and change detection 2`] = `
143140
"import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
144-
import { CommonModule } from '@angular/common';
145141
146142
@Component({
147143
selector: 'lib-my-lib',
148-
imports: [CommonModule],
144+
imports: [],
149145
template: \`<p>MyLib works!</p>\`,
150146
styles: \`\`,
151147
encapsulation: ViewEncapsulation.ShadowDom,
@@ -159,11 +155,10 @@ exports[`lib --standalone should generate a library with a standalone component
159155
160156
exports[`lib --standalone should generate a library with a standalone component as entry point and skip tests 2`] = `
161157
"import { Component } from '@angular/core';
162-
import { CommonModule } from '@angular/common';
163158
164159
@Component({
165160
selector: 'lib-my-lib',
166-
imports: [CommonModule],
161+
imports: [],
167162
template: \`<p>MyLib works!</p>\`,
168163
styles: \`\`
169164
})
@@ -175,11 +170,10 @@ exports[`lib --standalone should generate a library with a standalone component
175170
176171
exports[`lib --standalone should generate a library with a standalone component as entry point following SFC pattern 2`] = `
177172
"import { Component } from '@angular/core';
178-
import { CommonModule } from '@angular/common';
179173
180174
@Component({
181175
selector: 'lib-my-lib',
182-
imports: [CommonModule],
176+
imports: [],
183177
template: \`<p>MyLib works!</p>\`,
184178
styles: \`\`
185179
})
@@ -230,11 +224,10 @@ export const myLibRoutes: Route[] = [
230224
231225
exports[`lib --standalone should generate a library with a standalone component as entry point with routing setup 3`] = `
232226
"import { Component } from '@angular/core';
233-
import { CommonModule } from '@angular/common';
234227
235228
@Component({
236229
selector: 'lib-my-lib',
237-
imports: [CommonModule],
230+
imports: [],
238231
templateUrl: './my-lib.html',
239232
styleUrl: './my-lib.css'
240233
})
@@ -343,11 +336,10 @@ exports[`lib --standalone should generate a library with a standalone component
343336
344337
exports[`lib --standalone should generate a library with a standalone component in a directory 2`] = `
345338
"import { Component } from '@angular/core';
346-
import { CommonModule } from '@angular/common';
347339
348340
@Component({
349341
selector: 'lib-my-lib',
350-
imports: [CommonModule],
342+
imports: [],
351343
templateUrl: './my-lib.html',
352344
styleUrl: './my-lib.css'
353345
})
@@ -384,11 +376,10 @@ exports[`lib --standalone should generate a library with a standalone component
384376
385377
exports[`lib --standalone should generate a library with a standalone component in a directory with a simple name 2`] = `
386378
"import { Component } from '@angular/core';
387-
import { CommonModule } from '@angular/common';
388379
389380
@Component({
390381
selector: 'lib-my-lib',
391-
imports: [CommonModule],
382+
imports: [],
392383
templateUrl: './my-lib.html',
393384
styleUrl: './my-lib.css'
394385
})
@@ -425,11 +416,10 @@ exports[`lib --standalone should generate a library with a valid selector for th
425416
426417
exports[`lib --standalone should generate a library with a valid selector for the standalone component when library name has a slash 2`] = `
427418
"import { Component } from '@angular/core';
428-
import { CommonModule } from '@angular/common';
429419
430420
@Component({
431421
selector: 'lib-auth-common',
432-
imports: [CommonModule],
422+
imports: [],
433423
templateUrl: './common.html',
434424
styleUrl: './common.css'
435425
})

‎packages/angular/src/generators/library/library.spec.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1521,11 +1521,10 @@ describe('lib', () => {
15211521
expect(tree.read('my-lib/src/lib/my-lib/my-lib.component.ts', 'utf-8'))
15221522
.toMatchInlineSnapshot(`
15231523
"import { Component } from '@angular/core';
1524-
import { CommonModule } from '@angular/common';
15251524
15261525
@Component({
15271526
selector: 'lib-my-lib',
1528-
imports: [CommonModule],
1527+
imports: [],
15291528
templateUrl: './my-lib.component.html',
15301529
styleUrl: './my-lib.component.css'
15311530
})
@@ -1933,11 +1932,10 @@ describe('lib', () => {
19331932
expect(tree.read('my-lib/src/lib/my-lib/my-lib.component.ts', 'utf-8'))
19341933
.toMatchInlineSnapshot(`
19351934
"import { Component } from '@angular/core';
1936-
import { CommonModule } from '@angular/common';
19371935
19381936
@Component({
19391937
selector: 'lib-my-lib',
1940-
imports: [CommonModule],
1938+
imports: [],
19411939
templateUrl: './my-lib.component.html',
19421940
styleUrl: './my-lib.component.css'
19431941
})

‎packages/angular/src/generators/remote/__snapshots__/remote.spec.ts.snap‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -563,11 +563,10 @@ module.exports = {
563563
564564
exports[`MF Remote App Generator should generate the a remote setup for standalone components 3`] = `
565565
"import { Component } from '@angular/core';
566-
import { CommonModule } from '@angular/common';
567566
import { NxWelcome } from './nx-welcome';
568567
569568
@Component({
570-
imports: [CommonModule, NxWelcome],
569+
imports: [NxWelcome],
571570
selector: 'app-test-entry',
572571
template: \`<app-nx-welcome></app-nx-welcome>\`,
573572
})
@@ -626,11 +625,10 @@ export default config;
626625
627626
exports[`MF Remote App Generator should generate the a remote setup for standalone components when --typescriptConfiguration=true 3`] = `
628627
"import { Component } from '@angular/core';
629-
import { CommonModule } from '@angular/common';
630628
import { NxWelcome } from './nx-welcome';
631629
632630
@Component({
633-
imports: [CommonModule, NxWelcome],
631+
imports: [NxWelcome],
634632
selector: 'app-test-entry',
635633
template: \`<app-nx-welcome></app-nx-welcome>\`
636634
})

‎packages/angular/src/generators/remote/remote.spec.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -542,11 +542,10 @@ describe('MF Remote App Generator', () => {
542542
expect(tree.read('test/src/app/remote-entry/entry.component.ts', 'utf-8'))
543543
.toMatchInlineSnapshot(`
544544
"import { Component } from '@angular/core';
545-
import { CommonModule } from '@angular/common';
546545
import { NxWelcomeComponent } from './nx-welcome.component';
547546
548547
@Component({
549-
imports: [CommonModule, NxWelcomeComponent],
548+
imports: [NxWelcomeComponent],
550549
selector: 'app-test-entry',
551550
template: \`<app-nx-welcome></app-nx-welcome>\`
552551
})

‎packages/angular/src/generators/scam-to-standalone/scam-to-standalone.spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ describe('scam-to-standalone', () => {
3939
imports: [CommonModule],
4040
selector: 'app-bar',
4141
standalone: false,
42+
imports: [],
4243
templateUrl: './bar.html',
4344
styleUrl: './bar.css',
4445
})

‎packages/angular/src/generators/scam/lib/convert-component-to-scam.spec.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ describe('convertComponentToScam', () => {
4848
@Component({
4949
selector: 'example',
5050
standalone: false,
51+
imports: [],
5152
templateUrl: './example.html',
5253
styleUrl: './example.css'
5354
})
@@ -161,6 +162,7 @@ describe('convertComponentToScam', () => {
161162
@Component({
162163
selector: 'example',
163164
standalone: false,
165+
imports: [],
164166
templateUrl: './example.random.html',
165167
styleUrl: './example.random.css'
166168
})

0 commit comments

Comments
 (0)