Parallel (Asynchronous Non Blocking) Routing In Angular 2/4

Question

The application has a page with 2 to 3 category buttons. Basically, button click will pull the list of items in each category, the page should be shown once API fetched data is available.

I have designed angular 2 app routes with resolve API calls and I should not block the entire page with spinner when a page loads as we are migrating the application functionality to angular 4.

When a user clicks on one category, if the response is delayed he may click the other category. When he navigates back he would be expecting the data to be loaded in previously clicked category but Angular 2/4 cancels the route due to Navigation ID does not match with the current route

To have a better understanding, kindly see the plnkr link below. http://embed.plnkr.co/UiyhZWCl63Tfq41WY48q/

Click on the planet and people concurrently, observe that only one of the section loads and other section doesn't load the data. If you do inspect you can see NavigationCancel event is thrown

@Hurix the plnkr is throwing error 'no provider for ApplicationRef' — Dhyey, Jul 03 '17 at 06:38
I think because when using resolve, it means we need to get something before navigating. So If you navigate to another route before the current route get resolve, it will be cancel. The answer from @trungk18 is also what I am suggesting — Sasuke91, Jul 05 '17 at 09:47
@Sasuke91 I agree with you. Unfortunately, my application is Multi-Page Application. Since the `Angular` provides named outlet, Hence the route should be allowed asynchronously, these are from the different outlet. — newstackoverflowuser5555, Jul 07 '17 at 01:25
Agree, so that we will need another solution to see If Angular has supported or not. I am also curious about this feature. — Sasuke91, Jul 07 '17 at 02:36

trungk18 · Answer 1 · 2017-07-06T09:39:52.000

Not sure If am qualified to explain how resolver works for router on Angular 2, but just went through again their document.

In summary, you want to delay rendering the routed component until all necessary data have been fetched.

You need a resolver.

So as my understanding, the resolver will help in case you want to switch the view totally and fetch the data before switching. So the data is ready the moment the route is activated. This also allows you to handle errors before routing to the component. Think of master-detail layout whereby you click into an item, it navigates to a detail view. There's no point in navigating to a detail for an id that doesn't have a record and it's better to send the user back to the list.

Your case is not a common case when you want to display different outlet base on the route. And you want the moment you click into people/planet, it will render the component directly and start fetching the data. You might want to show the placeholder 'Loading...' as well. So I suggested to use ngOnInit hook for that purpose.

Working plunker: https://embed.plnkr.co/rSEjb46WI09PsOtClJn5/

@trunkgk18 As I said, the application design can't be changed as its an existing app and nearing production. Our application is multi-tab/page application where a user will click multiple links and expect to be loaded in the background. Angular could've supported for asynchronous routes for named outlets at least. — newstackoverflowuser5555, Jul 07 '17 at 01:35
Yeah, I understand. If it is the case, I am also waiting for the answer from the guys here. — trungk18, Jul 07 '17 at 01:46

Parallel (Asynchronous Non Blocking) Routing In Angular 2/4

1 Answers1