Custom router matching on entire URL in Angular

Question

I have an old app with url formatted this way

localhost/#segment=12

I need to catch these in the new app (angular 7) and redirect to

segment/:id

Really wanted a matcher+redirect in routes to work but matcher takes UrlSegment, not entire url, so all i get is an empty array to work with.

Tried catch all and redirect in controller but id is lost.

The router malformedUriErrorHandler doesn't trigger.

Running out of ideas.

@Adam it contains UrlSegments, in my case I only get "segment", the id is lost. — tallberg
– tallberg, Commented Oct 22, 2019 at 8:50

tallberg · Accepted Answer · 2019-10-22 13:48:34Z

2

Got it working using route matcher and window.location. Improvements?

const appRoutes: Routes = [
  { matcher: mySegmentMatcher, redirectTo: 'segment/:id' },
  { path: 'segment/:id', component: SegmentComponent },
];

function mySegmentMatcher(url: UrlSegment[]) {
  const test = /#segment=(\d+)$/.exec(location.href);
  if(test && test[1]) {
    const id = test[1];
    url = [new UrlSegment('segment', {} )];
    return { 
      consumed: url,
      posParams: {'id': new UrlSegment(id, {}) }
    }
  }
  return null; 
}

answered Oct 22, 2019 at 13:48

tallberg

4794 silver badges13 bronze badges

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

Comments

Rajesh · Accepted Answer · 2019-10-22 10:07:56Z

0

Give a try

import { Router, NavigationStart } from '@angular/router';

constructor(private router: Router) {
router.events.subscribe((event) => {
   if(event instanceof NavigationStart) {
    {
       if(event.url.indexOf('segment')>-1)
     {
        let urlSegment = decodeURIComponent(event.url); 
       //do your split stuff and pass parameters to navigate method
       this.router.navigate(['/segment',12]);
     }
    }
}
});}

answered Oct 22, 2019 at 10:07

Rajesh

3033 silver badges13 bronze badges

2 Comments

tallberg Over a year ago

Nope, NavigationStart only triggers when navigating inside the app. I'm getting ActivationEnd as first event and no trace of the original url anywhere.

tallberg Over a year ago

Ok, now I get the events rolling in but the url has already been shopped up and destroyed.

Collectives™ on Stack Overflow

Custom router matching on entire URL in Angular

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related