lazy loading with routing in angular 9

Question

I try to do lazy loading with a login component.

So I have a AccountModule like this:

@NgModule({
  declarations: [LoginComponent, RegisterComponent],
  imports: [
    CommonModule,
    AccountRoutingModule
  ]
})
export class AccountModule { }

and my App-routing.module looks like this:

const routes: Routes = [
  {path: 'account', loadChildren: () => import('./account/account.module')
.then(mod => mod.AccountModule)},

{ path: '**', redirectTo: 'not-found', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

and the login component looks like this:

<div class="d-flex justify-content-center mt-5">
  <div class="col-3">
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <div class="text-center mb-4">
        <h1 class="h3 mb-3 font-weight-normal">Login</h1>
      </div>

      <app-text-input formControlName="email" [label]="'Email Address'"></app-text-input>
      <app-text-input formControlName="password" [label]="'Password'" [type]="'password'"></app-text-input>

      <button [disabled]="loginForm.invalid" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>
  </div>
</div>

but so if I want to go to: http://localhost:4200/account/login. It goes back to http://localhost:4200.

So what I have to change?

Thank you

AccountRoutingModule:

const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'register', component: RegisterComponent}
];

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AccountRoutingModule { }

Answer 1

You used RouterModule.forRoot in AccountRoutingModule which probably registers login and register to the root. You should only use forRoot in AppModule and RouterModule.forChild in others.

Answer 2

You just need to change in your AccountRoutingModule

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})