fix(localize): add @angular/localize/init as polyfill in angular.json (#56300)

alan-agius4 · alxhub · commit d6dd3dbdb09d · 2024-06-06T13:41:12.000-07:00
This commit addresses an issue where the `@angular/localize/init` polyfill is not included when there are no polyfills specified in the `angular.json` file. PR Close #56300
diff --git a/packages/localize/schematics/ng-add/index.ts b/packages/localize/schematics/ng-add/index.ts
@@ -23,14 +23,51 @@ import {
   removePackageJsonDependency,
 } from '@schematics/angular/utility/dependencies';
 import {JSONFile, JSONPath} from '@schematics/angular/utility/json-file';
-import {getWorkspace} from '@schematics/angular/utility/workspace';
+import {getWorkspace, updateWorkspace} from '@schematics/angular/utility/workspace';
 import {Builders} from '@schematics/angular/utility/workspace-models';
 
 import {Schema} from './schema';
 
 const localizeType = `@angular/localize`;
+const localizePolyfill = '@angular/localize/init';
 const localizeTripleSlashType = `/// <reference types="@angular/localize" />`;
 
+function addPolyfillToConfig(projectName: string): Rule {
+  return updateWorkspace((workspace) => {
+    const project = workspace.projects.get(projectName);
+    if (!project) {
+      throw new SchematicsException(`Invalid project name '${projectName}'.`);
+    }
+
+    const isLocalizePolyfill = (path: string) => path.startsWith('@angular/localize');
+
+    for (const target of project.targets.values()) {
+      switch (target.builder) {
+        case Builders.Karma:
+        case Builders.Server:
+        case Builders.Browser:
+        case Builders.BrowserEsbuild:
+        case Builders.Application:
+          target.options ??= {};
+          const value = target.options['polyfills'];
+          if (typeof value === 'string') {
+            if (!isLocalizePolyfill(value)) {
+              target.options['polyfills'] = [value, localizePolyfill];
+            }
+          } else if (Array.isArray(value)) {
+            if (!(value as string[]).some(isLocalizePolyfill)) {
+              value.push(localizePolyfill);
+            }
+          } else {
+            target.options['polyfills'] = [localizePolyfill];
+          }
+
+          break;
+      }
+    }
+  });
+}
+
 function addTypeScriptConfigTypes(projectName: string): Rule {
   return async (host: Tree) => {
     const workspace = await getWorkspace(host);
@@ -45,6 +82,7 @@ function addTypeScriptConfigTypes(projectName: string): Rule {
       switch (target.builder) {
         case Builders.Karma:
         case Builders.Server:
+        case Builders.BrowserEsbuild:
         case Builders.Browser:
         case Builders.Application:
           const value = target.options?.['tsConfig'];
@@ -55,7 +93,7 @@ function addTypeScriptConfigTypes(projectName: string): Rule {
           break;
       }
 
-      if (target.builder === Builders.Browser) {
+      if (target.builder === Builders.Browser || target.builder === Builders.BrowserEsbuild) {
         const value = target.options?.['main'];
         if (typeof value === 'string') {
           addTripleSlashType(host, value);
@@ -132,6 +170,7 @@ export default function (options: Schema): Rule {
 
     return chain([
       addTypeScriptConfigTypes(projectName),
+      addPolyfillToConfig(projectName),
       // If `$localize` will be used at runtime then must install `@angular/localize`
       // into `dependencies`, rather than the default of `devDependencies`.
       options.useAtRuntime ? moveToDependencies : noop(),
diff --git a/packages/localize/schematics/ng-add/index_spec.ts b/packages/localize/schematics/ng-add/index_spec.ts
@@ -60,6 +60,7 @@ describe('ng-add schematic', () => {
                 options: {
                   browser: './main.ts',
                   tsConfig: './tsconfig.application.json',
+                  polyfills: ['zone.js'],
                 },
               },
               build: {
@@ -73,6 +74,7 @@ describe('ng-add schematic', () => {
                 builder: '@angular-devkit/build-angular:karma',
                 options: {
                   tsConfig: './tsconfig.spec.json',
+                  polyfills: 'zone.js',
                 },
               },
               server: {
@@ -157,6 +159,27 @@ describe('ng-add schematic', () => {
     expect(types).toHaveSize(2);
   });
 
+  it(`should add '@angular/localize/init' in 'polyfills' in application builder`, async () => {
+    host = await schematicRunner.runSchematic('ng-add', defaultOptions, host);
+    const workspace = host.readJson('angular.json') as any;
+    const polyfills = workspace.projects['demo'].architect.application.options.polyfills;
+    expect(polyfills).toEqual(['zone.js', '@angular/localize/init']);
+  });
+
+  it(`should add '@angular/localize/init' in 'polyfills' in karma builder`, async () => {
+    host = await schematicRunner.runSchematic('ng-add', defaultOptions, host);
+    const workspace = host.readJson('angular.json') as any;
+    const polyfills = workspace.projects['demo'].architect.test.options.polyfills;
+    expect(polyfills).toEqual(['zone.js', '@angular/localize/init']);
+  });
+
+  it(`should add '@angular/localize/init' in 'polyfills' in browser builder`, async () => {
+    host = await schematicRunner.runSchematic('ng-add', defaultOptions, host);
+    const workspace = host.readJson('angular.json') as any;
+    const polyfills = workspace.projects['demo'].architect.build.options.polyfills;
+    expect(polyfills).toEqual(['@angular/localize/init']);
+  });
+
   it(`should add '@angular/localize' in 'types' tsconfigs referenced in karma builder`, async () => {
     const tsConfig = JSON.stringify({
       compilerOptions: {
