angular / angular/angular-cli

New build system application missing i18n strings from templates

オープン
#31,227 コメント 4 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: @angular/build devkit/build-angular:i18n freq1: low severity5: regression type: bug/fix
主要言語
TypeScript
スター
27k
フォーク
11.8k
平均マージ
14時間 23分
マージ済み PR(30日)
162

説明

### 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_

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず angular.json の application-builder 設定で問題を再現し、ng extract-i18n --format=json を実行します。結果を browser-builder 設定と比較し、TypeScript 内の $localization メッセージは抽出される一方で、コンポーネントの HTML テンプレート内のメッセージが欠落していることを確認します。テンプレートのメッセージが抽出に含まれれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
build-system, cli, internationalization
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。