angular / angular/angular-cli

New build system application missing i18n strings from templates

Aperta
#31,227 4 commenti 0 reazioni 0 assegnatari Vedi su GitHub
area: @angular/build devkit/build-angular:i18n freq1: low severity5: regression type: bug/fix
Lingua principale
TypeScript
Stelle
27k
Fork
11.8k
Merge medio
14h 23m
PR unite (30g)
162

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia riproducendo il problema con la configurazione application-builder in angular.json ed esegui ng extract-i18n --format=json. Confronta il risultato con la configurazione browser-builder, verificando che i messaggi $localization in TypeScript vengano estratti mentre mancano i messaggi dai template HTML dei componenti; il lavoro è completato quando i messaggi dei template sono inclusi nell'estrazione.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
build-system, cli, internationalization
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
25/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.