Generate components in angular workspace/application with ChangeDetection onPush

[prabh-62]

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

N/A

Description

One should be able to generate angular application with changeDetection.OnPush components.

🔬 Minimal Reproduction

• npx @angular/cli@12 new web-apps --create-application false
• cd web-apps
• yarn ng config schematics.@schematics/angular:component.changeDetection OnPush
• yarn ng generate application admin-dashboard --prefix ad --routing --style css
• Review generated projects/admin-dashboard/src/app/app.component.ts and there is no changeDetection set.

🔥 Exception or Error

🌍 Your Environment

Angular CLI: 12.2.0
Node: 16.6.1
Package Manager: yarn 1.22.10
OS: darwin x64

Angular: 12.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.0
@angular-devkit/build-angular   12.2.0
@angular-devkit/core            12.2.0
@angular-devkit/schematics      12.2.0
@schematics/angular             12.2.0
rxjs                            6.6.7
typescript                      4.3.5

Anything else relevant?

• yarn ng generate component components/home --project admin-dashboard and changeDetection is set to onPush for generated projects/admin-dashboard/src/app/components/home/home.component.ts

[alan-agius4]

Reopening cause I got confused with another option

[alan-agius4]

At the moment this is working as expected since the application schematic doesn’t have the ChangeDetection

Let’s leave this open for the time being and see if there is a strong enough interest from the community to add this feature.

My 2 cents is that this is too trivial to add manually (which also happens to be rare) and hence it doesn’t warrant an API change in the application schematic.

[splincode]

@alan-agius4 @mgechev maybe it's will be improved for https://angular.io/guide/strict-mode ?

[alan-agius4]

@splincode, enabling onPush by default is not something that we want to do for a number of reasons, also OnPush doesn’t fit in the strict mode scope as this changes the runtime behaviour.

See https://github.com/angular/angular-cli/issues/21278 and https://github.com/angular/angular-cli/issues/17589#issuecomment-639402075

[vugar005]

@prabh-62 I strongly agree with @alan-agius4 that we should NOT have onPush by default. It should be opt in. Because new joiners to Angular dont know about onPush strategy and how it works. It can be very overhelming to them. If you want to auto generate components with onPush on your custom project use this in angular.json

  "projects": {
    "yourProjectName": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "changeDetection": "OnPush"
        }
      },