Angular cancels HttpRequest send from APP_INITIALIZER after implementing Lazy Loading

Question

I work on an Angular (currently v7) application which is using the APP_INITIALIZER to check if the user is logged in. The code is pretty straight-forward, I add the APP_INITIALIZER

@NgModule({
...,
providers: [
  ...,
  {
    provide: APP_INITIALIZER,
    useFactory: CheckLoginFactory,
    deps: [Initialization, AuthService, ObservableState],
    multi: true
  }
]

using this factory:

export function CheckLoginFactory(
  init: any,
  auth: AuthService,
  oss: ObservableState
) {
  const confirmLogin = auth
    .confirmLogin()
    .pipe(catchError(val => of(undefined)));

  return () => confirmLogin.toPromise();
}

and the confirmLogin-function checks whether the user is logged in

confirmLogin(): Observable<User> {
  return this.get('authentication/login').pipe(
    map(response => plainToClass(User, response as Object))
  );
}

So far so simple, this code has been working for the last year. Now I restructured the app and implemented lazy loading for all subpages of the app and now this code does not work anymore. The http-request send from confirmLogin always shows up as canceled in the dev-tools and the factory runs into the .pipe(catchError(val => of(undefined)));.

Is there anything that is different on how Angular handles the APP_INITIALIZER in apps using / not using lazy loading?

Paul · Accepted Answer · 2019-12-16 13:37:46Z

0

Are you lazy loading modules? If so, you have to make sure to provide the initializer in each module. This question answers the question nicely.

Angular Does APP_INITIALIZER work inside of lazy loaded modules

answered Dec 16, 2019 at 13:37

Paul

4963 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

tommueller Over a year ago

Yes I am lazy loading modules, but if I understand the linked answer correctly I do not have to supply the initializer in each module, but what it says is, that it will be loaded from the main.module before the lazy loaded modules are loaded. The function is executed, but then somehow cancels the http-request. The problem is not, that it does not fire at all.

Paul Over a year ago

@tommueller Sorry for the late reply. How does it cancel the http-request? Do you have an interceptor somewhere in your code? Or do you destroy the view before the request is done?

tommueller Over a year ago

That is exactly what I do not know :)

tommueller Over a year ago

Thanks, I managed to fix it myself now. See my answer if you are interested!

tommueller · Accepted Answer · 2019-12-18 13:59:06Z

0

I managed to fix this by cleaning up the code. It's still not clear to me, what fixed it though. Apparently some of the additional dependencies broke the code ... So all I did was cleaning up the APP_INITIALIZER section in the providers section to just one dependency:

{
  provide: APP_INITIALIZER,
  useFactory: CheckLoginFactory,
  deps: [AuthService],
  multi: true
}

Angular apparently automatically knows which child-dependencies AuthService has, so they don't need to be specified explicitly again here.

answered Dec 18, 2019 at 13:59

tommueller

2,5263 gold badges33 silver badges50 bronze badges

Collectives™ on Stack Overflow

Angular cancels HttpRequest send from APP_INITIALIZER after implementing Lazy Loading

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related