Email Address in params 404s in Angular 2

Question

I have a few URLs which share a common relationship: http://localhost:3000/account/changeforgottenpassword

(200OK, PASS) http://localhost:3000/account/changeforgottenpassword/testexample/75c09b18-6090-44df-a18d-d1fe06ab1cde

(200OK, PASS) http://localhost:3000/account/changeforgottenpassword/testexample2/75c09b18-6090-44df-a18d-moreblahd1fe06ab1cde

(404 - FAIL) http://localhost:3000/account/changeforgottenpassword/blahblah@test.com/75c09b18-6090-44df-a18d-moreblah

In app.module.ts I have the following routes configured (code shortened for brevity):

    import { RouterModule } from '@angular/router';

    RouterModule.forRoot([
      { path: 'login', component: LoginComponent },
      { path: 'login/forgotpassword', component: ForgotPasswordComponent },
  { path: 'account/changeforgottenpassword/:type/:id', component: ChangePasswordComponent },
      { path: 'dashboard', component: DashboardComponent },
      { path: '', redirectTo: 'login', pathMatch: 'full' },
      { path: '**', component: PageNotFoundComponent }
    ])

All of the routes work. However, the account/changeforgottenpassword path will need to be configured so the respective ChangePasswordComponent only displays for the second URL, third URL, etc.

I tried to wildcard the path (eg account/changeforgottenpassword/** ) but that did not work.

In the end, all I end up with is a 404 when visiting URLs with email addresses specified in the parameters.

CODE snippet is here: https://plnkr.co/edit/g2wkInKnWnbRhgqVHkRg?p=catalogue

Thanks for your time, SO community!

Answer 1

You need to defined what the wildcard is, for instance:

{ path: 'account/changeforgottenpassword/:type/:id', component: AnotherComponent }

Then these will be accessible via ActivatedRouteSnapshot or ActivatedRoute .

@Component()
export class AnotherComponent implements OnInit {
    private _route: ActivatedRouteSnapshot;

    constructor(route: ActivatedRouteSnapshot) {
        this._route = route;
    }

    ngOnInit() {
        // http://localhost:3000/account/changeforgottenpassword/blahblahtest/75c09b18-6090-44df-a18d-moreblah
        console.log(this._route.params['type']) // blahblahtest
        console.log(this._route.params['id']) // 75c09b18-6090-44df-a18d-moreblah
    }
}