使用角度 9 进行路由延迟加载答案

【问题标题】：lazy loading with routing in angular 9使用角度 9 进行路由延迟加载
【发布时间】：2020-10-01 10:31:24
【问题描述】：

我尝试使用登录组件进行延迟加载。

所以我有一个这样的 AccountModule：

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

我的 App-routing.module 看起来像这样：

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 { }

登录组件如下所示：

<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>

但是如果我想去：http://localhost:4200/account/login。它返回到 http://localhost:4200。

那么我要改变什么？

谢谢

AccountRoutingModule：

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

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

【问题讨论】：

能分享一下AccountRoutingModule吗？
是的，对不起。已添加

标签： javascript angular

【解决方案1】：

您在AccountRoutingModule 中使用了RouterModule.forRoot，这可能会将login 和register 注册到根目录。您应该只在 AppModule 和 RouterModule.forChild 中使用 forRoot。

【讨论】：

【解决方案2】：

您只需要更改您的 AccountRoutingModule

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

【讨论】：