feat(@schematics/angular): Add global error listeners to new app generation

This commit adds the provider for global error listener in the browser.
This is particularly useful for zoneless apps but also useful for
Zone-based applications when errors happen outside the Angular zone.

Author: atscott

package.json

@@ -46,20 +46,20 @@
   },
   "homepage": "https://github.com/angular/angular-cli",
   "devDependencies": {
-    "@angular/animations": "20.0.0-next.6",
-    "@angular/cdk": "20.0.0-next.6",
-    "@angular/common": "20.0.0-next.6",
-    "@angular/compiler": "20.0.0-next.6",
-    "@angular/compiler-cli": "20.0.0-next.6",
-    "@angular/core": "20.0.0-next.6",
-    "@angular/forms": "20.0.0-next.6",
-    "@angular/localize": "20.0.0-next.6",
-    "@angular/material": "20.0.0-next.6",
+    "@angular/animations": "20.0.0-next.7",
+    "@angular/cdk": "20.0.0-next.7",
+    "@angular/common": "20.0.0-next.7",
+    "@angular/compiler": "20.0.0-next.7",
+    "@angular/compiler-cli": "20.0.0-next.7",
+    "@angular/core": "20.0.0-next.7",
+    "@angular/forms": "20.0.0-next.7",
+    "@angular/localize": "20.0.0-next.7",
+    "@angular/material": "20.0.0-next.7",
     "@angular/ng-dev": "https://github.com/angular/dev-infra-private-ng-dev-builds.git#a9e4627eb45742d81068087a5b57a676104fe053",
-    "@angular/platform-browser": "20.0.0-next.6",
-    "@angular/platform-server": "20.0.0-next.6",
-    "@angular/router": "20.0.0-next.6",
-    "@angular/service-worker": "20.0.0-next.6",
+    "@angular/platform-browser": "20.0.0-next.7",
+    "@angular/platform-server": "20.0.0-next.7",
+    "@angular/router": "20.0.0-next.7",
+    "@angular/service-worker": "20.0.0-next.7",
     "@bazel/bazelisk": "1.26.0",
     "@bazel/buildifier": "8.0.3",
     "@eslint/compat": "1.2.8",

packages/schematics/angular/application/files/module-files/src/app/app-module.ts.template

@@ -1,4 +1,4 @@
-import { NgModule<% if(experimentalZoneless) { %>, provideExperimentalZonelessChangeDetection<% } %> } from '@angular/core';
+import { NgModule, provideBrowserGlobalErrorListeners<% if(experimentalZoneless) { %>, provideExperimentalZonelessChangeDetection<% } %> } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 <% if (routing) { %>
 import { AppRoutingModule } from './app-routing-module';<% } %>
@@ -12,7 +12,10 @@ import { App } from './app';
     BrowserModule<% if (routing) { %>,
     AppRoutingModule<% } %>
   ],
-  providers: [<% if (experimentalZoneless) { %>provideExperimentalZonelessChangeDetection()<% } %>],
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    <% if (experimentalZoneless) { %>provideExperimentalZonelessChangeDetection()<% } %>
+  ],
   bootstrap: [App]
 })
 export class AppModule { }

packages/schematics/angular/application/files/standalone-files/src/app/app.config.ts.template

@@ -1,8 +1,11 @@
-import { ApplicationConfig, <% if(!experimentalZoneless) { %>provideZoneChangeDetection<% } else { %>provideExperimentalZonelessChangeDetection<% } %> } from '@angular/core';<% if (routing) { %>
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, <% if(!experimentalZoneless) { %>provideZoneChangeDetection<% } else { %>provideExperimentalZonelessChangeDetection<% } %> } from '@angular/core';<% if (routing) { %>
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';<% } %>
 
 export const appConfig: ApplicationConfig = {
-  providers: [<% if(experimentalZoneless) { %>provideExperimentalZonelessChangeDetection()<% } else { %>provideZoneChangeDetection({ eventCoalescing: true })<% } %><% if (routing) {%>, provideRouter(routes)<% } %>]
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    <% if(experimentalZoneless) { %>provideExperimentalZonelessChangeDetection()<% } else { %>provideZoneChangeDetection({ eventCoalescing: true })<% } %>,
+    <% if (routing) {%>provideRouter(routes),<% } %>]
 };

packages/schematics/angular/service-worker/index_spec.ts

@@ -139,7 +139,7 @@ describe('Service Worker Schematic', () => {
     const tree = await schematicRunner.runSchematic('service-worker', defaultOptions, appTree);
     const content = tree.readContent('/projects/bar/src/app/app.config.ts');
     expect(content).toContain(
-      `import { ApplicationConfig, provideZoneChangeDetection, isDevMode } from '@angular/core';`,
+      `import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection, isDevMode } from '@angular/core';`,
     );
   });
 

packages/schematics/angular/utility/standalone/rules_spec.ts

@@ -423,7 +423,10 @@ describe('standalone utilities', () => {
       const content = readFile('app/app-module.ts');
 
       assertContains(content, `import { SOME_TOKEN } from '@my/module';`);
-      assertContains(content, `providers: [{ provide: SOME_TOKEN, useValue: 123 }]`);
+      assertContains(
+        content,
+        `providers: [provideBrowserGlobalErrorListeners(),{ provide: SOME_TOKEN, useValue: 123 },]`,
+      );
     });
 
     it('should add a root provider to a standalone app', async () => {
@@ -442,7 +445,11 @@ describe('standalone utilities', () => {
       assertContains(content, `import { provideModule } from '@my/module';`);
       assertContains(
         content,
-        `providers: [provideZoneChangeDetection({ eventCoalescing:true }),provideModule([])]`,
+        `providers: [
+          provideBrowserGlobalErrorListeners(),
+          provideZoneChangeDetection({ eventCoalescing:true }),
+          provideModule([]),
+        ]`,
       );
     });
 
@@ -453,11 +460,12 @@ describe('standalone utilities', () => {
       host.overwrite(
         getPathWithinProject(configPath),
         `
-        import { ApplicationConfig } from '@angular/core';
+        import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
         import { provideRouter } from '@angular/router';
 
         export const appConfig: ApplicationConfig = {
           providers: [
+            provideBrowserGlobalErrorListeners(),
             provideRouter([]),
           ]
         };
@@ -474,7 +482,10 @@ describe('standalone utilities', () => {
 
       const content = readFile('app/app.config.ts');
       assertContains(content, `import { provideModule } from '@my/module';`);
-      assertContains(content, `providers: [provideRouter([]),provideModule([]),]`);
+      assertContains(
+        content,
+        `providers: [provideBrowserGlobalErrorListeners(), provideRouter([]),provideModule([]),]`,
+      );
     });
   });
 });