Angular 4 Change Detection Run Twice at Startup Even in Production Mode

Asked Aug 11 '17 at 07:41

Active Aug 12 '17 at 10:19

Viewed 1,415 times

In my Angular app ngDoCheck, ngAfterViewChecked always executed twice while startup.

this answer tell me that Angular calls twice the change detection after the first one, in development mode.

I have run this command to enter production mode.

ng serve --environment=prod --target=production

and, Angular still called the hook twice.

Updated:

As yurzui said in the comment, Angular run Change Detection twice in dev mode: detectChanges and checkNoChanges (yurzui: i also said that angular calls app.tick()(that includes detectChanges and checkNoChanes(dev)) method twice on first start). The former to propagate changes, and the latter to make sure there are no changes. (see: Two Phases of Angular Applications)

But i don't understand why Angular calls detectChanges and checkNoChanges twice, at startup. So Change Detection called 4 times. Aren't 2 just enough?

edited Aug 12 '17 at 10:19

yurzui

205,937
32
433
399

asked Aug 11 '17 at 07:41

Yudi Supriyadi

Are you calling `detectChanges` somewhere? – Robin Dijkhof Aug 11 '17 at 07:42
My component just calling `console.log` on these hook. – Yudi Supriyadi Aug 11 '17 at 07:48
are you calling `enableProdMode()` inside your `main.ts` ? – n00dl3 Aug 11 '17 at 07:49
Yes, the app is generated by @angular-cli. I did not touch it. – Yudi Supriyadi Aug 11 '17 at 07:51
you can check in console if angular is running in development mode or not. I think you have to use `enableProdMode()` in main.ts. Btw which version of Angular cli are you using ? update to the latest version and check. eg. beta.32-3 – Niladri Aug 11 '17 at 07:52
1.2.1 version. I will try to install new angular-cli. – Yudi Supriyadi Aug 11 '17 at 08:05
https://stackoverflow.com/questions/45412199/angular-change-detection-runs-eight-times-instead-four/45412670#45412670 – yurzui Aug 11 '17 at 08:08
@yurzui I can't comment on your answer. `On first init it will run detectChanges and checkNoChanges and then detectChanges and checkNoChanges`, why Angular doing that, change detection 4 times? Aren't 2 times enough? – Yudi Supriyadi Aug 11 '17 at 10:06
Can you reproduce your issue? – yurzui Aug 12 '17 at 03:17
i have updated the question – Yudi Supriyadi Aug 12 '17 at 10:16
Yeah, i have updated it too) – yurzui Aug 12 '17 at 10:20
So why 2 tick() my brother? I think 1 is enough. – Yudi Supriyadi Aug 12 '17 at 23:33

Angular 4 Change Detection Run Twice at Startup Even in Production Mode

0 Answers0