Angular component not found from external link in reset password feature

Question

newbie here. I'm trying to code a reset password feature for a java Spring Boot app. The front works with Angular 7.

The user enters his email and clicks on a reset button. Then, a token is stored in the user table and the user receives a mail with a link like this one :

http://localhost:4200/reset-password?token=7f278bf1-40c7-4b1a-bde5-76744b866241

When I click on this link, I have a 404 error. The app doesn't seem to find the ResetPasswordForm component.

reset-password-form.module.ts :

import { ResetPasswordFormComponent } from './reset-password-form.component';
import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialModule } from '../material/material.module';
import { ClassementModule } from '../classement/classement.module';
import { HttpClientModule } from '@angular/common/http';

const routes: Routes = [
    { path: 'reset-password', component: ResetPasswordFormComponent }
    // { path: '', component: HomeComponent }
  ];

  @NgModule({
    declarations: [ResetPasswordFormComponent],
    imports: [
      CommonModule,
      MaterialModule,
      ClassementModule,
      HttpClientModule,
      RouterModule.forChild(routes)
    ]
  })
  export class ResetPasswordModule { }

app-routing.module.ts :

...
import { ResetPasswordFormComponent } from './site/reset-password-form/reset-password-form.component';
...
{ path: 'reset-password', component: ResetPasswordFormComponent}
...
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts

...
import { ResetPasswordModule } from './site/reset-password-form/reset-password-form.module';
...
@NgModule({
  declarations: [
    AppComponent,
    ConfirmDialogComponent,
    UserComponent,
    AlertComponent,
  ],
  imports: [
    ...
    ResetPasswordModule
  ],
  providers: [httpInterceptorProviders, {provide: LOCALE_ID, useValue: "fr-FR", }, DatePipe],
  entryComponents: [ConfirmDialogComponent, AlertComponent],
  bootstrap: [AppComponent]
})

export class AppModule { }

reset-password-form.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth/auth.service';

@Component({
  selector: 'app-reset-password-form',
  templateUrl: './reset-password-form.component.html',
  styleUrls: ['./reset-password-form.component.scss']
})
export class ResetPasswordFormComponent implements OnInit {

  constructor(private authService: AuthService) { }

  ngOnInit() {
    if(this.authService.isLoggedIn) {
      console.log("logged in")
    }
    else {
      console.log("not logged in")
    }
  }

}

It's been days I'm on this feature and well I'm quite tired, I think I made something wrong. Could you help me?

AlexanderFSP · Answer 1 · 2020-04-01T13:56:04.510

1

Good day!

I can suppose that issue in the reset-password-form.module.ts. It should be looks like this:

const routes: Routes = [
    { path: '', component: ResetPasswordFormComponent }
];

In your app-routing.module.ts:

{
  path: 'reset-password',
  loadChildren: () => import('./reset-password.module').then(m => m.ResetPasswordModule)
},

P.S. And another approach, you also can remove apper route from app-routing.module.ts and just move this route name into reset-password-form.module.ts:

const routes: Routes = [
    { path: 'reset-password', component: ResetPasswordFormComponent }
];

Problem: according to your current routing architecture, your pathnames overlaps, and your ResetPasswordComponent should be accessible here: http://localhost:4200/reset-password/reset-password

Stackblitz example: https://stackblitz.com/edit/angular-lpgp3u

edited Apr 01 '20 at 13:56

answered Apr 01 '20 at 13:04

AlexanderFSP

652
4
10

I tried the first approach but I wasn't able to do the loadChildren: () => import('./reset-password.module').then(m => m.ResetPasswordModule) Dynamic imports are only supported when the '--module' flag is set to 'es2020', 'esnext', 'commonjs', 'amd', 'system', or 'umd' Property 'ResetPasswordModule' does not exist on type 'typeof import("d:/APSIDE/pronoweb/prono-front/src/app/site/reset-password-form/reset-password-form.component") – Sebriniel Apr 01 '20 at 13:18
Still have 404 error when just removing the path in reset-password-form.module.ts – Sebriniel Apr 01 '20 at 13:20
I'll create a demo, wait for a moment – AlexanderFSP Apr 01 '20 at 13:42
I did like you and @Shubham Bhokare did in the demos. But I don't know why, I'm still getting the 404 error... I'm willing to add an exception in auth.guard.ts but with the 404 error the state.url is /404 when the code of auth.guard.ts is running... – Sebriniel Apr 02 '20 at 04:47

score 1 · Answer 2 · answered Apr 01 '20 at 13:55

1

Minimal setup demo - https://stackblitz.com/edit/angular-router-basic-example-k1kbr9

I have not used a separate module for ResetPassword. But this example would help you handle it in your code.

Above, it also fetches the token value from the provided URL.

Hope it helps !

answered Apr 01 '20 at 13:55

Shubham Bhokare

116
1
2
7

See comment on the answer above, I didn't manage to make it work and I'm still having a 404 error – Sebriniel Apr 02 '20 at 04:49
@Sebriniel, Will you be able to create StackBlitz of your code? It would really help. – Shubham Bhokare Apr 02 '20 at 08:07
I left the other routes, they are working and made the same way than reset-password-form : https://stackblitz.com/edit/angular-vepgsj?file=src%2Fsite%2Fhello.component.ts – Sebriniel Apr 02 '20 at 08:34

score 0 · Accepted Answer · answered Apr 07 '20 at 06:06

0

I just erased all and did it again from scratch and now it works. Don't know what I forgot...

answered Apr 07 '20 at 06:06

Sebriniel

171
2
13

Angular component not found from external link in reset password feature

3 Answers3