Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

`ng generate component/directive --module` declares a class that doesn't exist when `addTypeToClassName` is `false`

Ouverte
  • Quelque chose ne va pas ?
#34,447 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

@MeAkib y travaille déjà.

Depuis le 20/10/2026.

  • #34448 par @MeAkib — ouverte

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
25/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
À l'abandon
Stack technique
angular, typescript
Domaine
backend, cli

Piste de recherche

Start with packages/schematics/angular/utility/add-declaration-to-ng-module.ts and compare how the component and directive schematics compute class names in their index.ts files. Reproduce with the ng generate component widget --module app command and ng build; done means the NgModule declaration and export names match the generated class when addTypeToClassName is false. A linked pull request is already open.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

area: @schematics/angular
Command

generate

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

The addTypeToClassName option was added in 21.0.0, and the declaration code was not updated, so it never worked.

Description

When a component or directive is generated into an NgModule with addTypeToClassName: false and a type set, the
generated class and the symbol added to the NgModule don't match:

  • The component/directive class is named without the type (e.g. Widget), as configured.
  • The NgModule declarations (and exports with --export) import the name with the type
    (e.g. WidgetComponent), so the build fails.

This is the configuration that ng new --no-standalone --file-name-style-guide=2016 writes to angular.json:

"@schematics/angular:component": { "type": "component", "addTypeToClassName": false },
"@schematics/angular:directive": { "type": "directive", "addTypeToClassName": false }

The component and directive schematics compute the class name with addTypeToClassName
(packages/schematics/angular/component/index.ts, packages/schematics/angular/directive/index.ts), but the shared
addDeclarationToNgModule helper always appends the type:

// packages/schematics/angular/utility/add-declaration-to-ng-module.ts
const classifiedName =
  strings.classify(options.name) + (options.type ? strings.classify(options.type) : '');
Minimal Reproduction
ng new ws --no-standalone --file-name-style-guide=2016 --defaults
cd ws
ng generate component widget --module app
ng build

Generated src/app/widget/widget.component.ts:

export class Widget {}

Updated src/app/app.module.ts:

import { WidgetComponent } from './widget/widget.component';

@NgModule({
  declarations: [App, WidgetComponent],

The same happens for ng generate directive ... --module.

Exception or Error
✘ [ERROR] TS2305: Module '"./widget/widget.component"' has no exported member 'WidgetComponent'. [plugin angular-compiler]
✘ [ERROR] NG1010: Value at position 1 in the NgModule.declarations of AppModule is not a reference
Your Environment
Angular CLI       : 22.2.3
Node.js           : 24.15.0
Package Manager   : npm 11.12.1
Operating System  : darwin arm64
@schematics/angular : 22.2.3
Anything else relevant?
  • Introduced together with addTypeToClassName in e417c89f9e (#31053, v21.0.0). The same code is on 21.2.x and 22.2.x.
  • Suggested fix: let addDeclarationToNgModule use the class name computed by the calling schematic (or honour
    addTypeToClassName), so the declaration matches the generated class. Happy to send a PR with specs for the
    component and directive schematics.
Langage dominant
TypeScript
Étoiles
27k
Forks
11.8k
Merge moyen
1 j 6 h
PR mergées (30 j)
216

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de angular/angular-cli

Toutes les issues de angular/angular-cli

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.