Angular Component doesn't generate as Component

Question

Picture of the command here

I'm having a problem where my Angular component isn't being generated as a component. Instead of "home.component.ts/html/css" only "home.ts/html/css" is being generated. I'm using version 20. I've tried reinstalling Angular several times or changing the schematic in angular.json, but nothing has helped.

My Version:

ng version
@angular-devkit/architect    0.2000.3 (cli-only)
@angular-devkit/core         20.0.3 (cli-only)
@angular-devkit/schematics   20.0.3 (cli-only)
@schematics/angular          20.0.3 (cli-only)

Schematic:

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": false,
    "inlineTemplate": false,
    "skipTests": false
  }

Answer 1

This is by design as the new Angular style conventions for version 20. No more will components, services, have the NAME-DOT-TYPE.EXTENSION convention. You can read about the new component naming conventions here: Still Using *.component.ts? Angular 20 Just Changed the Rules.

So for now on you can expect the following behavior:

• ng g c Home = home.ts
• ng g s SomeStore = some-store.ts
• ng g p Formatting = foramatting-pipe.ts

Notice how the pipe still has it's type appended, but with a dash separator instead of a dot. This will be the case for certain schematics.

If you want to enable the old naming conventions, then just alter your schematics in angular.json with the following:

  "schematics": {
    "@schematics/angular:component": { "type": "component" },
    "@schematics/angular:directive": { "type": "directive" },
    "@schematics/angular:service": { "type": "service" },
    "@schematics/angular:guard": { "typeSeparator": "." },
    "@schematics/angular:interceptor": { "typeSeparator": "." },
    "@schematics/angular:module": { "typeSeparator": "." },
    "@schematics/angular:pipe": { "typeSeparator": "." },
    "@schematics/angular:resolver": { "typeSeparator": "." }
  }