Angular 2 default route with parameter

Question

Here are my routes defined:

import {RouteDefinition} from '@angular/router-deprecated';
import {HomeComponent} from './home/home.component';
import {TodolistComponent} from './todolist/todolist.component';
import {RegistrationComponent} from './registration/registration.component';


export var APP_ROUTES: RouteDefinition[] = [
    { path: '/home', name: 'Home', component: HomeComponent },
    { path: '/registration', name: 'Registration', component: RegistrationComponent },
    { path: '/todolist', name: 'Todolist', component: TodolistComponent },
    { path: '/mac/:id', name: 'Mac', component: HomeComponent, useAsDefault: true}
];

Now I want to call route mac/:id directly in order to get mac number from the device.

On localhost it runs ok, but on the server when I try to run:

http://register.ampio.com.pl/mac/123

It does not show either error or my application, only 404.

How can I pass the parameter to my default route?

EDIT: It does not matter which route do I choose. I.E. register does not work, even though on the localhost everything is ok. I tried it on the two different servers.

I added the slash. I noticed that it does not matter which route do I choose. If I go to register I also get 404. Only the default route works on the server, I can navigate to the other ones only from the Angular App, writing them in the URL does not work. — Michael S
– Michael S, Commented Jul 1, 2016 at 16:09
Is it possible that the location strategy is set to use hash? — JiroDan
– JiroDan, Commented Jul 1, 2016 at 16:14
@JiroDan it was not set to use hash, but I tried to set it. With hash it works, no idea why. Thank You for leading me to that path. — Michael S
– Michael S, Commented Jul 1, 2016 at 19:40

Günter Zöchbauer · Accepted Answer · 2016-07-04 04:50:56Z

1

If you are trying to access myserver.org/mac/12 then your server tries to get index.html file placed in /mac/12 folder. Neither the file nor the folder exists there

In your localhost you are probably using lite-server which is specifically build for Single Page Apps i.e. to handle routing properly. For example, for /mac/:id lite-server will redirect to index.html and then give the path to Angular to route it property

You have configure your server to handle the routes. Basically you need to capture anything that is sent to server and redirect it to index.html and pass the path info to index.html. Each server has its own configuration syntax

For nginx you might want to add something like

location / {
       try_files $uri$args $uri$args/ $uri/ /index.html =404;
}

edited Jul 4, 2016 at 4:50

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

answered Jul 4, 2016 at 2:09

Siraj

6874 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

Angular 2 default route with parameter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related