diff --git a/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template b/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template index dcea9394edb8..d46cd8233862 100644 --- a/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template +++ b/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template @@ -1,4 +1,4 @@ -import { <% if(changeDetection !== 'Default') { %>ChangeDetectionStrategy, <% }%>Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%> } from '@angular/core'; +import { <% if(changeDetection !== 'OnPush') { %>ChangeDetectionStrategy, <% }%>Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%> } from '@angular/core'; @Component({<% if(!skipSelector) {%> selector: '<%= selector %>',<%}%><% if(standalone) {%> @@ -16,7 +16,7 @@ import { <% if(changeDetection !== 'Default') { %>ChangeDetectionStrategy, <% }% } <% } %>`,<% } else if (style !== 'none') { %> styleUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.<%= style %>',<% } %><% if(!!viewEncapsulation) { %> - encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } if (changeDetection !== 'Default') { %> + encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } if (changeDetection !== 'OnPush') { %> changeDetection: ChangeDetectionStrategy.<%= changeDetection %>,<% } %> }) export <% if(exportDefault) {%>default <%}%>class <%= classifiedName %> { diff --git a/packages/schematics/angular/component/index_spec.ts b/packages/schematics/angular/component/index_spec.ts index 5bff59152715..1f03be864db9 100644 --- a/packages/schematics/angular/component/index_spec.ts +++ b/packages/schematics/angular/component/index_spec.ts @@ -23,7 +23,7 @@ describe('Component Schematic', () => { inlineStyle: false, inlineTemplate: false, displayBlock: false, - changeDetection: ChangeDetection.Eager, + changeDetection: ChangeDetection.OnPush, style: Style.Css, type: 'Component', skipTests: false, @@ -64,12 +64,23 @@ describe('Component Schematic', () => { expect(tsContent).toContain('compileComponents()'); }); - it('should set change detection to OnPush', async () => { - const options = { ...defaultOptions, changeDetection: 'OnPush' }; + it('should not set change detection when default is OnPush', async () => { + const options = { ...defaultOptions }; + + const tree = await schematicRunner.runSchematic('component', options, appTree); + const tsContent = tree.readContent('/projects/bar/src/app/foo/foo.component.ts'); + expect(tsContent).not.toMatch(/import.*ChangeDetectionStrategy/); + expect(tsContent).not.toMatch(/changeDetection:/); + expect(tsContent).not.toMatch(/ChangeDetectionStrategy/); + }); + + it('should set changeDetection to Eager when requested', async () => { + const options = { ...defaultOptions, changeDetection: 'Eager' }; const tree = await schematicRunner.runSchematic('component', options, appTree); const tsContent = tree.readContent('/projects/bar/src/app/foo/foo.component.ts'); - expect(tsContent).toMatch(/changeDetection: ChangeDetectionStrategy.OnPush/); + expect(tsContent).toMatch(/import .*ChangeDetectionStrategy/); + expect(tsContent).toContain('changeDetection: ChangeDetectionStrategy.Eager,'); }); it('should not set view encapsulation', async () => { @@ -348,27 +359,27 @@ describe('Component Schematic', () => { expect(tree.files).not.toContain('/projects/bar/src/app/foo/foo.component.spec.ts'); }); - it('should respect templateUrl when style=none and changeDetection=OnPush', async () => { - const options = { ...defaultOptions, style: Style.None, changeDetection: 'OnPush' }; + it('should respect templateUrl when style=none and changeDetection=Eager', async () => { + const options = { ...defaultOptions, style: Style.None, changeDetection: 'Eager' }; const tree = await schematicRunner.runSchematic('component', options, appTree); const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts'); expect(content).not.toMatch(/styleUrls: /); expect(content).toMatch(/templateUrl: '.\/foo.component.html',\n/); - expect(content).toMatch(/changeDetection: ChangeDetectionStrategy.OnPush/); + expect(content).toMatch(/changeDetection: ChangeDetectionStrategy.Eager/); }); - it('should respect inlineTemplate when style=none and changeDetection=OnPush', async () => { + it('should respect inlineTemplate when style=none and changeDetection=Eager', async () => { const options = { ...defaultOptions, style: Style.None, - changeDetection: 'OnPush', + changeDetection: 'Eager', inlineTemplate: true, }; const tree = await schematicRunner.runSchematic('component', options, appTree); const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts'); expect(content).not.toMatch(/styleUrls: /); expect(content).toMatch(/template: `(\n(.|)*){3}\n\s*`,\n/); - expect(content).toMatch(/changeDetection: ChangeDetectionStrategy.OnPush/); + expect(content).toMatch(/changeDetection: ChangeDetectionStrategy.Eager,/); }); it('should create a standalone component', async () => { diff --git a/packages/schematics/angular/component/schema.json b/packages/schematics/angular/component/schema.json index a2c04647abf5..3d6f24590bd4 100644 --- a/packages/schematics/angular/component/schema.json +++ b/packages/schematics/angular/component/schema.json @@ -67,7 +67,7 @@ "description": "Configures the change detection strategy for the component.", "enum": ["Eager", "OnPush"], "type": "string", - "default": "Eager", + "default": "OnPush", "alias": "c" }, "prefix": {