APP_INITIALIZER Token in Angular (Advanced, 2022)

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ธ.ค. 2024

ความคิดเห็น • 95

  • @DecodedFrontend
    @DecodedFrontend  2 ปีที่แล้ว +15

    If you want to support my channel and you find my content useful I would be grateful if you share it with your colleagues and friends. Thank you!🙏

    • @p.s29
      @p.s29 2 ปีที่แล้ว +2

      Already did! 😁

    • @DecodedFrontend
      @DecodedFrontend  2 ปีที่แล้ว +2

      Thanks a lot, Prateek! ;)

    • @DecodedFrontend
      @DecodedFrontend  2 ปีที่แล้ว

      @Arsalan Majeed much appreciate it, Arsalan🙏🏻

    • @claudiuciprianbetiuc3985
      @claudiuciprianbetiuc3985 2 ปีที่แล้ว

      Constantly doing it :) You have great content!

  • @malyna
    @malyna 2 ปีที่แล้ว +1

    Чудове пояснення, думаю було б круто зробити окрему серію відео по розбіру сорсів!

  • @Nabulio85
    @Nabulio85 ปีที่แล้ว +1

    Dmytro, award of best Angular instructor 🙏
    Thank you very much.

  • @vitaliyboyanivskyy1225
    @vitaliyboyanivskyy1225 2 ปีที่แล้ว +2

    Дякую за контент)

    • @DecodedFrontend
      @DecodedFrontend  2 ปีที่แล้ว

      Будь ласка 😉 Заходьте ще))

  • @TheNicoad
    @TheNicoad 2 ปีที่แล้ว

    Your youtube channel is pure gold bar, hope you know it and feel good about it

  • @MarceloLopesS
    @MarceloLopesS 2 ปีที่แล้ว +6

    Hi, would you mind making a video about push-based architecture? I'd love to learn more how to use it and why. Reactive Angular seems very sophisticated

  • @dimitridovgan6364
    @dimitridovgan6364 2 ปีที่แล้ว +1

    Best Angular Tutorials!

  • @m3kbeatz
    @m3kbeatz 10 หลายเดือนก่อน +1

    But why app_initilazier doesn't block imported modules?

  • @Nurtylek
    @Nurtylek 2 ปีที่แล้ว +6

    I don’t think it’s a good idea to subscribe inside service, u could do it inside tap operator

  • @innocentmazando3808
    @innocentmazando3808 ปีที่แล้ว

    I knew I was gonna need this video and now I am using it at work.
    Thanks for the great video sir

  • @OscarAndresPabonEstrella
    @OscarAndresPabonEstrella 2 ปีที่แล้ว +2

    Your videos have helped me a lot, is not easy to find those kind of advanced things related with angular. Thanks a lot :)

  • @DenisBendrikov
    @DenisBendrikov 2 ปีที่แล้ว +5

    Thanks a lot for showing how it works under the hood.
    Also it is worth mentioning that APP_INITIALIZER doesn't work if used in lazy loaded feature modules

    • @DecodedFrontend
      @DecodedFrontend  2 ปีที่แล้ว +4

      Thank you for the addition! You are absolutely right.
      Regarding 'under the hood' stuff, should I do dive more in the source code? :)

    • @DenisBendrikov
      @DenisBendrikov 2 ปีที่แล้ว +1

      @@DecodedFrontend in your videos you do a great job with a high-level source code overview 👍 so I better leave you the choice of how deep you should dive

    • @DecodedFrontend
      @DecodedFrontend  2 ปีที่แล้ว

      @@DenisBendrikov got you! Thanks 😊

  • @nanasarathi
    @nanasarathi 2 ปีที่แล้ว +1

    You are a very good teacher... it was very informative. Thanks for sharing this video.

  • @ianvink
    @ianvink 2 ปีที่แล้ว +2

    This was an excellent video.

  • @davidrestrepo8176
    @davidrestrepo8176 3 หลายเดือนก่อน

    Nice tutorial, something I've trying to do is to show a loader while the initial config of the app is being loaded but I haven't found a way to implement it

  • @yorikworld
    @yorikworld 2 ปีที่แล้ว

    Дякую, крутий контент.

  • @JoeBoo532
    @JoeBoo532 6 หลายเดือนก่อน

    Hi, could you please explain the benefits of assigning the response results to an observable instead of just using an array? Thank you!
    loving your vid by the way! :D

  • @horic007
    @horic007 2 ปีที่แล้ว +1

    Awesome content! 👏🏻

  • @vigneshwaran6410
    @vigneshwaran6410 2 ปีที่แล้ว +1

    Awesome content😃, make more videos like this.

  • @hoangducnguyen8887
    @hoangducnguyen8887 ปีที่แล้ว

    Hey @DecodedFrontend, what's your desk setup?

  • @user-fg6ng7ej6w
    @user-fg6ng7ej6w 2 ปีที่แล้ว

    очень толковые содержательные видосы, спасибо. вся эта серия про DI крута

  • @demidovmaxim1008
    @demidovmaxim1008 2 ปีที่แล้ว +1

    Cool. Thank you for this video!

  • @thesweetvishu
    @thesweetvishu 2 ปีที่แล้ว +1

    Great one...

  • @djedaaa2232
    @djedaaa2232 2 ปีที่แล้ว

    Helped me! Gread video!

  • @ayoubalfurjani4531
    @ayoubalfurjani4531 ปีที่แล้ว

    This video was just right!, and my use case was exactly the same as the one mentioned in the example.
    Overall a great video. Keep it up

  • @innocentmazando3808
    @innocentmazando3808 2 ปีที่แล้ว +1

    Powerful content as usual, thanks man

  • @miroslavpetrov3006
    @miroslavpetrov3006 10 หลายเดือนก่อน

    Great, now how do I preload my LCP image

  • @vlads3856
    @vlads3856 2 ปีที่แล้ว +1

    Awesome content!

  • @sunilvilluri385
    @sunilvilluri385 2 ปีที่แล้ว +1

    @Decoded Frontend - I want to know how you are able to see the actual code implementation instead of d.ts files. Can you provide steps to do it

    • @chikkachokka3401
      @chikkachokka3401 2 ปีที่แล้ว

      you got it sunil? if yes, can you please share?

    • @sunilvilluri385
      @sunilvilluri385 2 ปีที่แล้ว +1

      @@chikkachokka3401 - there is a shift between editors which was trimmed in editing. There is no straight way to get it

  • @malbarmavi
    @malbarmavi 2 ปีที่แล้ว +1

    super good 😭😁👏👏

  • @ivanco_s
    @ivanco_s 2 ปีที่แล้ว +1

    cool, thanks for making content like this 🙂

  • @ansumanmishra9608
    @ansumanmishra9608 2 ปีที่แล้ว +1

    Great tutorial! Keep up the good work 🙂

  • @volodimiryemshyn715
    @volodimiryemshyn715 2 ปีที่แล้ว

    Nice, thanks you. Lately I had problem with one task. I used resolver but I can't use it in app component, this way will help me. You are really nice person!!!)

  • @MP3D2Y
    @MP3D2Y 2 ปีที่แล้ว

    Nice video! Now I can understand better what is happening behind scenes when using that token privider

  • @mohamedsami5078
    @mohamedsami5078 2 ปีที่แล้ว

    Great content as always.

  • @КонстантинСлавин-т6ъ
    @КонстантинСлавин-т6ъ 2 ปีที่แล้ว

    Great tutorial and very informative, thanks!

  • @alextiger548
    @alextiger548 2 ปีที่แล้ว

    Good stuff. Thank you!

  • @alpinestylecom
    @alpinestylecom 2 ปีที่แล้ว +1

    Great Video. Why not just use a classic resolver for App Component instead?

    • @DecodedFrontend
      @DecodedFrontend  2 ปีที่แล้ว +1

      Thanks for the question! A couple of reasons:
      1) Resolvers will be invoked after the App Component is created.
      2) Resolvers are used when you resolve some data for some certain route but app config usually isn't something that depends on the Router.

  • @1997jugulator
    @1997jugulator 11 หลายเดือนก่อน

    I'm wondering what is the benefit from using asObservable in service?

  • @AlphaFrog1021
    @AlphaFrog1021 2 ปีที่แล้ว

    there aren’t many tutorials on angular SSR

  • @blokche_dev
    @blokche_dev 2 ปีที่แล้ว +1

    👍 Thanks for the valuable content you create and share. Do you plan to dig further into Angular CDK?

    • @DecodedFrontend
      @DecodedFrontend  2 ปีที่แล้ว +1

      Thanks for the feedback! Yes, I plan also the course about CDK :)

  • @jakubdrewniak2668
    @jakubdrewniak2668 ปีที่แล้ว

    that is really nice approach, I didn't know that. but how does it different from making this kind of initialization in AppModule constructor? are there any advantages besides blocking app initialization before data from api is resolved? (of course this is huge advantage, I'm just wondering if there are more?)

  • @oleksandrvorovchenko8674
    @oleksandrvorovchenko8674 2 ปีที่แล้ว

    Great and useful as always! Thanks.

  • @Afdac247
    @Afdac247 2 ปีที่แล้ว

    Also in addition I have a problem with my bundle sizes if you ever worked with three.js you will know that they don't have esm modules, so no tree-shaking and there for the whole 500 kb gets bundled into the final app, I feel that I would have to download the package in a standalone project rebuild it some so their exports can be converted to be available as es import would you like to connect to discuss

  • @Alessandro_Russo
    @Alessandro_Russo 2 ปีที่แล้ว

    When a complete overview about providers?

    • @DecodedFrontend
      @DecodedFrontend  2 ปีที่แล้ว

      What do you mean?

    • @Alessandro_Russo
      @Alessandro_Russo 2 ปีที่แล้ว +1

      An explanation of how providers work. I found it already you did thanks.

  • @isasunasra9910
    @isasunasra9910 2 ปีที่แล้ว

    Hello, first of all, thank you for all the amazing content.
    I wanted to know if there's a way to show some loader while APP_INITIALIZER is doing its job.

  • @_Greenflag_
    @_Greenflag_ ปีที่แล้ว

    Why do you need to convert a behaviourSubject, which is an observable, to an observable using asObservable( ) method ? To use a copy of it, similar to the slice ( ) method on array ?

  • @andrija-official
    @andrija-official 2 ปีที่แล้ว

    Great! Thank you

  • @deniskoliban6664
    @deniskoliban6664 2 ปีที่แล้ว +1

    Great video, thank you Dmytro😃. I think you don't need to use asObservable() if you use pipe() on BS, because pipe returns an observable)

    • @DecodedFrontend
      @DecodedFrontend  2 ปีที่แล้ว +10

      Hi Denis! it is a good point that made me actually investigate this a little bit this question and I found something interesting :) It turns out, that .asObservable() and .pipe() are not completely equivalent. The pipe() on BS returns actually the BehaviorSubject but the trick is that the .pipe() method narrows the return type to Observable, so TypeScript won't allow you to call the next() method though it actually BS. You can hack it using something like that `(this.endpoints.pipe() as any).next('value')` and in such a way emit a new value to the stream. But when you do `(this.endpoints.asObservable() as any).next('value')` you will get an runtime error because asObservable() returns actually the Observable that doesn't have next() method at all :) So... it seems like asObservable() is safer/stricter but while you use TypeScript I think it is ok to use both approaches.

  • @vpeti88
    @vpeti88 2 ปีที่แล้ว

    Thanks for the excellent videos!
    Can you help me? Can you make a video about a plugin architecture with auto discorvery, anyway it's possible in frontend framework?

  • @sechabamothobi2616
    @sechabamothobi2616 ปีที่แล้ว

    Amazing

  • @dimitritsikaridze6220
    @dimitritsikaridze6220 2 ปีที่แล้ว

    Great content as always. video tutorial on angular elements would be nice there isn’t much on youtube that is up to date

  • @beratsulimani9823
    @beratsulimani9823 2 ปีที่แล้ว +1

    Hi Dimitry,
    Thanks for the great content, can APP_INITIALIZER be used for a fully standalone project.

    • @DecodedFrontend
      @DecodedFrontend  2 ปีที่แล้ว

      Do you mean if the project uses standalone components?

    • @beratsulimani9823
      @beratsulimani9823 2 ปีที่แล้ว

      @@DecodedFrontend Yes Dimitry, without ngModules how APP_INITIALIZER can be used?

    • @DecodedFrontend
      @DecodedFrontend  2 ปีที่แล้ว +1

      @@beratsulimani9823 then you have to provide APP_INITIALIZER token in the ``` bootstrapApplication(AppComponent, {
      providers: [
      { provide: APP_INITIALIZER... }
      ]
      }) ```
      like that

    • @DecodedFrontend
      @DecodedFrontend  2 ปีที่แล้ว +2

      it is inside main.ts file

    • @beratsulimani9823
      @beratsulimani9823 2 ปีที่แล้ว

      Thanks a lot Dimitry.

  • @johnlambertasis6620
    @johnlambertasis6620 2 ปีที่แล้ว

    Thank you sir, but can u do a tutorial about MEAN stack like doing something projects such as cloning twitter, facebook or something that can be cloned. Highly appreciated all your videos sir! Keep it up!

  • @exsitewebsolution6803
    @exsitewebsolution6803 ปีที่แล้ว

    hi great tut as usual! Could app_intializer be used to create a webmanifest dynamically? so that we can white label our APP to suit multiple customers.

  • @denysdzhelomanov2633
    @denysdzhelomanov2633 2 ปีที่แล้ว +1

    You don't need to write asObservable function before pipe, pipe func does the same job

    • @DecodedFrontend
      @DecodedFrontend  2 ปีที่แล้ว +1

      Hi Denys! Thanks for your comment :) I already answered a similar comment, so if you don't mind I will just duplicate the answer here: "it is a good point that made me actually investigate this a little bit this question and I found something interesting :) It turns out, that .asObservable() and .pipe() are not completely equivalent. The pipe() on BS returns actually the BehaviorSubject but the trick is that the .pipe() method narrows the return type to Observable, so TypeScript won't allow you to call the next() method though it actually BS. You can hack it using something like that `(this.endpoints.pipe() as any).next('value')` and in such a way emit a new value to the stream. But when you do `(this.endpoints.asObservable() as any).next('value')` you will get an runtime error because asObservable() returns actually the Observable that doesn't have next() method at all. So... it seems like asObservable() is safer/stricter but while you use TypeScript I think it is ok to use both approaches"

  • @shumilus
    @shumilus 2 ปีที่แล้ว +1

    Thanks

  • @sandeepdravidam7989
    @sandeepdravidam7989 2 ปีที่แล้ว

    Great Content n Awesome way of explaining as always. Can u make a video on how to do
    @supercharge/promise-pool npm package like flow in Observable way . It would be great video to learn. It would be challenging for u n great learning for us 😉

  • @MrBan001
    @MrBan001 ปีที่แล้ว

    What do i have to do if i want to use that config in another APP_Initializer?

    • @DecodedFrontend
      @DecodedFrontend  ปีที่แล้ว

      You could save the fetched config in a separate service which is provided for the same injector where APP_Initializer token.

  • @olegshyshka5948
    @olegshyshka5948 2 ปีที่แล้ว

    Thanks for support the Ukraine.

  • @haroldpepete
    @haroldpepete 2 ปีที่แล้ว

    brutal video, if you ever need a liver or heart, let me know

  • @hubert.t4243
    @hubert.t4243 2 ปีที่แล้ว

    Hi Dymitro. To go further up the tree, can I also use PLATFORM_INITIALIZER within the argument of platformBrowserDynamic in the main.ts and this will resolve before anything resolved within the APP_INITIALIZER. Thanks

    • @DecodedFrontend
      @DecodedFrontend  2 ปีที่แล้ว

      Yes, it is. PLATFORM_INITIALIZERs are being executed befor APP_INITIALIZERs :)