Angular2 run Guard after another guard resolved

Angular2 run Guard after another guard resolved

In my project I have two guards. AuthGuard and PermissionGuard. I need to first AuthGuard runs and when it resolved and if true the permissionGuard begins but now this guards are running parallel and permissionGuard not working well. the way I used for this issue is that I called the AuthGuard CanActivate method in Permission guard but I think there is a quite better way for doing this. 

Solutions/Answers:

Solution 1:

The best way I’ve seen it done is to expose the router guards on child routes. Here is a working example.

{
path:'', canActivate:[AuthorizationService1],
children: [
{
path:'', canActivate:[AuthorizationService2],component: HomeComponent
}
]
}

References

Creating a Master/Detail app in Plunker with Ionic 2

Creating a Master/Detail app in Plunker with Ionic 2

Building on from some good standard Ionic 2 plunkers here http://plnkr.co/edit/ZsoPeE?p=preview and 
http://plnkr.co/edit/WBeRRJyYucLwvckjh5W7?p=preview
Can you help tweak my Master/Detail Plunker? I thought I had all the parts in place but missing something as it produces a white screen.
Here is my attempt at a Master/Detail plunk

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';

import { AppComponent } from './app.component';
import { HomePage } from '../pages/home/home';
import { MasterPage } from '../pages/master/master';
import { DetailPage } from '../pages/detail/detail';

import { Sheetsu } from '../providers/sheetsu';

@NgModule({
  imports: [ IonicModule.forRoot(AppComponent) ],
  declarations: [ AppComponent, HomePage, MasterPage, DetailPage],
  entryComponents: [ HomePage, MasterPage, DetailPage ],
  bootstrap: [ IonicApp ],
  providers: [ Sheetsu ]
})
export class AppModule { }

Solutions/Answers:

Solution 1:

Fixed Plunker: http://plnkr.co/edit/5V36C9QHYDGBIqSIfBUl?p=preview

You had several mistakes

1) import { Sheetsu } from '../providers/sheetsu'; <- your file is called Sheetsu, with a capital S

2) Your relative paths are wrong, you’ve made it complicated for yourself by putting pages: 'pages', inside your config, and for example:

import { MasterPage } from '../pages/master/master';

inside HomePage should be

import { MasterPage } from '../master/master';

3) You are using "module": "commonjs", but not taking advantage of relative html urls:

templateUrl: 'pages/master/master.html', -> `templateUrl: './master.html',`

with moduleId: module.id inside your @Component

4) Your button click return this.http.get('../assets/sheetsu.json') should be return this.http.get('./assets/sheetsu.json')

References