Angular 18 Polyfill Warning for @angular/localize

Problem Statement

After upgrading to Angular 18, you may encounter a warning when running ng serve:

▲ [WARNING] Polyfill for "@angular/localize/init" was added automatically. [plugin angular-polyfills]
In the future, this functionality will be removed. Please add this polyfill in the "polyfills" section of your "angular.json" instead.

This warning occurs even if you've already imported @angular/localize/init in your polyfills.ts file and have it configured in your angular.json. The key issue is that Angular 18 now requires explicit declaration of this polyfill in the angular.json configuration rather than relying solely on the polyfills.ts import.

Recommended Solution

For Application Projects

Modify your angular.json file to explicitly include the @angular/localize/init polyfill:

{
  "projects": {
    "project-name": {
      "architect": {
        "build": {
          "options": {
            "polyfills": [
              "src/polyfills.ts",
              "@angular/localize/init" // Add this line
            ]
          }
        }
      }
    }
  }
}

Then remove the import statement from your polyfills.ts file:

- import '@angular/localize/init';

Key actions:

1. Update angular.json to include "@angular/localize/init" in the polyfills array
2. Remove import '@angular/localize/init' from polyfills.ts
3. Restart your development server

Why this works

Angular 18's new ESBuild-based compiler automatically injects this polyfill if it detects @angular/localize in your dependencies but doesn't find a proper configuration. Explicitly adding it to angular.json satisfies the compiler and prevents the automatic behavior that triggers the warning.

Verify Configuration

Ensure your package.json includes the latest version of the localization package:

{
  "dependencies": {
    "@angular/localize": "^18.0.3"
  }
}

For Library Projects

If you're working on an Angular library (not an application), use this alternate approach since libraries don't have a polyfills array in configuration:

1. Replace the import in your library entry point (public-api.ts):

- import '@angular/localize/init';
+ /// <reference types="@angular/localize" />

2. Update your tsconfig.json:

{
  "compilerOptions": {
    "types": ["@angular/localize"]
  }
}

Additional Considerations

• Complete polyfills cleanup: If your polyfills.ts becomes empty after removing @angular/localize/init, you can safely delete the file and remove its reference from angular.json
• Future compatibility: Angular plans to remove automatic polyfill injection in future versions. Applying these changes ensures your project remains compatible
• Localization requirements: The @angular/localize package is only needed if you're using Angular's internationalization (i18n) features. If you're not using localization, you can remove the package entirely with:

npm uninstall @angular/localize

Confirming the Fix

After implementing these changes:

1. Run ng serve again
2. Verify the warning no longer appears in your console
3. Ensure your application builds correctly (ng build)

Following these steps resolves the polyfill warning while maintaining proper functionality for Angular's internationalization features.