Performance problem in the dev mode with zone-js and long-stack-trace-zone

[mircowidmer]

• I'm submitting a ... [x] bug report [ ] feature request [ ] question about the decisions made in the repository

• Do you want to request a feature or report a bug? I would like to report a bug.

• What is the current behavior? When using multiple div components with multiple attached method bindings (methodX)="methodX()" the performance in the dev mode with hmr is unexpectedly bad compared to a production build (even without AOT). The reason seems to be the included zone.js/dist/long-stack-trace-zone that is producing some ZoneAwareErrors.

Loading a basic component takes more than 4 seconds in the dev mode compared to basically loading instantly in the production mode.

I suspect these errors to be responsible for the performance hit, but don't know where they originate from (I don't see any errors in the console).

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem I forked the AngularClass/angular2-webpack-starter repository and provided a demo of the problem under https://github.com/mircowidmer/angular2-webpack-starter/commit/ea6511356b13b833f14d455186ec362d7a90c638. To reproduce the problem, a download of the repository and the following steps should be enough to reproduce the problem: npm install npm run server:dev:hmr Navigating from the home component to the problem component should take longer than expected.

• What is the expected behavior? The loading of the example component should take not much more time compared to the production mode when run in the hmr dev mode.

• What is the motivation / use case for changing the behavior? Developing components in such a slow environment is not really feasible.

• Please tell us about your environment:

• Angular version: 2.4.6, but also happens on 4.0.0

• webpack: 2.3.1

• webpack-dev-middleware: 1.10.0

• webpack-dev-server: 2.4.1

• Browser: Chrome 56

• the environment is exactly the same as of commit https://github.com/AngularClass/angular2-webpack-starter/commit/f63bee00abfa4d67de627424df3072706e7b51dd besides my additional commit in the referenced forked repository to showcase the problem.

• Other information The corresponding stackoverflow post: http://stackoverflow.com/questions/43098721/angular4-app-with-webpack-dev-mode-suffers-from-slow-performance-when-using-even A possible workaround is mentioned in the comment: It's possible to comment out the line require('zone.js/dist/long-stack-trace-zone'); in the polyfills.browser.ts and then the application performs similarly compared to the production mode. https://github.com/mircowidmer/angular2-webpack-starter/commit/ea6511356b13b833f14d455186ec362d7a90c638

[mircowidmer]

https://github.com/angular/zone.js/issues/691 seems to be related.

[dniadzelka]

I have the same issue, but in prod mode all is fine