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