New build system application missing i18n strings from templates
- 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
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