Skip to content

Angular CLI v20 generates incorrect component metadata (missing standalone, wrong styleUrls, class name) #30661

Closed as not planned
@clamquarter

Description

@clamquarter

Command

new

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When generating a component using ng generate component <component_name> in Angular CLI v20, the output is structurally incorrect:

  • standalone: true is missing

  • styleUrl is used instead of styleUrls (invalid key)

  • The class name omits the Component suffix

Actual Output (src/app/test/test.ts)

@Component({
  selector: 'app-test',
  imports: [],
  templateUrl: './test.html',
  styleUrl: './test.css'
})
export class Test {}

Expected Output

@Component({
  selector: 'app-test',
  standalone: true,
  imports: [],
  templateUrl: './test.html',
  styleUrls: ['./test.css']
})
export class TestComponent {}

Notes

  • This behavior is consistent across multiple fresh projects
  • It occurs even after resetting the environment using nvm and a fresh Angular CLI install.
  • It prevents components from compiling correctly in a default Angular 20 standalone setup.

Minimal Reproduction

  1. ng new angular-cli-test --defaults
  2. cd angular-cli-test
  3. ng generate component test

Exception or Error


Your Environment

Angular CLI: 20.0.5
Angular: 20.0.5
Node: 20.19.3 (via nvm)
npm: 10.8.2
OS: macOS (arm64)

Anything else relevant?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions