Angular routing to redirect on new server with query string

Question

Can someone help me understand how I can redirect an Angular state to a new URL with the query string parameters same as old ones?

Example

If my Angular application is on http://example.com, then all the requests to http://example.com/dashboard?id=123&view=test should be redirected to http://test.com/dashboard?id=123&view=test.

How should I define my state using the following code?

.state('dashboard', { 
    url: 'domain.com/dashboard', 
    controller: 'DashboardCtrl' 
})

I know few tricks to transfer the state to controller and then handle it from there. But I'm wondering if there's a way to redirect it through the router only to avoid repetitive code in different controllers?

khichar.anil · Accepted Answer · 2017-10-31 22:57:40Z

4

A. Angular 1

1. main.route.js:

.state('stateName', {
  url: 'dashboard',
  controller: ['$location', '$window', function ($location, $window) {
    var url = 'domainB.com';
    url += $location.$$url;
    $window.location.href = url;
  }]
})

B. Angular2/4

1. app.module.ts: Declare a custom provider like:

@NgModule({
  providers: [
    {
      provide: 'externalUrlResolver',
      useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
        window.location.href = `${route.data.externalUrl}${state.url}`;
      }
    }
  ]
})

2. app-routing.module.ts: Now using the custom provider we can redirect externally.

const APP_ROUTES: Routes = [
  { path: 'dashboard', component: AnyComponent,
    pathMatch: 'prefix',
    resolve: { url: 'externalUrlResolver' },
    data: { externalUrl: 'domainB.com'}
  }
]

Input

http://domainA.com/dashboard?view=list&id=123&visible=yes

This will be redirected to:

http://domainB.com/dashboard?view=list&id=123&visible=yes

edited Oct 31, 2017 at 22:57

answered Oct 31, 2017 at 19:45

khichar.anil

5,1141 gold badge27 silver badges21 bronze badges

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

1 Comment

Taco Over a year ago

Thanks @khichar.anil. This works! Accepted your answer.

BeetleJuice · Accepted Answer · 2017-10-31 19:10:25Z

1

I think the best solution for this is not in Angular -- which runs in the browser after the code has already been loaded -- but on the server. If you're using Apache, add an .htaccess rule that will redirect all requests for example.com to test.com.

Create a file named .htaccess and place it in the application root directory:

Options +FollowSymLinks
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^(.*)$ http://test.com/$1 [R=302,L]

If you want the redirect to be permanent (meaning browsers and search engines will remember and won't bother going to the old domain), change 302 to 301

If this isn't a solution, you could use a CanActivateChild guard to indicate code that should be run before a route loads. Add it to the routing configuration for your base route and this code will always run before components etc... are initialized. Within it, you can read the current route and redirect the user with standard JavaScript to the new domain.

edited Oct 31, 2017 at 19:10

answered Oct 31, 2017 at 19:03

BeetleJuice

41.1k24 gold badges120 silver badges181 bronze badges

3 Comments

Taco Over a year ago

I know about this server level settings but our application is on cluster right now which requires application level routing. Server is just a headless crap here.

BeetleJuice Over a year ago

@NitinKumar I've updated my answer with another idea

Taco Over a year ago

I was looking for the answer which @khichar.anil suggested above. Thanks for the answers though. Giving upvote as well in case anyone looking for server level handling unlike me.

Collectives™ on Stack Overflow

Angular routing to redirect on new server with query string

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related