Angular2 routing configuration (route with two parameters)

Question

I'm configuring my routes on my angular2 application:

So, on app.routes.ts:

export const ROUTES: Routes = [{
   path: '', redirectTo: 'login', pathMatch: 'full'
  }, {
    path: 'app',   loadChildren: () => System.import('./layout/layout.module')
  }, {
    path: 'login', loadChildren: () => System.import('./login/login.module')
  }, {
    path: 'validate/:id/:token', loadChildren: () => System.import('./validate/validate.module')
  }, {
    path: 'error', component: ErrorComponent
  }, {
    path: '**',    component: ErrorComponent
  }
];

Currently, I'm facing up with two problems:

1. When I go to http://localhost:3000, it's redirected to http://localhost:3000/Living%20User%20Platform#/login: I don't quite to figure out why this Living%20User%20Platform# is added to url, instead of http://localhost:3000/login.
2. As you can see I'm setting a route with two parameters: validate/:id/:token. Nevertheless, when I'm writting this url (http://localhost:3001/Living%20User%20Platform#/validate?id=sdfsdf&token=sdfsdf) on browser, it goes to error route:

ValidateModule.ts:

export const routes = [
  {path: '', component: Validate, pathMatch: 'full'}
];

@NgModule({
  declarations: [
    // Components / Directives/ Pipes
    Validate
  ],
  imports: [
    CommonModule,
    FormsModule,
    RouterModule.forChild(routes),
  ]
})
export default class ValidateModule {
  static routes = routes;
}

Any ideas?

Answer 1

You are getting Living%20User%20Platform into your route because may be you have not set correct <base href="/"> in your HTML and for URL validate/:id/:token you need to check with UTLhttp://localhost:3001/Living%20User%20Platform#/validate/sdfsdf/sdfsdf

Answer 2

I've changed my routes (validate/:id/:token by simply validate path):

export const ROUTES: Routes = [{
   path: '', redirectTo: 'login', pathMatch: 'full'
  }, {
    path: 'app',   loadChildren: () => System.import('./layout/layout.module')
  }, {
    path: 'login', loadChildren: () => System.import('./login/login.module')
  }, {
    path: 'validate', loadChildren: () => System.import('./validate/validate.module')
  }, {
    path: 'error', component: ErrorComponent
  }, {
    path: '**',    component: ErrorComponent
  }
];

In order get query parameters from component using ActivatedRoute:

constructor(private router: Router, private route: ActivatedRoute, private userService: UsersService)
  {
    this.user = undefined;
  }

  ngOnInit():void {
    this.route.queryParams.subscribe(params => {
      this.id = params['id'] || undefined;
      this.token = params['token'] || undefined;
    });
  }