[Angular] Set up Angular to generate single file components (SFCs) by default

Tested with: Angular v19

Out of the box, the traditional Angular component structure separates out the template, styles, and component logic into separate files.

Instead, with single file components, you define everything in one file — the template, the styles, and the component logic. For example:

@Component({
  selector: 'app-username',
  template: `
    <p class="username">Hello {username}</p>
  `,
  styles: `
    .username { color: red; }
  `,
})
export class UsernameComponent {
  readonly username = input<string>('unknown');
}

To have Angular generate single file components by default, you need to update your Angular configuration.

      "schematics": {
        "@schematics/angular:component": {
          "inlineStyle": true,
          "inlineTemplate": true,
        }
      }

Now, when you generate a component using the Angular CLI, you’ll get a single file component by default.

ng generate component ui/username

This will generate two files:

The component (with template, styles and logic)
The spec/test