Enable ChangeDetectionStrategy.OnPush and coalesce event change detections in v13

[prabh-62]

🚀 Feature request

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Description

As per the performance checklist published, it is recommended to enable ChangeDetectionStrategy.OnPush to make performant angular applications.

❯ npx @angular/cli@12 new web-apps --create-application false
❯ cd web-apps && yarn ng g app admin-console --routing --style scss

• Edit angular.json and enable ChangeDetectionStrategy.OnPush for all future generated components
  
• Edit projects/admin-console/src/main.ts and enable ngZoneEventCoalescing as per performance checklist

platformBrowserDynamic()
  .bootstrapModule(AppModule, {
    ngZoneEventCoalescing: true,
    ngZoneRunCoalescing: true,
  })
  .catch((err) => console.error(err));

Describe the solution you'd like

The above mentioned flags should be enabled by default under strict workspace from Angular v13

Describe alternatives you've considered

Just manually enable the flags on all angular projects.

Why I opened this issue?

The inspiration comes from blog posts by Next.js team. Instead of asking developers to enable flags to make apps perform better, the team enables them by default thereby making all Next.js apps faster.
There is an argument, that this change could invalidate some tutorials out there. If that's the case, then angular can never improve the framework and just stagnate itself.

[prabh-62]

Comments from community: https://netbasal.com/reduce-change-detection-cycles-with-event-coalescing-in-angular-c4037199859f

[alan-agius4]

Thoughts @mgechev?

[mgechev]

Strict mode is specifically used to enforce constraints at build time without bringing any changes to the runtime.

Both OnPush and zone coalescing would, however, change the default semantics of building Angular apps. This is outside the scope of the feature.

[alan-agius4]

@mgechev, turning these options on by default is not something that we want to reconsider for version 13 correct?

We did discuss this a couple of months ago and felt that we shouldn’t since it would complicate things for new user which are not familiar with change detection.

[prabh-62]

Can we atleast enable these runtime features by default for angular workspace users(since we know they are not new users)?

[alan-agius4]

Having different behaviour based on which directory the app is being create in is more confusing.

My 2 cents is that for performance which change the behaviour of runtime, it is acceptable for users to opt-in. If one is an experienced user, the argument can be made that they should be aware of different Change Detection Strategies and their trade offs and hence it’s easier for them to opt-in using the more performant OnPush.

Small correction, when using the Angular CLI you always use workspaces. I think you what you mean was not having a root application.

[alan-agius4]

Following a chat with devrel we feel that what was mentioned a couple of months ago in #17589 (comment) still applies and therefore we feel that we shouldn't add suggested changes by default.

We do enable a number of performance related features by default such as bundle optimization, font inlining, critical css inlining but none of these effect the runtime behaviour.

[prabh-62]

@alan-agius4 The default app.component.ts generated by angular CLI does not have change detection set. Can we atleast surface the changeDetection CI flag, so the default generated component can be onPush.

• npx @angular/cli@12 new web-apps --create-application false --changeDetection onPush