Angular2 Routing with parameters fails

Question

I am having troubles (all sorts of errors in very unexpected places) and my best guess is that it happens because of the way routing is set up.

This is my app-routing.module.ts

const appRoutes: Routes = [
  { path: 'calendar', component: CalendarComponent, canActivate: [AuthGuard] },
  { path: 'calendar/:urlString', component: CalendarComponent, canActivate: [AuthGuard] },
  { path: 'myprofile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'profiles', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'locations', component: LocationComponent, canActivate: [AuthGuard] },
  { path: 'login', component: AuthComponent },
  { path: '',   redirectTo: '/login', pathMatch: 'full' }
];

@NgModule({
  imports: [ RouterModule.forRoot(appRoutes) ],
  exports: [ RouterModule ]
})

Then, in CalendarComponent.ts I have this piece of code:

 imports (...)

 constructor(
   private activatedRoute: ActivatedRoute,
 ){
 }

 public ngOnInit(): void {
    this.activatedRoute.params.subscribe((params: Params) => {
        this.resolveURLParams(params);
    });
  }

  public resolveURLParams( params ): void {

    // do stuff based on params

  }

Anyway, just a half year ago (some RC @Angular2) I could start the app by typing any of these directly into the browser

localhost:3000,

localhost:3000/calendar or

localhost:3000/calendar/2017-05-27

and would get expected results. Now I have to start from localhost:3000, so that the app routes me through ../login --> ../calendar --> ../calendar/2017-05-27, otherwise I get all sorts of troubles, like Cannot read property subscribe of null or Cannot activate already activated outlet.

I guess, the routing has been updated and I am lagging behind. Any help on this, please?

It would be helpful for you to actually list the errors you're seeing. — Muirik
– Muirik, Commented May 27, 2017 at 20:51
If I start from /calendar, I get Error: Uncaught (in promise): Error: Cannot activate an already activated outlet. If I start from /calendar/2017-05 I get Error: Uncaught (in promise): TypeError: Cannot read property 'subscribe' of null at resolveUrlParams function — pop
– pop, Commented May 27, 2017 at 20:57
Mhm, i cannot reproduce your kind of error. Can you provide a runnable plnkr sample? — Batajus
– Batajus, Commented May 27, 2017 at 21:18

Aravind · Accepted Answer · 2017-05-27 21:21:31Z

1

There might be a time delay in subscribing to the route params, I suggest you to use non-Observable option using the service ActivatedRouteSnapshot

Inject the service ActivatedRouteSnapshot and get the params using

this.activatedRoute.route.snapshot.params.urlString

Note: use pathMatch:full for the definition

{ path: 'calendar', component: CalendarComponent, canActivate: [AuthGuard] , pathMatch:'full'},

as your route will fall through in the order of definition and tries to match the param one with the above

answered May 27, 2017 at 21:21

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

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

Comments

pop · Accepted Answer · 2017-05-29 07:25:46Z

0

This is actually a bummer, but there was no problem with the way routes and ActivatedRoute subscription worked. The problem was with the AuthGuard I was using, which was broken. Now that I've fixed the guard, all the problems went away. So, thanks for trying to help.

answered May 29, 2017 at 7:25

pop

3,7823 gold badges30 silver badges50 bronze badges

Collectives™ on Stack Overflow

Angular2 Routing with parameters fails

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related