Angular Ivy With Augury: A Simply Workaround

Since Angular 9 was released, Ivy, the new compiler and runtime instructions which has replaced View Engine as the default engine, is not compatible with Augury, which is an very helpful instrumental tools for developing/debugging with Angular projects.

Chinese version: link

TL;DR, just take me to the solution part.

Why Ivy?

Referring to Angular official blog, The Ivy compiler offers numerous advantages:

• Smaller bundle sizes
• Faster testing
• Better debugging
• Improved CSS class and style binding
• Improved type checking
• Improved build errors
• Improved build times, enabling AoT on by default
• Improved i18n

Small apps could see around a 30% decrease in bundle size, large apps will see a 25–40% decrease, and medium apps decrease minimally. For chart source and more details about Ivy please check here.

What’s bad?

Augury, a browser extension helpful for developing and debugging your Angular project, but Augury currently does not have support for Angular Ivy, cause Angular Ivy remove the ng.probe() API deep dependenced by Augury.

We know that Augury still works fine with both Ivy and AoT features disabled, but that’s a pity. So, is there anyway to let them work together?

Augury dosen’t work with Angular Ivy enabled, extension shows blank workspace and no.probe() printed in console.

Solution

There is a solution that can let your Angular project work with Ivy and AoT features enabled, and also Augury supports, by a little hack within angular.json , package.json and tsconfig. This solution is NO NEED to install any packages, also NO NEED to change your existed Angular code, all you need to do is changing some config files.

1. Make a copy of your origin tsconfig.app.json file, name it as tsconfig.augury.json
2. Add following configs/options to each target file

Add to tsconfig.augury.json

Add to package.json

Now focus on angular.json, copy the section part project.YOUR_PROJECT_NAME_.architect.build, past it at the same layer with build and change the key into augury, and making changes as following example:

Do some modification in angular.json

Congratulations! now you can startup your dev-server by

$ npm run start:angury

Augury works fine, all features work as expected.

This will startup an Angular dev-server, without Angular Ivy and AoT features enabled, so Augury works fine with that. There is no side-effect to the production build, Angular Ivy and AoT features will be enabled and run as expected. Moreover, you can use npm run start without :angury prefix to startup a dev-server with Angular Ivy and AoT features enabled.

Afterthought

This solution is not a long-term way, but I think that is easy and clean workaround for present. The good news is Rangle team has been started the development of next generation Angury, known as Angury Labs. However, I’ve already tried but seems not work for me. You can try by yourself; maybe it works for you.

Buy me a coffee ☕️