Skip to content

fix(@schematics/angular): update application schematics for module-based apps to use 'provideZoneChangeDetection' #32208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hybrist merged 2 commits into from
Jan 7, 2026
Merged

fix(@schematics/angular): update application schematics for module-based apps to use 'provideZoneChangeDetection' #32208

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9b3a6f6
fix(@schematics/angular): update application schematics for module-ba…
pawelfras Dec 29, 2025
cc91372
fix(@schematics/angular): move 'provideZoneChangeDetection' to the ro…
pawelfras Dec 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/schematics/angular/application/files/module-files/src/main.ts.template
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<% if(!!viewEncapsulation) { %>import { ViewEncapsulation } from '@angular/core';
<% }%><% if(!zoneless) { %>import { provideZoneChangeDetection } from '@angular/core';
<% }%>import { platformBrowser } from '@angular/platform-browser';
import { AppModule } from './app/app<%= typeSeparator %>module';

platformBrowser().bootstrapModule(AppModule, {
<% if(!zoneless) { %>ngZoneEventCoalescing: true,<% } %><% if(!!viewEncapsulation) { %>
defaultEncapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } %>
<% if(!zoneless) { %> applicationProviders: [provideZoneChangeDetection({ eventCoalescing: true })], <% } %>
Copy link
Contributor

@atscott atscott Dec 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This provider should instead go in the module alongside provideBrowserGlobalErrorListeners: packages/schematics/angular/application/files/module-files/src/app/app__typeSeparator__module.ts.template

Copy link
Contributor Author

@pawelfras pawelfras Dec 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @atscott,
thank you for the review and for your comment!
My intention was to make this part of app the fresh module-based app look similar to the result of the bootstrap options migration
The following is an effect of the migration (tested ng20 -> ng21 and ng19 -> ng20 -> ng21):
image

Is there any particular reason why the migration does not remove deprecated ngZoneEventCoalescing and add provideZoneChangeDetection to the app module?

Of course, I'm happy to adjust code in the PR - just asking to get better context.

Thank you!

Copy link
Contributor

@atscott atscott Dec 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add provideZoneChangeDetection to the app module?

yes. For the migration it is much harder to tell if there was already a change detection provider in the app module somewhere, including one of its imported modules. The migration would have had to instead create a separate module and add it to the imports to ensure it did not override any module providers.

Copy link
Contributor Author

@pawelfras pawelfras Dec 30, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you very much for sharing the context that helps me understand the decision!
I'll provide the adjustment soon.

Copy link
Contributor Author

@pawelfras pawelfras Dec 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@atscott changes pushed 👍
I'd appreciate a review.

<% if(!!viewEncapsulation) { %> defaultEncapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } %>
})
.catch(err => console.error(err));
6 changes: 4 additions & 2 deletions packages/schematics/angular/application/index_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -687,7 +687,7 @@ describe('Application Schematic', () => {
});

describe('standalone=false', () => {
it('should add the ngZoneEventCoalescing option by default with zone.js apps', async () => {
it('should add the provideZoneChangeDetection with event coalescing option by default with zone.js apps', async () => {
const tree = await schematicRunner.runSchematic(
'application',
{
Expand All @@ -699,7 +699,9 @@ describe('Application Schematic', () => {
);

const content = tree.readContent('/projects/foo/src/main.ts');
expect(content).toContain('ngZoneEventCoalescing: true');
expect(content).toContain(
'applicationProviders: [provideZoneChangeDetection({ eventCoalescing: true })]',
);
});

it(`should set 'defaultEncapsulation' in main.ts when 'ViewEncapsulation' is provided`, async () => {
Expand Down