Load route after data is set in Angular 4

Question

In my application, I have some data that is common throughout the application. But the data is populated after the view loads. For example data such as user-settings, profile etc. I know we can use resolve for loading data before the view loads, but I cant add resolve to all the routes. So when a specific route is refreshed the data is not available or the response from the server comes after the view loads.

How can this be done?

Below is the sample code of what I'm trying to achieve. in App.Component.ts if the token exists then redirect to the requested page else redirect to login.

if (token)
{ 
   this.commonServ.loadAppData();
   this._router.navigate([(path == 'login' || path == '') ? 'test' : path]);                     
}
else
   this._router.navigate(['login']);

The load data method hits a few API's and loads data to models.

for example:

public loadAppData() {

        this.getUserSettings().then(settings => {
            if (settings) {
                //Do Something
            }
        }, error => {

            });



        this.setUserProfile().then(settings => {
          //Do something

        });

    }

The data from setUserProfile comes after the view has loaded. How can this be done?

Thanks!

DeborahK · Accepted Answer · 2017-12-29 07:18:04Z

1

Define a "shell" component that is loaded before any of the other components and add the resolver to it.

App Template

<router-outlet></router-outlet>

Shell Component Template

<pm-menu></pm-menu>

<div class='container'>
    <router-outlet></router-outlet>
</div>

App Routing Module

@NgModule({
    imports: [
        RouterModule.forRoot([
            {
                path: '',
                component: ShellComponent,
                resolve: { data: DataResolver }. // <--- HERE
                children: [
                    { path: 'welcome', component: WelcomeComponent },
                    {
                        path: 'products',
                        canActivate: [AuthGuard],
                        loadChildren: './products/product.module#ProductModule'
                    },
                    { path: '', redirectTo: 'welcome', pathMatch: 'full' },
                ]
            },
            { path: '**', component: PageNotFoundComponent }
        ])
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { }

answered Dec 29, 2017 at 7:18

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

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

3 Comments

Shruti Nair Over a year ago

I have created a shell component.but i'm not able to undesrtand how to make the changes to routing.My app had different modules and each module has its own routing file as well.So in the app routing i have the below routes const appRoutes: Routes = [ { path: '', redirectTo: '/login', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent }, ];

DeborahK Over a year ago

See the above example with how the products are loaded using loadChildren. You can see the complete example here: github.com/DeborahK/Angular-Communication

Dima Over a year ago

Upvote for saving our time with a "// <--- HERE" marker - really nice practice.

Collectives™ on Stack Overflow

Load route after data is set in Angular 4

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related