1

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)

Steve
  • 11,596
  • 7
  • 39
  • 53
SAMSOL
  • 90
  • 2
  • 8
  • Your url says : localhost:3000/users/:id but your configuration is path: 'usersid/:id'. Maybe check that. – sohel101091 Jan 27 '17 at 18:39
  • sory like this : http://localhost:3000/usersid/0gR3WBwbPeE7EmAq – SAMSOL Jan 27 '17 at 18:41
  • ex : when i am in this link http://localhost:3000/users/0gR3WBwbPeE7EmAq the page it loading no problem ...... and when a click F5 the page can not loading – SAMSOL Jan 27 '17 at 19:40

2 Answers2

1

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.

Avi
  • 1,924
  • 3
  • 17
  • 31
0

Change this:

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 }
];

To this: (pay attention to the fourth element in Routes array)

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