In my Angular2 web application, I have set up the following routes: '', '/app', '/login', '/signin', '/validate', '/error', '**':
I've defined a route configuration in app.router.ts:
import { Routes } from '@angular/router';
import { ErrorComponent } from './error/error.component';
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: 'signin', loadChildren: () => System.import('./signin/signin.module')
}, {
path: 'validate', loadChildren: () => System.import('./validate/validate.module')
}, {
path: 'error', component: ErrorComponent
}, {
path: '**', component: ErrorComponent
}
];
Only the '/validate' route needs to collect query parameters. Refer to the Validate module and component:
export const routes = [
{path: '', component: Validate}
];
@NgModule({
declarations: [
// Components / Directives/ Pipes
Validate
],
imports: [
CommonModule,
FormsModule,
RouterModule.forChild(routes),
]
})
export default class ValidateModule {
static routes = routes;
}
----------------
import { Component, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { UsersService, UserDTO } from 'cest/ts';
@Component({
selector: '[validate]',
templateUrl: './validate.template.html',
encapsulation: ViewEncapsulation.None,
styleUrls: ['./validate.style.scss'],
providers: [ UsersService ]
})
export class Validate implements OnInit, OnDestroy {
private id: string;
private token: string;
constructor(private router: Router, private route: ActivatedRoute, private userService: UsersService) { }
ngOnInit():void {
this.sub = this.route.queryParams.subscribe(params => {
this.id = params['id'] || undefined;
this.token = params['token'] || undefined;
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}
I am encountering an issue with how the router is trying to locate the correct module/component.
The problem arises when trying to access the URL:
http://localhost:3002/validate?id=am9yZGkxMEBsaXZpbmctZGlnaXRhbC13YXkuY29t&token=Ra8i4mrGbz1tf9y9vJHLAd-TKHNH0Ig8o699jXU1YU4%3D-Despite setting this URL with query parameters id and token, the Angular2 router redirects it to:
http://localhost:3002/validate?id=am9yZGkxMEBsaXZpbmctZGlnaXRhbC13YXkuY29t&token=Ra8i4mrGbz1tf9y9vJHLAd-TKHNH0Ig8o699jXU1YU4%3D-#/loginThe final URL ends up adding #/login to the initial one.
Any suggestions?