{"id":1264,"date":"2023-08-01T05:00:00","date_gmt":"2023-08-01T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1264"},"modified":"2024-10-21T12:39:46","modified_gmt":"2024-10-21T19:39:46","slug":"whats-an-injection-context","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/whats-an-injection-context\/","title":{"rendered":"What&#8217;s an injection context?"},"content":{"rendered":"\n<p>In the past few months, the introduction of the <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/the-inject-function\/\" target=\"_blank\" rel=\"noopener\" title=\"\"><code>inject()<\/code> function<\/a> and the <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-16-preview-takeuntildestroyed\/\" target=\"_blank\" rel=\"noopener\" title=\"\"><code>takeUntilDestroyed<\/code> operator<\/a> shared something important: While these features are based on functions, these functions have to run within an <a href=\"https:\/\/angular.dev\/guide\/di\/dependency-injection-context\" target=\"_blank\" rel=\"noopener\" title=\"\">Angular injection context<\/a>, or you&#8217;ll get <a href=\"https:\/\/angular.dev\/errors\/NG0203\" target=\"_blank\" rel=\"noopener\" title=\"\">errors from the framework<\/a>.<\/p>\n\n\n\n<p>That&#8217;s because Angular relies on dependency injection for almost everything. As a result, it&#8217;s helpful to know what is an injection context.<\/p>\n\n\n\n<p>The most apparent injection contexts are these:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Constructor of an &#8220;Angular class&#8221; such as services, components, directives, pipes, etc.<\/li>\n\n\n\n<li>In the initializer for fields of such classes.<\/li>\n<\/ul>\n\n\n\n<p>Here is an example of what is and isn&#8217;t an injection context:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"641\" height=\"427\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-45.png\" alt=\"\" class=\"wp-image-1265\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-45.png 641w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-45-300x200.png 300w\" sizes=\"auto, (max-width: 641px) 100vw, 641px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Other places are injection contexts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the factory function specified for <code>useFactory<\/code> of a Provider or an <code>@Injectable<\/code>.<\/li>\n\n\n\n<li>In the factory function specified for an <code>InjectionToken<\/code>.<\/li>\n\n\n\n<li>Within a <a href=\"https:\/\/angular.io\/guide\/dependency-injection-context#stack-frame-in-context\" target=\"_blank\" rel=\"noopener\" title=\"\">stack frame<\/a> that is run in an injection context.<\/li>\n<\/ul>\n\n\n\n<p>In other words, this is when you&#8217;re configuring a module or dependency injection. The most common examples are related to the router &#8211; guards, resolvers, and such are all in the injection context, so we can inject dependencies there:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"906\" height=\"169\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-46.png\" alt=\"\" class=\"wp-image-1266\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-46.png 906w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-46-300x56.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-46-768x143.png 768w\" sizes=\"auto, (max-width: 906px) 100vw, 906px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the past few months, the introduction of the inject() function and the takeUntilDestroyed operator shared something important: While these features are based on functions, these functions have to run within an Angular injection context, or you&#8217;ll get errors from the framework. That&#8217;s because Angular relies on dependency injection for almost everything. As a result, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,26],"tags":[],"class_list":["post-1264","post","type-post","status-publish","format-standard","hentry","category-angular","category-dependency-injection"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1264"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1264\/revisions"}],"predecessor-version":[{"id":2204,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1264\/revisions\/2204"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}