Angular 5 Query Parameters Disappear

Question

When I navigate to a page with query parameters in my Angular application, the parameters end up disappearing.

For example, if I go here:

http://example.com:8080/TestComponent?OtherName=foo

If reroutes me to here:

http://example.com:8080/TestComponent

Thus, since the query parameters get erased, my subscription to ActivatedRoute returns nothing. This is my routing:

import { Routes } from '@angular/router';
import { TestComponent, PageNotFoundComponent } from './exports/components';

export const ROUTES: Routes = [
    {
        path: 'TestComponent',
        component: TestComponent
    },
    {
        path: '**',
        component: PageNotFoundComponent
    }
];

Subscription (route is an instance of ActivatedRoute):

this.route.queryParams.subscribe((params: Params) => {
    if (params && Object.keys(params).length > 0) {
        const OTHER_NAME = params['OtherName'];
    }
});

Even if I remove the wildcard path, it still removes the parameters from the URL; therefore, it never goes inside the the above if statement. How can I prevent the query parameter from disappearing?

I just type in http://example.com:8080/TestComponent?OtherName=foo into the address bar. Then the Routes array takes over and sends me to the TestComponent html. — o.o
– o.o, Commented May 29, 2018 at 21:15
The problem is discussed in this question. There are solutions when navigating with routerlink or with Router.navigate but not for the initial URL or when typing the URL in the address bar (as far as I know). There is a feature request to allow a global setting to keep the query parameters. — Martin Parenteau
– Martin Parenteau, Commented May 29, 2018 at 21:24
How is this not a bigger issue?? This seems like an issue that would be fairly common...I'm experiencing something very similar. For me, I have a query before a hash, like so: example.com/?data=123#/home. When I go to this route, the query gets removed. Very frustrating that I can't find a solution for this. I need the query to track a Google Analytics campaign. — awebdev
– awebdev, Commented Mar 8, 2019 at 21:33

Mesut KAYA · Accepted Answer · 2020-06-02 10:12:08Z

2

This is can be an exact solution for this, but I found an approximate solution.

url = localhost:4200/#/test?id=1234

use auth-guard-service and CanActivate your page.

1.Angular routing

{ path: 'test', component: TestComponent, canActivate: [AuthGuardService]}

2.AuthGuardService

@Injectable({ providedIn: 'root' })
export class AuthGuardService implements CanActivate {

constructor(private app: ApplicationService) {
    // window.location.href => gives you exact url (localhost:4200/#/test?id=1234).
    // you can parse url like this.

    id = getUrlParameterByName('id', window.location.href);
}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
   const curPage = route.url[0].path;
   if('test' === curPage) { return true; }
   else {
      // your decision...
   }
}
getUrlParameterByName(name: string, url?: any) {
    if (!url) { url = window.location.href; }
    name = name.replace(/[\[\]]/g, '\\$&');
    const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
    const results = regex.exec(url);
    if (!results) { return null; }
    if (!results[2]) { return ''; }
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

answered Jun 2, 2020 at 10:12

Mesut KAYA

657 bronze badges

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

2 Comments

JayC Over a year ago

You have example with url = localhost:4200/#/test?id=1234. What if the url is localhost:4200/?id=1234#/test/. How would you proceed

Mesut KAYA Over a year ago

i showed here to how to capture url before disappearing, after that you can customize url parsing algorithm for your case.

Collectives™ on Stack Overflow

Angular 5 Query Parameters Disappear

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related