refactor(@angular-devkit/schematics): add consistent spacing and ordering

russelporosky · russelporosky · commit 45d959a4ea2d · 2026-05-24T09:01:27.000-06:00
* add consistent spacing and tags around `&lt;%`, `%&gt;, and operators
* reorder component decorator properties to be alphabetical
* remove empty constructors
* change spacing to ensure all outputs are consistently styled
diff --git a/packages/schematics/angular/application/files/module-files/src/app/app__suffix__.spec.ts.template b/packages/schematics/angular/application/files/module-files/src/app/app__suffix__.spec.ts.template
@@ -11,7 +11,8 @@ describe('App', () => {
       declarations: [
         App
       ],
-    }).compileComponents();
+    })
+      .compileComponents();
   });
 
   it('should create the app', () => {
@@ -20,7 +21,7 @@ describe('App', () => {
     expect(app).toBeTruthy();
   });
 
-  it('should render title', <% if(zoneless) { %>async <% } %>() => {
+  it('should render title', <% if (zoneless) { %>async <% } %>() => {
     const fixture = TestBed.createComponent(App);
     <%= zoneless ? 'await fixture.whenStable();' : 'fixture.detectChanges();' %>
     const compiled = fixture.nativeElement as HTMLElement;
diff --git a/packages/schematics/angular/application/files/module-files/src/app/app__suffix__.ts.template b/packages/schematics/angular/application/files/module-files/src/app/app__suffix__.ts.template
@@ -1,7 +1,10 @@
 import { Component, signal } from '@angular/core';
 
 @Component({
-  selector: '<%= selector %>',<% if(inlineTemplate) { %>
+  selector: '<%= selector %>',
+  standalone: false,<% if (inlineStyle) { %>
+  styles: []<% } else { %>
+  styleUrl: './app<%= suffix %>.<%= style %>'<% } %><% if (inlineTemplate) { %>
   template: `
     <h1>Hello, {{ title() }}</h1>
     <p>Congratulations! Your app is running. 🎉</p>
@@ -11,9 +14,6 @@ import { Component, signal } from '@angular/core';
     } %>
   `,<% } else { %>
   templateUrl: './app<%= suffix %>.html',<% } %>
-  standalone: false,<% if(inlineStyle) { %>
-  styles: []<% } else { %>
-  styleUrl: './app<%= suffix %>.<%= style %>'<% } %>
 })
 export class App {
   protected readonly title = signal('<%= name %>');
diff --git a/packages/schematics/angular/application/files/module-files/src/app/app__typeSeparator__module.ts.template b/packages/schematics/angular/application/files/module-files/src/app/app__typeSeparator__module.ts.template
@@ -1,6 +1,5 @@
-import { NgModule, provideBrowserGlobalErrorListeners<% if(!zoneless) { %>, provideZoneChangeDetection<% } %> } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-<% if (routing) { %>
+import { NgModule, provideBrowserGlobalErrorListeners<% if (!zoneless) { %>, provideZoneChangeDetection<% } %> } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';<% if (routing) { %>
 import { AppRoutingModule } from './app-routing<%= typeSeparator %>module';<% } %>
 import { App } from './app<%= suffix %>';
 
@@ -13,7 +12,7 @@ import { App } from './app<%= suffix %>';
     AppRoutingModule<% } %>
   ],
   providers: [
-    provideBrowserGlobalErrorListeners(),<% if(!zoneless) { %>
+    provideBrowserGlobalErrorListeners(),<% if (!zoneless) { %>
     provideZoneChangeDetection({ eventCoalescing: true }),<% } %>
   ],
   bootstrap: [App]
diff --git a/packages/schematics/angular/application/files/module-files/src/main.ts.template b/packages/schematics/angular/application/files/module-files/src/main.ts.template
@@ -1,8 +1,8 @@
-<% if(!!viewEncapsulation) { %>import { ViewEncapsulation } from '@angular/core';
-<% }%>import { platformBrowser } from '@angular/platform-browser';
+<% if (!!viewEncapsulation) { %>import { ViewEncapsulation } from '@angular/core';
+<% } %>import { platformBrowser } from '@angular/platform-browser';
 import { AppModule } from './app/app<%= typeSeparator %>module';
 
 platformBrowser().bootstrapModule(AppModule, {
-  <% if(!!viewEncapsulation) { %> defaultEncapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } %>
+  <% if (!!viewEncapsulation) { %> defaultEncapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } %>
 })
   .catch(err => console.error(err));
diff --git a/packages/schematics/angular/application/files/standalone-files/src/app/app.config.ts.template b/packages/schematics/angular/application/files/standalone-files/src/app/app.config.ts.template
@@ -1,12 +1,11 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners<% if(!zoneless) { %>, provideZoneChangeDetection<% } %> } from '@angular/core';<% if (routing) { %>
+import { ApplicationConfig, provideBrowserGlobalErrorListeners<% if (!zoneless) { %>, provideZoneChangeDetection<% } %> } from '@angular/core';<% if (routing) { %>
 import { provideRouter } from '@angular/router';
-
 import { routes } from './app.routes';<% } %>
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideBrowserGlobalErrorListeners(),<% if(!zoneless) { %>
+    provideBrowserGlobalErrorListeners(),<% if (!zoneless) { %>
     provideZoneChangeDetection({ eventCoalescing: true }),<% } %>
-    <% if (routing) {%>provideRouter(routes)<% } %>
+    <% if (routing) { %>provideRouter(routes)<% } %>
   ]
 };
diff --git a/packages/schematics/angular/application/files/standalone-files/src/app/app__suffix__.spec.ts.template b/packages/schematics/angular/application/files/standalone-files/src/app/app__suffix__.spec.ts.template
@@ -5,7 +5,8 @@ describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [App],
-    }).compileComponents();
+    })
+      .compileComponents();
   });
 
   it('should create the app', () => {
@@ -14,7 +15,7 @@ describe('App', () => {
     expect(app).toBeTruthy();
   });
 
-  it('should render title', <% if(zoneless) { %>async <% } %>() => {
+  it('should render title', <% if (zoneless) { %>async <% } %>() => {
     const fixture = TestBed.createComponent(App);
     <%= zoneless ? 'await fixture.whenStable();' : 'fixture.detectChanges();' %>
     const compiled = fixture.nativeElement as HTMLElement;
diff --git a/packages/schematics/angular/application/files/standalone-files/src/app/app__suffix__.ts.template b/packages/schematics/angular/application/files/standalone-files/src/app/app__suffix__.ts.template
@@ -1,19 +1,19 @@
-import { Component, signal } from '@angular/core';<% if(routing) { %>
+import { Component, signal } from '@angular/core';<% if (routing) { %>
 import { RouterOutlet } from '@angular/router';<% } %>
 
 @Component({
-  selector: '<%= selector %>',
-  imports: [<% if(routing) { %>RouterOutlet<% } %>],<% if(inlineTemplate) { %>
+  imports: [<% if (routing) { %>RouterOutlet<% } %>],
+  selector: '<%= selector %>',<% if (inlineStyle) { %>
+  styles: [],<% } else { %>
+  styleUrl: './app<%= suffix %>.<%= style %>',<% } %><% if (inlineTemplate) { %>
   template: `
     <h1>Hello, {{ title() }}</h1>
 
     <% if (routing) {
      %><router-outlet /><%
     } %>
   `,<% } else { %>
-  templateUrl: './app<%= suffix %>.html',<% } if(inlineStyle) { %>
-  styles: [],<% } else { %>
-  styleUrl: './app<%= suffix %>.<%= style %>'<% } %>
+  templateUrl: './app<%= suffix %>.html',<% } %>
 })
 export class App {
   protected readonly title = signal('<%= name %>');
diff --git a/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.__style__.template b/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.__style__.template
@@ -1,4 +1,4 @@
-<% if(displayBlock){ if(style != 'sass') { %>:host {
+<% if (displayBlock) { if (style != 'sass') { %>:host {
   display: block;
 }
 <% } else { %>\:host
diff --git a/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.spec.ts.template b/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.spec.ts.template
@@ -1,6 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import <% if(!exportDefault) { %>{ <% }%><%= classifiedName %> <% if(!exportDefault) {%>} <% }%>from './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>';
+import <% if (!exportDefault) { %>{ <% } %><%= classifiedName %> <% if (!exportDefault) { %>} <% } %>from './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>';
 
 describe('<%= classifiedName %>', () => {
   let component: <%= classifiedName %>;
@@ -10,7 +9,7 @@ describe('<%= classifiedName %>', () => {
     await TestBed.configureTestingModule({
       <%= standalone ? 'imports' : 'declarations' %>: [<%= classifiedName %>]
     })
-    .compileComponents();
+      .compileComponents();
 
     fixture = TestBed.createComponent(<%= classifiedName %>);
     component = fixture.componentInstance;
diff --git a/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template b/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template
@@ -1,24 +1,23 @@
-import { <% if(changeDetection !== 'OnPush') { %>ChangeDetectionStrategy, <% }%>Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%> } from '@angular/core';
+import { <% if (changeDetection !== 'OnPush') { %>ChangeDetectionStrategy, <% } %>Component<% if (!!viewEncapsulation) { %>, ViewEncapsulation<% } %> } from '@angular/core';
 
-@Component({<% if(!skipSelector) {%>
-  selector: '<%= selector %>',<%}%><% if(standalone) {%>
-  imports: [],<%} else { %>
-  standalone: false,<% }%><% if(inlineTemplate) { %>
+@Component({<% if (changeDetection !== 'OnPush') { %>
+  changeDetection: ChangeDetectionStrategy.<%= changeDetection %>,<% } %><% if (!!viewEncapsulation) { %>
+  encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } %><% if (standalone) { %>
+  imports: [],<% } %><% if (!skipSelector) { %>
+  selector: '<%= selector %>',<% } %><% if (!standalone) { %>
+  standalone: false,<% } %><% if (inlineStyle) { %>
+  styles: `<% if (displayBlock) { %>
+    :host {
+      display: block;
+    }
+  <% } %>`,<% } else if (style !== 'none') { %>
+  styleUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.<%= style %>',<% } %><% if (inlineTemplate) { %>
   template: `
     <p>
       <%= dasherize(name) %> works!
     </p>
   `,<% } else { %>
-  templateUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %><%= ngext %>.html',<% } if(inlineStyle) { %>
-  styles: `<% if(displayBlock){ %>
-    :host {
-      display: block;
-    }
-  <% } %>`,<% } else if (style !== 'none') { %>
-  styleUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.<%= style %>',<% } %><% if(!!viewEncapsulation) { %>
-  encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } if (changeDetection !== 'OnPush') { %>
-  changeDetection: ChangeDetectionStrategy.<%= changeDetection %>,<% } %>
+  templateUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %><%= ngext %>.html',<% } %>
 })
-export <% if(exportDefault) {%>default <%}%>class <%= classifiedName %> {
-
+export <% if (exportDefault) { %>default <% } %>class <%= classifiedName %> {
 }
diff --git a/packages/schematics/angular/directive/files/__name@dasherize__.__type@dasherize__.ts.template b/packages/schematics/angular/directive/files/__name@dasherize__.__type@dasherize__.ts.template
@@ -1,8 +1,8 @@
 import { Directive } from '@angular/core';
 
 @Directive({
-  selector: '[<%= selector %>]',<% if(!standalone) {%>
-  standalone: false,<%}%>
+  selector: '[<%= selector %>]',<% if (!standalone) { %>
+  standalone: false,<% } %>
 })
 export class <%= classifiedName %> {
 }
diff --git a/packages/schematics/angular/guard/implements-files/__name@dasherize____typeSeparator__guard.spec.ts.template b/packages/schematics/angular/guard/implements-files/__name@dasherize____typeSeparator__guard.spec.ts.template
@@ -1,5 +1,4 @@
 import { TestBed } from '@angular/core/testing';
-
 import { <%= classify(name) %>Guard } from './<%= dasherize(name) %><%= typeSeparator %>guard';
 
 describe('<%= classify(name) %>Guard', () => {
diff --git a/packages/schematics/angular/guard/type-files/__name@dasherize____typeSeparator__guard.spec.ts.template b/packages/schematics/angular/guard/type-files/__name@dasherize____typeSeparator__guard.spec.ts.template
@@ -1,6 +1,5 @@
 import { TestBed } from '@angular/core/testing';
 import { <%= guardType %> } from '@angular/router';
-
 import { <%= camelize(name) %>Guard } from './<%= dasherize(name) %><%= typeSeparator %>guard';
 
 describe('<%= camelize(name) %>Guard', () => {
diff --git a/packages/schematics/angular/interceptor/class-files/__name@dasherize____typeSeparator__interceptor.spec.ts.template b/packages/schematics/angular/interceptor/class-files/__name@dasherize____typeSeparator__interceptor.spec.ts.template
@@ -1,5 +1,4 @@
 import { TestBed } from '@angular/core/testing';
-
 import { <%= classify(name) %>Interceptor } from './<%= dasherize(name) %><%= typeSeparator %>interceptor';
 
 describe('<%= classify(name) %>Interceptor', () => {
diff --git a/packages/schematics/angular/interceptor/class-files/__name@dasherize____typeSeparator__interceptor.ts.template b/packages/schematics/angular/interceptor/class-files/__name@dasherize____typeSeparator__interceptor.ts.template
@@ -9,9 +9,6 @@ import { Observable } from 'rxjs';
 
 @Injectable()
 export class <%= classify(name) %>Interceptor implements HttpInterceptor {
-
-  constructor() {}
-
   intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
     return next.handle(request);
   }
diff --git a/packages/schematics/angular/interceptor/functional-files/__name@dasherize____typeSeparator__interceptor.spec.ts.template b/packages/schematics/angular/interceptor/functional-files/__name@dasherize____typeSeparator__interceptor.spec.ts.template
@@ -1,6 +1,5 @@
 import { TestBed } from '@angular/core/testing';
 import { HttpInterceptorFn } from '@angular/common/http';
-
 import { <%= camelize(name) %>Interceptor } from './<%= dasherize(name) %><%= typeSeparator %>interceptor';
 
 describe('<%= camelize(name) %>Interceptor', () => {
diff --git a/packages/schematics/angular/pipe/files/__name@dasherize____typeSeparator__pipe.ts.template b/packages/schematics/angular/pipe/files/__name@dasherize____typeSeparator__pipe.ts.template
@@ -1,13 +1,11 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-  name: '<%= camelize(name) %>',<% if(!standalone) {%>
-  standalone: false,<%}%>
+  name: '<%= camelize(name) %>',<% if (!standalone) { %>
+  standalone: false,<% } %>
 })
 export class <%= classify(name) %>Pipe implements PipeTransform {
-
   transform(value: unknown, ...args: unknown[]): unknown {
     return null;
   }
-
 }
diff --git a/packages/schematics/angular/resolver/class-files/__name@dasherize____typeSeparator__resolver.spec.ts.template b/packages/schematics/angular/resolver/class-files/__name@dasherize____typeSeparator__resolver.spec.ts.template
@@ -1,5 +1,4 @@
 import { TestBed } from '@angular/core/testing';
-
 import { <%= classify(name) %>Resolver } from './<%= dasherize(name) %><%= typeSeparator %>resolver';
 
 describe('<%= classify(name) %>Resolver', () => {
diff --git a/packages/schematics/angular/resolver/functional-files/__name@dasherize____typeSeparator__resolver.spec.ts.template b/packages/schematics/angular/resolver/functional-files/__name@dasherize____typeSeparator__resolver.spec.ts.template
@@ -1,6 +1,5 @@
 import { TestBed } from '@angular/core/testing';
 import { ResolveFn } from '@angular/router';
-
 import { <%= camelize(name) %>Resolver } from './<%= dasherize(name) %><%= typeSeparator %>resolver';
 
 describe('<%= camelize(name) %>Resolver', () => {
diff --git a/packages/schematics/angular/server/files/server-builder/ngmodule-src/app/app.module.server.ts.template b/packages/schematics/angular/server/files/server-builder/ngmodule-src/app/app.module.server.ts.template
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
-
 import { <%= appModuleName %> } from '<%= appModulePath %>';
 import { <%= appComponentName %> } from '<%= appComponentPath %>';
 
diff --git a/packages/schematics/angular/service/files/__name@dasherize__.__type@dasherize__.spec.ts.template b/packages/schematics/angular/service/files/__name@dasherize__.__type@dasherize__.spec.ts.template
@@ -1,5 +1,4 @@
 import { TestBed } from '@angular/core/testing';
-
 import { <%= classifiedName %> } from './<%= dasherize(name) %><%= type ? '.' + dasherize(type) : '' %>';
 
 describe('<%= classifiedName %>', () => {
diff --git a/packages/schematics/angular/service/files/__name@dasherize__.__type@dasherize__.ts.template b/packages/schematics/angular/service/files/__name@dasherize__.__type@dasherize__.ts.template
@@ -4,5 +4,4 @@ import { <%= injectable ? 'Injectable' : 'Service' %> } from '@angular/core';
   providedIn: 'root',
 })<% } else { %>@Service()<% } %>
 export class <%= classifiedName %> {
-  
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<% if(displayBlock){ if(style != 'sass') { %>:host {`
	`1`	`+<% if (displayBlock) { if (style != 'sass') { %>:host {`
`2`	`2`	`display: block;`
`3`	`3`	`}`
`4`	`4`	`<% } else { %>\:host`