{"id":1768,"date":"2023-11-14T05:00:00","date_gmt":"2023-11-14T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1768"},"modified":"2023-11-13T14:55:43","modified_gmt":"2023-11-13T22:55:43","slug":"angular-17-new-devtools-injector-tree-view","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-17-new-devtools-injector-tree-view\/","title":{"rendered":"Angular 17: New devtools injector tree view"},"content":{"rendered":"\n

Another Angular 17 update is the release of a new DevTools panel called Injector Tree<\/strong>. It’s a good option to visualize both your element hierarchy and injector hierarchy, and it is accessible as a third tab in the Angular DevTools browser extension<\/a> available for Chrome, Firefox, and Edge:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

When we click on that tab, a tree view of all hierarchies shows up on the screen:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

For a clearer view, we can check the option “hide framework injectors” to focus on our code:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Clicking on an injector<\/a> (such as root) shows the list of all injectables\/services available in that injector:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

This new tab seems to be just getting started, and more information will be added later. Even though the Devtools is a browser extension, the Injector tree tab only works for apps using Angular v17+. I tried an Angular v16 app with no success.<\/p>\n","protected":false},"excerpt":{"rendered":"

Another Angular 17 update is the release of a new DevTools panel called Injector Tree. It’s a good option to visualize both your element hierarchy and injector hierarchy, and it is accessible as a third tab in the Angular DevTools browser extension available for Chrome, Firefox, and Edge: When we click on that tab, a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,13,26,17],"tags":[],"class_list":["post-1768","post","type-post","status-publish","format-standard","hentry","category-angular","category-debugging","category-dependency-injection","category-tools"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t