Angular 2 different components with same route

by

So i was finally able to do this.
The thing is Angular uses first match policy, so we need to match routes in a guard-type way, to be sure that right route with right module will be matched.

First thing we need to add custom matchers for our routes which will only match them on conditions that we want (user type for example).

{
 path: 'samePath',
 matcher: firstMatcher,
 loadChildren: '../first/first.module#FirstModule'
},
{
 path: 'samePath',
 matcher: secondMatcher,
 loadChildren: '../second/second.module#SecondModule'
}

And matchers code is something like this:
In here i injected AuthService service from AppModule, and checked users type with it. So routes can be matched according to users type.

import { applicationInjector } from '../../main';

export function firstMatcher (url: UrlSegment[]) {
  const auth =  applicationInjector.get(AuthService);
  return auth.isUserType('admin') ? ({consumed: [url[0]]}) : null;
}

And now only thing we need is to create applicationInjector in our main module, so we could inject service in our matcher-function;

export let applicationInjector: Injector;

platformBrowserDynamic().bootstrapModule(AppModule).then((componentRef) => {
  applicationInjector = componentRef.injector;
})

More Related Contents:

  1. Angular 2.0 router not working on reloading the browser
  2. How to detect a route change in Angular?
  3. Angular 2: 404 error occur when I refresh through the browser [duplicate]
  4. How do I create a singleton service in Angular 2?
  5. Warn user of unsaved changes before leaving page
  6. ‘router-outlet’ is not a known element
  7. Passing data into “router-outlet” child components
  8. Angular 2 unit testing components with routerLink
  9. How to pass query parameters with a routerLink
  10. How can I conditionally disable the routerLink attribute?
  11. Dynamic routing based on external data
  12. How to switch layouts in Angular2
  13. How do I detect user navigating back in Angular2?
  14. Using Resolve In Angular2 Routes
  15. Angular2 – Interaction between components using a service
  16. Is Angular 2’s Router broken when using HTML5 routes? [duplicate]
  17. Angular2 router.navigate refresh page
  18. Angular 2 passing object via route params possible?
  19. Lazy Loading BrowserModule has already been loaded
  20. Angular2 routing / deep linking not working with Apache 404
  21. Redirect to a different component inside @CanActivate in Angular2
  22. Angular 2 – Routing – CanActivate work with Observable
  23. Want to prevent Component recreation while routing in Angular 2
  24. New Angular2 router configuration
  25. Angular routerLink does not navigate to the corresponding component
  26. How to get parameter on Angular2 route in Angular way?
  27. angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable
  28. Custom encoding for urls using Angular 2 Router (using a + sign in place of a space)
  29. Angular2 router, get route data from url, to display breadcrumbs
  30. Share data between components using a service in Angular2

Leave a Comment