feat(core): support APP_INITIALIZER work with observable

[vthinkxie]

close #15088

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• angular.io application / infrastructure changes
• Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

[vthinkxie]

cc @alxhub

[JiaLiPassion]

since toPromise is being deprecated, maybe we need to use something like await lastValueFrom?

[JiaLiPassion]

We also need to update the doc here https://angular.io/guide/dependency-injection-providers

[AndrewKushnir]

Hi @vthinkxie, sorry we didn't have a chance to review your PR sooner.

As Jia mentioned above, the toPromise function is deprecated in RxJS and the lastValueFrom function should be used instead. Could you please update the code to use lastValueFrom function and also rebase this PR and resolve merge conflicts? Once the PR is updated we'll review the changes and provide additional feedback.

Thank you.

[vthinkxie]

Hi @vthinkxie, sorry we didn't have a chance to review your PR sooner.

As Jia mentioned above, the toPromise function is deprecated in RxJS and the lastValueFrom function should be used instead. Could you please update the code to use lastValueFrom function and also rebase this PR and resolve merge conflicts? Once the PR is updated we'll review the changes and provide additional feedback.

Thank you.

Hi @JiaLiPassion @AndrewKushnir
thanks a lot for your review, I have rebased the code onto master.
It seems that lastValueFrom is not available in rxjs 6 yet, maybe we can have another PR when rxjs 7 released?

[AndrewKushnir]

Presubmit.

[AndrewKushnir]

@vthinkxie just want to let you know that tests in Google's codebase went well, the PR was approved by all reviewers and it's ready for merge, so I'm adding it to the merge queue.

Thanks for implementing this feature and addressing all the feedback 👍

[vthinkxie]

Hi @AndrewKushnir and @JoostK

thanks a lot for your review, looking forward to having this feature in the next angular version!

[loxy]

Finally it came to an end! Nearly...
Now I know why it took so much time to include this feature to Angular. It was a pleasure to follow your work! Thank you all guys for supporting such a great tool!!! ❤️ Angular

[SandraVanDijk]

@vthinkxie Could you please tell me how to use this functionality?

I now have this:
provide: APP_INITIALIZER,
useFactory: (authService: AuthService) => () => { return authService.retrieveToken(); },
deps: [AuthService],
multi: true

I have angular version 12.0.0-next.5 installed, but it does not wait until the observable is resolved. The function authService.retrieveToken() does a http get call.

Hope you can give a bit more explanation. Thanks!

[AndrewKushnir]

Hi @SandraVanDijk, could you please create a minimum repro using Stackblitz, so that we can have a look? Note: you could update package versions in the package.json file there (to 12.0.0-next.5) and the necessary packages would be installed. Once the repro is available, please create a new ticket via https://github.com/angular/angular/issues. Thank you.

[SandraVanDijk]

Hi @AndrewKushnir, thanks for your response. I tried to make a Stackblitz as requested, and I updated the packages.json as you told me. After I press save it did install packages and then it says "running ngcc", it doing that now for 2 hours. I never used this tool before, so not sure how to solve this. Is there maybe another way on how to share my code?

[AndrewKushnir]

Is there maybe another way on how to share my code?

You could also try to create a new app (using ng new), update packages in package.json file, add relevant code needed for repro and put it on GitHub as a new repository.

[SandraVanDijk]

Hi @AndrewKushnir, thanks for that tip! While making a new repository I figured out what my mistake was. The function I was calling did not return an observable. So it made total sense APP_INILIALIZER did not wait.

I also found today this documentation: https://dzhavat.github.io/2021/02/25/using-observable-in-app-initializer.html, maybe this helps somebody else.

Thanks for your help!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}