Angular Dependency Injection in Depth - Multiple Providers (2020)

[@DecodedFrontend]

Thank you for watching! Do not forget to leave your feedback, for me it is very important 😉 Also check out this playlist If you would like to know more about Dependency Injection in Angular (kzbin.info/aero/PLX7eV3JL9sfmJ6AaZj9eDlAKrJrEul4Vz).

[@Nabulio85]

I have been following you for years now and I enjoy seeing videos that I have already seen before (some times years ago), because on the one hand it refreshes ideas and on the other hand by watching a video again with more from experience, we understand things much more finely. thank you to you

[@aram5642]

ng14: inject function for the win. That is meant to say - big respect to Dmytro for his effort of putting timestamps and version stamps of his videos' titles.That helps viewers to identify that the suggested solutions might not be the most recent one. It means a lot!

[@MoMoadeli]

Dmytro, I recently stumbled on your channel and I'm impressed with your presentation and details on the more advanced Angular concepts. I believe you have one of the best 'how to' channels on Angular. Kudos! It'll be great if you create companion videos delving more into the 'why tos' as well and mention real world scenarios. For example a video or two on service and template abstractions and customization involving your great dependency providers, resolution modifiers, and NgTemplateOutlet would bring everything together well. Thanks again for your superb content.

[@drone-plus-plus]

3:42 Hey. I use the same approach in inheritance and pass the injector to the parent class so that it gets the dependencies it needs. Thank you for the video, great format :)

[@shivanimehrotra187]

Please make a video explaining how exactly Angular applications are bootstrapped, how it starts and runs in the browser, what exactly happens under the hood at load time and also during build time. I couldn't find any satisfactory explanation for this yet.

[@DecodedFrontend]

Hi, Shivani! Thank you for a great idea :) I will definitely add it to my short list

[@amirmahdi1507]

its best source for angular . very deep . thank you

[@VipinRawat_Offcial]

Please make video on chrome performance tab to check component leak in angular as well other uses of performance tab

[@debmallyabhattacharya4394]

Dude you're great!

[@Ghanshyam1987]

Thanks for clarifying Multi, another nice video 👍

[@DecodedFrontend]

Thank you! I am glad to know that you liked it 😊

[@collinsk8754]

Very well explained. 👍👍

[@beshoyfayez7695]

Good explination, when i use useFactory with deps: [Injector] like the code in the video at 2:48 it cause Circular dependency if expereimental is false I know the reason for this error now: when Angular tried to get dependency for loggerService it goes for the first provider token and it exist in node injector (APP component), and then Angular will try to see how to execute the dependency and it found useFactory so it will execute this function and it will goes to first provider token and guess what it will exist in node injector (it will be like a loop) solution Inject(LoggerService, {skipSelf: true}) and loggerService must be defined in module injector or provideIn: root

[@KostasOreopoulos]

this should be pinned.

[@bennyt1635]

Awesomely detailed and helpful as always 🙂 could you make a video on cdk portals?

[@DecodedFrontend]

Hi! Thank you for your feedback! very likely but can't say when exactly :)

[@VinothKumar5403]

Hi Dev.could you please explain about zoneJS

[@DecodedFrontend]

Hi! It is in my list :)

[@pollo_cesar_]

Great Videos, one topic that is not common shown for angular is the Content Projection and the use of Custom Directives to extend the functionalities of a component and easily expose properties to the users of the components. Maybe you can make a series of them ;)

[@DecodedFrontend]

Hi César, It is a great idea! Thank you for hint. I will definitely invest some time in this topic 😉

[@adityamore287]

Hello sir, While I was practicing I used the exact scenario about useFactory provider and I only change APP_CONFIG injection token's factory experimentalEnabled value to false and somehow without using injector.get() method it's running smoothly but when I used injector.get() method I ended up with Circular dependency in DI ERROR. I'm using Angular 13. Would you like to help me here? Thanks

[@pawansahu8605]

Hi, you are great teacher, like your video, learning many things from you. could you please make some video on nestjs microservices implementation 🙏

[@DecodedFrontend]

Thanks a lot for the feedback! I will add microservices to the queue

[@avnerhattab765]

@Dmytro if i am not wrong , it's important to also give a mention about injecting the injector as a deps, in angular libs , i you publish one in prod mode (ivy= false) it may cause an error due to synchronous and asynchronous angular structure, am i right ? (relate content min 2.35)

[@DecodedFrontend]

To be honest, I didn't hear about that. Do you have a link to the article / Github issue where I could read about it?

[@farrukh.]

Great tutorial !. By the way you look like a Turkish singer Mustafa Ceceli))

[@sowmithreddy18]

That was an amazing video, I came across a use-case where the value for the dependency needed to have different implementations based on certain events/conditions during runtime. Is it possible to change the values of the dependency multiple times after the component has been initialized??

[@vadimstepanets2022]

Hi Dmitro, I have a question. When I provide a service to a routing, it starts as soon as I go to that routing. But if I leave this rout, the service will continue to work. What is the reason for this behaviour and how to properly disable the service, as it happens if we provide it at the module ? .

[@wojciechtrawinski75]

Locator pattern (using Injector) is anti-pattern.

[@DecodedFrontend]

Yep, you are right. I think somewhere here in comments was a discussion about that and I agreed after all that this solution is not as good as it initially seemed to me. There is always something to learn :) Thank you for the comment

[@amirmahdi1507]

Circular dependency in DI occurred when you edit your in start of video code if experimentalEnabled :false we should use new keyword for LoggerService or use other provide Neither‌ LoggerService nor Exp....Service

[@F2H16]

Amazing video! Have you pushed the source code to github ?

[@TheNsn666]

Hi, when experimentalEnabled: false I get Circular dependency in DI detected for LoggerService.. any idea ? (Im talking about the Injector implementation and im also using this example in a custom component and not the app component like you did)

[@DecodedFrontend]

what experimentalEnabled property are you talking about? I do not remember such a property neither in angular.json nor in tsconfig.json

[@TheNsn666]

@@DecodedFrontend config.experimentalEnabled in your example in the video, which you use in the factory

[@dragorwyin9809]

@@TheNsn666 Yes, I met same problem. It's about changing to 'injector.get' in loggerFactory. LoggerService tries to get his own instance and rely on it but it doesn't work and need to backup into calling constructors with "new" keyword.

[@Yumo3000]

Hi Dmytro really good content. I've been having a doubt about angular injection for a month at least and maybe someone here can help me. What if I want to use two childs with two separated services each one, but in the same parent component? Knowing that these two child components are generic and the parent too. first try was i used a component input and passing it the instance of the injectable. thanks for the content 😁😁

[@jseh_]

"provideIn: root" has less priority than providers array?

[@gonzalocorchon6509]

I always thought that using the Injector service / service container was an anti-pattern. It seems to me that this is a valid method for lazy guys who don't want (or they can't) to declare their dependencies, however you end up injecting an object that has access to all the services hence you don't know exactly what your provider depends on. Of course you can use the Injector service anywhere in your application but it only makes your code more confusing and harder to test. I would only use it in places where it is fully justified and there is no alternative solution, but not to save some parameters in my class constructors.

[@DecodedFrontend]

Hi Gonzalo, Thanks for you feedback! After some time I also re-thought this approach and must agree with you that it should be avoided if possible or it might be considered only in some very specific use-cases when it is unknown what or how many deps has the factory function. Something like the case from NgRx library (github.com/ngrx/platform/blob/master/modules/effects/src/effects_module.ts#L89)

[@raptorthefirst]

Wow, nice video, but I have a question: you placed 'multi' twice, on each provide object, but what if one will have 'multi', e.g. first one, and another will not, should it return just the last service provider, the array of both of services or with only that service ?

[@DecodedFrontend]

Hi Kirill, I can't currently check exactly but I am pretty sure that you will get an error. I doubt that you can mix up multi providers with non-multi ones for the same token.

[@booaboo2240]

bud, i just following your tutorial about DI and reaching this video. idk but implementation of "multi" throwing an error which says "this.logger.log is not a function". idk i just want you to know jeje

[@DecodedFrontend]

Hi! Thanks for your feedback! Which angular version do you use?

[@alexandrekfoury9289]

I don't understand the combinaison of multi and usexisting.

[@RRCaddick]

Great video, although there seems to be a bug when setting experimentalEnabled: false in config.token.ts. This is causing a circular dependency as LoggerService is using injector.get to call itself which is creating the loop. What is your suggestion to solve this?

[@thevrstyle]

You can use the below way to resolve dependency issue. Step 1: create injection token - export const CUSTOM_LOGGER = new InjectionToken(''); Step 2: In the app.component.ts file, import the injection token and mention in provider providers: [ { provide: CUSTOM_LOGGER, useFactory: (injector: Injector) => { return injector.get(APP_CONFIG).experimentalEnabled ? injector.get(ExperimentalloggerService) : injector.get(LoggerService) }, deps: [Injector] } ] Step 3: In the constructor method, add the below code @Inject(CUSTOM_LOGGER) private clogger: LoggerService Now if you change the experimentalEnabled value, it will not generate a circular dependency issue.

[@para6epc]

Hello@@thevrstyle its good idea, but this solution brings another issue. We have to use this.clogger.log(".......msg"). But we must not. We only allowed to use this.log.log(".......msg")

[@utsavsharma2979]

👍👍👍👍