0

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 (e.g. 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, S.O. community!

markreyes
  • 1,249
  • 1
  • 13
  • 27
  • I don't think I understand the question, but I have an example of using combined or grouped routes and child routes here: https://github.com/DeborahK/Angular-Routing in the APM-final folder. – DeborahK May 11 '17 at 05:07
  • Wow @DeborahK forgive me for being a little star struck. My entire app is in principle from your PluralSight course, "Angular 2: Getting Started". I just have a series of URLs (which could change) but the underlying path remains the same `account/changeforgottenpassword`. I want `account/changeforgottenpassword` to go to Component A, whereas `account/changeforgottenpassword/etc`, or `account/changeforgottenpassword/etc/blah` to go to Component B. Does that make sense? I tried wildcarding anything after `account/changeforgottenpassword/**` but that does not work. – markreyes May 11 '17 at 13:55
  • :-) I think Fredrik has a great response below. Use variables, not wild cards. – DeborahK May 11 '17 at 14:15

1 Answers1

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
    }
}
fredrik
  • 17,537
  • 9
  • 51
  • 71
  • What if `type` is an email address (e.g. test@blah.com)? It gets 404'd. I have no control of that URL being passed back to the application. – markreyes May 12 '17 at 01:01
  • It shouldn't, just tried with : http://localhost:3000/account/changeforgottenpassword/test@blah.com/75c09b18-6090-44df-a18d-moreblah in chrome. works fine. Maybe another problem? – fredrik May 12 '17 at 08:51
  • This 404s: http://localhost:3000/account/changeforgottenpassword/blahbla@htest.com/75c09b18-6090-44df-a18d-moreblah This works: http://localhost:3000/account/changeforgottenpassword/blahblahtestcom/75c09b18-6090-44df-a18d-moreblah Here's my code: https://plnkr.co/edit/g2wkInKnWnbRhgqVHkRg?p=catalogue – markreyes May 12 '17 at 21:28
  • Modifying my question a bit to call the error for email address only. Thanks for your help. I'll keep digging around. – markreyes May 13 '17 at 16:02
  • @frederik Are you using lite-server to test out your changes? – markreyes May 13 '17 at 17:12
  • I think it might be because I have a DOT in the URL as it relates to local testing only. If you do employ lite-server, do you have a custom config to account for that DOT? – markreyes May 13 '17 at 17:21
  • Problem with lite-server - needed to plop custom configs available from lite-server. Specifically this answer, https://stackoverflow.com/questions/33542479/dot-in-query-string-parameter-angularjs/36283859#36283859 – markreyes May 13 '17 at 18:45