New build system application missing i18n strings from templates

Ouverte
#31,227 4 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
25/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
angular, typescript

Piste de recherche

Commencez par reproduire le problème avec la configuration application-builder dans angular.json et exécutez ng extract-i18n --format=json. Comparez le résultat avec la configuration browser-builder, en vérifiant que les messages $localization dans TypeScript sont extraits tandis que les messages des modèles HTML des composants sont absents ; le travail est considéré comme terminé lorsque les messages des modèles sont inclus dans l’extraction.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

area: @angular/build devkit/build-angular:i18n freq1: low severity5: regression type: bug/fix
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:

{
    "$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:

{
    "$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

Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 20.3.1
Node: 20.19.5
Anything else?

No response

Langage dominant
TypeScript
Étoiles
27k
Forks
11.8k
Merge moyen
16 h 35 min
PR mergées (30 j)
176

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de angular/angular-cli

Toutes les issues de angular/angular-cli

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.