Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#34,447 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@MeAkib đang làm issue này rồi.

Từ ngày 20/10/2026.

  • #34448 của @MeAkib — đang mở

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
25/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
angular, typescript
Lĩnh vực
backend, cli

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
1 ngày 6 giờ
Pull request đã merge (30 ngày)
216

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của angular/angular-cli

Tất cả issue của angular/angular-cli

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.