TAGS :Viewed: 10 - Published at: a few seconds ago

[ Angular 2 default route with parameter ]

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:


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.

Answer 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;