1

I have lazy loaded components and I want to show preloader when we loading component stuff/thirdparty library etc from server.

How I try to do this: Create component with show/hide loader possibility and I want to show it when someone try to change route (before component loading) ans hide it when component is loaded.

Also I want to avoid including per each component a loader service and manyally hide loader on ngOnInit (for example). Now I try make it on top level (app.js)

But I don't know how, because

First: Don't know how correctly detect attempt to change router and show loader (now i make it very ugly - just fire event when we click on navigation link....and it's bad because when I try to navigate via programming methods - loaders will not be showed). Maybe some way exist for detect changes before router render new component?

I saw: topic 1 topic 2 router.subscribe(path => {/hide loader action/})

not working correctly because
1: it works after component rendering and fires only when all component stuff will be loaded, I want to show loader before loading. 2: when componnet is loaded and we try to navigate between components and return on loaded component - this subscription will be fired immediately. So it's mean that after we returned to a laded component first subscribtion will be fired nad after that - loader will be showed :) and never hidden. I don't know why (because on some component router.next not be fired and unsubscription not will be triggered

there is my code

private showPreloader() {
    let a;
    this._loadingService.controlledLoaderShow();

    a = this._router.subscribe((val) => {
      console.log("Hide preloader");
      this._loadingService.controlledLoaderHide();

      a.unsubscribe();
    },
      (err) => {console.log(`Error in app.ts showPrealoder ${err}`)});



  }
Community
  • 1
  • 1
Velidan
  • 5,526
  • 10
  • 48
  • 86

1 Answers1

0

I haven't tried it for your purpose but I think CanActivate is worth a try. It is called before a route is activated.

For how to pass data to a shared service see https://github.com/angular/angular/issues/4112 (This will or has already been changed in the router of Angulars RC.x versions).

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Hi Gunter! Thanks a lot for your answer, but could you please show some example with CanActivate? Because I saw it and tryed to use it but it's not works for me, maybe I do something wrong. _@CanActivate((next, previous) => { console.log(next, previous); }) export MyClass ......._ nothing show to me, not current or previous route – Velidan May 06 '16 at 11:32
  • For what Angular2 version? – Günter Zöchbauer May 06 '16 at 11:36
  • It should work in `beta.x` but I wasn't able to figure out how to use it in `rc.1` – Günter Zöchbauer May 06 '16 at 11:42
  • http://plnkr.co/edit/Bim8OGO7oddxBaa26WzR?p=preview (from the discussion in the issue linked in my answer) See `src/Parent.ts`. They use a workaround to make DI available inside `@CanActivate()`. This should be improved in rc.1 but as mentioned I haven't yet figured out how to use it here. – Günter Zöchbauer May 06 '16 at 11:45
  • 1
    Thanks for your answer Gunter. I will try to do this. But i still don't understand where we use in is-logged.ts _export const isLoggedIn = (to: ComponentInstruction, from: ComponentInstruction, target = ['/Home']) => {_ this parameters - _to_ and _from_ Locks like those parameters never used – Velidan May 06 '16 at 12:19
  • Now I see. This CanActivate works only for CHILD components. So in each component we should manually to enable and disable loader.. We can detect router change attempt in app.ts? for avoid including loading service in each component? It's will be great) also this decorator works only when all stuff of our component will be loaded (by a second from we click on navigation and all stuff in loading process - nothing happened). So we can't enable loader – Velidan May 06 '16 at 12:26
  • As mentioned this will work differently in rc.x. I have yet to investigate myself deeper. It doesn't look this was already implemented in the new router. – Günter Zöchbauer May 06 '16 at 12:31
  • Understand you :) Thanks for your time Gunter. Have a good day! – Velidan May 06 '16 at 12:39
  • Aha, it works in 0.17 version. Finished update angular and looks like _next_ are next instruction :) Thanks Gunter! – Velidan May 06 '16 at 15:06
  • Lazy loading for the new router was merged 2 days ago https://github.com/angular/angular/pull/8451 – Günter Zöchbauer May 06 '16 at 17:34