angular2 & lite server dot in url leads to 404 not found

Question

I'm using Angular2 Beta 14 and calling a URL with a "dot" in it leads to a 404 not found error from the lite server which is 2.2.0.

This is the URL I'm calling:

http://localhost:3000/confirmuser/token/eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjYsInVzZXJOYW1lIjoiYXNkZmFzQGNlZC5saSJ9.PMzNWp8mbUKbSAiOqhOqjhZUYNejXY3pIQueBkc8_2E

The router path in app.component.ts looks like this:

{path: '/confirmuser/token/:token', name: 'ConfirmUser', component: ConfirmUserComponent}

The Chrome console shows this:

Failed to load resource: the server responded with a status of 404 (Not Found)

Ant the Lite Server:

[1] 16.04.13 15:57:13 404 GET /confirmuser/token/eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjYsInVzZXJOYW1lIjoiYXNkZmFzQGNlZC5saSJ9.PMzNWp8mbUKbSAiOqhOqjhZUYNejXY3pIQueBkc8_2E

When ever I call the url without a "dot", the page gets loaded correctly.

My aim here is, to confirm a user sign up. He receives an email with an URL he has to confirm. Using a JWT in this (and other cases) is habit I've been using.

Now I doubt this is an Angular issue, I believe this is a lite server issue.

Anyone experience with this? Thanks

Answer 1

I found a suitable workaround for this issue. Basically I'm getting rid of the path parameter ":token" and replacing it by a query parameter

In the app.component.ts the new path now looks like this:

{path: '/confirmuser', name: 'ConfirmUser', component: ConfirmUserComponent}

An the URL like this:

http://localhost:3000/confirmuser?token=eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjYsInVzZXJOYW1lIjoiYXNkZmFzQGNlZC5saSJ9.PMzNWp8mbUKbSAiOqhOqjhZUYNejXY3pIQueBkc8_2E

In the component that handles this request I can continue to call route params as I was used to. So nothing to change there:

constructor(params: RouteParams){
  this.token = params.get('token')
...

Answer 2

This question has been answered in https://stackoverflow.com/a/36283859/1465640@

But it can be summarized with dots doesn't work in urls unless you do some work on the lite-server config.

Answer 3

If you are using webpack then you need to change the config to make it working. Please make the change in webpack dev server config file

historyApiFallback: {
      disableDotRule: true
    },