Angular 5延迟加载的应用程序和浏览器导航按钮

Question

I have a big app which is mostly created by composing a lot of lazily loaded modules. My problem is with the browser buttons, whether the user clicks on back , forward or refresh my app crashes.

As far as I've researched, I could somehow catch those events, stop them from propagating and handle the event myself.

Are there any other good solutions for this? What aspects should I take into consideration?

Edit due to comments

I don't think this would be an angular router issue. Thing is, my app programatically changes the router configuration at runtime. Therefore when an user tries to reload or such, he tries to enter a path not yet existant. I could somehow play with the datastore and re-inject the router config before navigation but I don't think that would be wise.

By crashing, I simply mean errors such as couldn't find route 'x\\a\\b' .

The current idea I have now, is to catch the events of the browser buttons and handle them myself, changing the way they work but I'm not sure whether this would even be possible (something like what gmail does I guess).

Answer 1

I also have a tremendous number of routes and to handle route changes i use the routeEvent

import {ActivatedRoute, Event, NavigationEnd, NavigationError, NavigationStart, Router} from '@angular/router';
...
  routerEvent;

  constructor(private router: Router,
              private route: ActivatedRoute) {
    this.routerEvent = router.events.subscribe((event: Event) => {
      if (event instanceof NavigationStart) {
        // Show loading indicator
      }

      if (event instanceof NavigationEnd) {
        // Hide loading indicator
        this.init();
      }

      if (event instanceof NavigationError) {
        // Hide loading indicator
        // Present error to user
      }
    });
  }

As the event names suggest, NavigationStart is triggered when you freshly load your route, NavigationEnd is triggered when the route navigation load is complete and NavigationError when your route fails to load.

It's also a good idea to unsubscribe when nolonger needed.

  ngOnDestroy(): void {
    this.routerEvent.unsubscribe();
  }