$localize in library not working with esbuild

[gongAll]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When I use $localize in a library and use it as a dependency on my app, it works fine when I build the app with @angular-devkit/build-angular:browser however when I switch it to @angular-devkit/build-angular:browser-esbuild it suddenly throws the following runtime error, which prevents the app from properly loading:

Uncaught TypeError: $localize is not a function.

Do you have any idea of what I might be doing wrong?

Minimal Reproduction

I can surely provide more info, if need be.

Exception or Error

No response

Your Environment

Angular CLI: 18.2.7
Node: 20.14.0
Package Manager: yarn 1.22.22
OS: linux x64

Angular: 18.2.7
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, platform-browser, platform-browser-dynamic
... pwa, router, service-worker

Package Version

@angular-devkit/architect 0.1802.7
@angular-devkit/build-angular 18.2.7
@angular-devkit/core 18.2.7
@angular-devkit/schematics 18.2.7
@schematics/angular 18.2.7
rxjs 7.8.1
typescript 5.5.4
zone.js 0.15.0

Anything else relevant?

No response

[alan-agius4]

Likely the application doesn’t have @angular/localize/init listed in the polyfills sections of the build.

Can you please check?

[gongAll]

@alan-agius4

This is how my angular.json is currently defined:

{
	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
	"cli": {
		"analytics": false,
		"schematicCollections": [
			"@angular-eslint/schematics"
		]
	},
	"newProjectRoot": "projects",
	"projects": {
		"tom-frontend": {
			"architect": {
				"build": {
					"builder": "@angular-devkit/build-angular:browser-esbuild",
					"configurations": {
						"development": {
							"buildOptimizer": false,
							"extractLicenses": false,
							"namedChunks": true,
							"optimization": false,
							"sourceMap": true,
							"vendorChunk": false
						},
						"pre-production": {
							"budgets": [
								{
									"maximumError": "5mb",
									"maximumWarning": "2.5mb",
									"type": "initial"
								},
								{
									"maximumError": "4kb",
									"maximumWarning": "2kb",
									"type": "anyComponentStyle"
								}
							],
							"i18nDuplicateTranslation": "error",
							"i18nMissingTranslation": "error",
							"localize": [
								"pt-PT"
							],
							"outputHashing": "all"
						},
						"production": {
							"budgets": [
								{
									"maximumError": "5mb",
									"maximumWarning": "2.5mb",
									"type": "initial"
								},
								{
									"maximumError": "4kb",
									"maximumWarning": "2kb",
									"type": "anyComponentStyle"
								}
							],
							"i18nDuplicateTranslation": "error",
							"i18nMissingTranslation": "error",
							"localize": [
								"en-US",
								"pt-PT"
							],
							"outputHashing": "all"
						}
					},
					"defaultConfiguration": "production",
					"options": {
						"assets": [
							{
								"glob": "**/*",
								"input": "src/assets",
								"output": "assets"
							},
							{
								"glob": "**/*.svg",
								"input": "node_modules/ionicons/dist/ionicons/svg",
								"output": "./svg"
							},
							"src/manifest.webmanifest"
						],
						"index": "src/index.html",
						"inlineStyleLanguage": "scss",
						"localize": [
							"pt-PT"
						],
						"main": "src/main.ts",
						"outputPath": "dist/tom-frontend",
						"polyfills": [
							"@angular/localize/init",
							"zone.js"
						],
						"scripts": [],
						"serviceWorker": true,
						"ngswConfigPath": "ngsw-config.json",
						"stylePreprocessorOptions": {
							"includePaths": [
								"node_modules"
							]
						},
						"styles": [
							"src/assets/scss/styles.scss"
						],
						"tsConfig": "tsconfig.app.json"
					}
				},
				"extract-i18n": {
					"builder": "ng-extract-i18n-merge:ng-extract-i18n-merge",
					"options": {
						"browserTarget": "tom-frontend:build",
						"outputPath": "src/assets/locales",
						"prettyNestedTags": false,
						"targetFiles": [
							"messages.pt-PT.xlf"
						]
					}
				},
				"lint": {
					"builder": "@angular-eslint/builder:lint",
					"options": {
						"lintFilePatterns": [
							"src/**/*.ts",
							"src/**/*.html"
						]
					}
				},
				"serve": {
					"builder": "@angular-devkit/build-angular:dev-server",
					"configurations": {
						"development": {
							"buildTarget": "tom-frontend:build:development"
						},
						"pre-production": {
							"buildTarget": "tom-frontend:build:pre-production"
						},
						"production": {
							"buildTarget": "tom-frontend:build:production"
						}
					},
					"defaultConfiguration": "development"
				},
				"test": {
					"builder": "@angular-devkit/build-angular:karma",
					"options": {
						"assets": [
							{
								"glob": "**/*",
								"input": "src/assets",
								"output": "assets"
							},
							{
								"glob": "**/*.svg",
								"input": "node_modules/ionicons/dist/ionicons/svg",
								"output": "./svg"
							},
							"src/manifest.webmanifest"
						],
						"inlineStyleLanguage": "scss",
						"polyfills": [
							"@angular/localize/init",
							"zone.js",
							"zone.js/testing"
						],
						"scripts": [
						],
						"stylePreprocessorOptions": {
							"includePaths": [
								"node_modules"
							]
						},
						"styles": [
							"src/assets/scss/styles.scss"
						],
						"tsConfig": "tsconfig.spec.json"
					}
				}
			},
			"i18n": {
				"locales": {
					"pt-PT": {
						"baseHref": "pt-PT/",
						"translation": "/src/assets/locales/messages.pt-PT.xlf"
					}
				},
				"sourceLocale": {
					"baseHref": "en-US/",
					"code": "en-US"
				}
			},
			"prefix": "tom",
			"projectType": "application",
			"root": "",
			"schematics": {
				"@schematics/angular:component": {
					"style": "scss"
				}
			},
			"sourceRoot": "src"
		}
	},
	"schematics": {
		"@schematics/angular:component": {
			"changeDetection": "OnPush",
			"inlineStyle": true,
			"style": "none"
		}
	},
	"version": 1
}

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[gongAll]

@alan-agius4 Ok, I will try to provide the reproduction until the end of the day. Cheers

[gongAll]

@alan-agius4

After some investigating, I concluded that the problem comes from using ng-extract-i18n-merge. However, there does not seem to exist a better tool to merge translations automatically to multi language apps, and I cannot understand exactly what it is that might be causing this issue on their side.

Minimal repro: https://github.com/gongAll/angular-cli-28576

@daniel-sc are you available to help understand what the problem might be? Perhaps you must update angular dependencies on your side?

[gongAll]

@alan-agius4

After debugging this issue on daniel-sc/ng-extract-i18n-merge#116, we concluded that the issue was in fact related to angular, or some misconfiguration on my app.

Either way, the initial minimal repro is now able to reproduce the bug without that dependency.

Minimal repro: https://github.com/gongAll/angular-cli-28576