angular / angular/angular-cli

New build system application missing i18n strings from templates

Đang mở
#31,227 4 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: @angular/build devkit/build-angular:i18n freq1: low severity5: regression type: bug/fix
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
14 giờ 23 phút
Pull request đã merge (30 ngày)
162

Mô tả

### Which @angular/* package(s) are the source of the bug?

compiler-cli

### Is this a regression?

No

### Description

I have opted in to the new build system, this is my angular.json after the upgrade:

```json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-lib": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": {
"base": "dist/my-lib"
},
"i18nMissingTranslation": "ignore",
"deleteOutputPath": true,
"index": "src/index.html",
"polyfills": [
"@angular/localize/init",
"src/polyfills.ts"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [
"./node_modules/quill/dist/quill.min.js"
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules",
"src/app"
]
},
"allowedCommonJsDependencies": [
"@uppy/core",
"@uppy/tus",
"url-parse",
"lodash",
"namespace-emitter",
"classnames",
"is-shallow-equal",
"cropperjs",
"quill",
"ts-deepmerge"
],
"browser": "src/main.ts"
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"aot": false,
"optimization": false,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "development"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "my-lib:build:production"
},
"development": {
"buildTarget": "my-lib:build:development"
}
},
"defaultConfiguration": "development",
"options": {
"sslCert": "./node_modules/browser-sync/certs/server.crt",
"sslKey": "./node_modules/browser-sync/certs/server.key",
"ssl": true,
"liveReload": false
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "my-lib:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test/test.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"styles": [
"src/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules",
"src/app"
]
}
}
}
}
}
},
"cli": {
"analytics": false
}
}
```

The project is serving and building but when I try to extract the translation strings with:
```
ng extract-i18n --format=json
```
At the end I get:
```
Extraction Complete. (Messages: 713)
```
In fact with my previous setup:
```json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-lib": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/my-lib",
"i18nMissingTranslation": "ignore",
"deleteOutputPath": true,
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [
"./node_modules/quill/dist/quill.min.js"
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules",
"src/app"
]
},
"allowedCommonJsDependencies": [
"@uppy/core",
"@uppy/tus",
"url-parse",
"lodash",
"namespace-emitter",
"classnames",
"is-shallow-equal",
"cropperjs",
"quill",
"ts-deepmerge"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"aot": false,
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "development"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "my-lib:build:production"
},
"development": {
"buildTarget": "my-lib:build:development"
}
},
"defaultConfiguration": "development",
"options": {
"sslCert": "./node_modules/browser-sync/certs/server.crt",
"sslKey": "./node_modules/browser-sync/certs/server.key",
"ssl": true,
"liveReload": false
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "my-lib:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test/test.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"styles": [
"src/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules",
"src/app"
]
}
}
}
}
}
},
"cli": {
"analytics": false
}
}
```
The same i18n extraction command gets me:
```
Extraction Complete. (Messages: 1602)
```

I notices that with the application builder translations are missing from the component html templates, while $localization used inside TS files are recognized.

### Please provide a link to a minimal reproduction of the bug

_No response_

### Please provide the exception or error you saw

```true

```

### Please provide the environment you discovered this bug in (run `ng version`)

```true
Angular CLI: 20.3.1
Node: 20.19.5
```

### Anything else?

_No response_

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu bằng cách tái hiện vấn đề với cấu hình application-builder trong angular.json và chạy ng extract-i18n --format=json. So sánh kết quả với cấu hình browser-builder, kiểm tra rằng các thông báo $localization trong TypeScript được trích xuất, trong khi các thông báo từ các template HTML của component bị thiếu; hoàn tất có nghĩa là các thông báo trong template được đưa vào kết quả trích xuất.

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

Đánh giá

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

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.