Angular2 when I refresh the page, not the page loads in router params

Question

My application loads normally in all routers but when I use router with params the application can not loaded.

example: localhost:3000/usersid/:id

the router code is :

const appRoutes: Routes = [
  { path: 'user', component: UserComponent },
  { path: 'info', component: InfoComponent },
  { path: 'users', component: UsersComponent },
  { path: 'usersid/:id', component: UsersIdComponent },
  { path: '', component: MainComponent },
  { path: '**', component: MainComponent }
];

and the component of the params router

import{Component} from '@angular/core'
import { ActivatedRoute } from '@angular/router';
import * as Datastore from 'nedb';

@Component({
  moduleId : module.id ,
  templateUrl : 'userid.component.html' ,
  styles : [`
    .SamRouter {
        overflow-y: auto;
    }
    `]
})

export class UsersIdComponent {
  id: any;
  private sub: any;
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
      this.sub = this.route.params.subscribe( params  => {
      // this.id = +params['id']; // (+) converts string 'id' to a number
      this.id = params['id'] || 0 ;

        // In a real app: dispatch action to load the details here.
     });
        console.log(  this.id )
   }
   ngOnDestroy() {
    //  this.sub.unsubscribe();
    }

}

Error Message:

http://localhost:3000/users/node_modules/bootstrap/dist/js/b‌ootstrap.min.js Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/users/styles.css Failed to load resource: the server responded with a status of 404 (Not Found)

Your url says : localhost:3000/users/:id but your configuration is path: 'usersid/:id'. Maybe check that. — sohel101091
ex : when i am in this link localhost:3000/users/0gR3WBwbPeE7EmAq the page it loading no problem ...... and when a click F5 the page can not loading — SAMSOL

Avi Avi · Accepted Answer · 2017-01-27T20:18:32

It depends what server you are using. you need to configure your server to go to index.html whenever the route is not exists. while you press F5 the server search for a file that isn't exists, the server should return index.html and only then the angular router will do the rest.

Angular2 when I refresh the page, not the page loads in router params

2 Answers