Angular 2 router attaches question mark in URL

Question

I am facing a strange issue in my Angular 4 project. I am trying to navigate to a path through code (on button click). I am using router.navigate() method as follows to accomplish the job --

this._router.navigate(["/employeeDetails", selectedEmployee.EmployeeId]);

Where selectedEmployee.EmployeeId is a number. The navigation happens but I am getting a very weird thing in the URL. Initially the URL shows as follows -- http://localhost:4200/?employeeDetails/170 and then the ? sign vanishes from the URL and the required page is loaded.

Can anyone please tell me why the ? sign is coming in the URL. Ideally it should load the respective component for the route "/employeeDetails" without refreshing the page. I also tried the code without / as follows but no help.

this._router.navigate(["/employeeDetails", selectedEmployee.EmployeeId]);

Any help would be appreciated.

Davideas · Accepted Answer · 2019-11-30 18:32:14Z

17

None of the previous answer gives the correct answer even thought some of them work! But all put a patch without acting on the cause of the event we have.

The solution is to set the type="button" to the button element, because by default the form identifies the button as type="submit" if not specified and triggers the submit action.

However thanks because the combination of the answers helped me to find the real cause!

answered Nov 30, 2019 at 18:32

Davideas

3,3162 gold badges37 silver badges51 bronze badges

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

2 Comments

Sanish Joseph Over a year ago

This seems to be a more appropriate solution.

devinvestidor Jun 10 at 22:03

Thanks a lot! I spent a huge time trying to solving...

Atiris · Accepted Answer · 2018-04-13 09:26:03Z

4

To have que question mark in URL with angular 2 (4,5,6) for parameters:

this.router.navigate(['/companie'], { queryParams: { type: 'firstRegister' }});

you will get:

https://myurl/#/companie?type=firstRegister

To have the classic parameter, it is:

this.router.navigate(['/companie', { type: 'firstRegister' }])

you will get:

https://myurl/#/companie;type=firstRegister

edited Apr 13, 2018 at 9:26

Atiris

2,7332 gold badges30 silver badges44 bronze badges

answered Mar 29, 2018 at 15:58

Alan

10.3k4 gold badges59 silver badges75 bronze badges

Comments

thesquaregroot · Accepted Answer · 2017-12-22 13:53:28Z

3

Reason could be a missing action="/formsubmit". When Chrome tries to send a GET request without it this it appends a ?to the current URL.

Try the below for your submit action:

onSubmitAction(event){
    event.preventDefault()
}

It is not an issue with the Angular router

Hope it helps :)

edited Dec 22, 2017 at 13:53

thesquaregroot

1,4521 gold badge23 silver badges39 bronze badges

answered Dec 21, 2017 at 15:57

A.Ojha

543 bronze badges

1 Comment

Amit Anand Over a year ago

Thanks Abhishek, that really helped. I did what you said and it worked out.

Rasmus · Accepted Answer · 2018-10-24 08:17:15Z

3

I had the same problem. Solved it by adding this action to my form tag:

<form action="javascript:void(0)"

answered Oct 24, 2018 at 8:17

Rasmus

1112 silver badges4 bronze badges

Comments

Gregor Doroschenko · Accepted Answer · 2017-12-21 15:09:02Z

1

Be sure that your injected _router: Router in your components constructor like this:

constructor(private _router: Router) {}

Change this:

this._router.navigate(["/employeeDetails", selectedEmployee.EmployeeId]);

to this:

this._router.navigate(['/employeeDetails', selectedEmployee.EmployeeId]);

or this:

this._router.navigate(['/employeeDetails/' + selectedEmployee.EmployeeId]);

In your routing file you should have something like this:

const routes: Routes = [
  ...
  { path: 'employeeDetails/:id', component: YourComponent },
  ...
];

answered Dec 21, 2017 at 15:09

Gregor Doroschenko

11.7k6 gold badges28 silver badges37 bronze badges

Collectives™ on Stack Overflow

Angular 2 router attaches question mark in URL

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related