NgModuleFactoryLoader.load无法找到模块

问题描述

Please refer my project structure here 我创建了一个包含多个延迟加载的嵌套模块的项目。

在应用程序启动时，将加载AppModule
当用户单击登录按钮时，LoginModule已加载
如果用户存在，即登录成功，则应从login-routing.module.ts延迟加载AppModule的另一个功能模块IntegratedPmntsModule。它正在使用“ button routerLink ='integratePayments'class =“ pmntButton”'完美地加载IntegratedPmntsModule，但这不是我想要的。

我在这里的要求是有条件地加载功能子模块，如组件login.component.ts中所示，当用户登录失败时，应将其导航至登录（由于LoginModule已被延迟加载，因此可以正常工作），以及何时登录成功后，应将用户导航到IntegratedPmntsModule中存在的IntegratedPaymentsComponent（这没有发生）。

this.router.navigate（['integratedPayments']）; -给出“未捕获（承诺）：错误：无法匹配任何路线” integratedPayments”
我什至尝试使用NgModuleFactoryLoader.load（）的load（）方法加载IntegratedPmntsModule，这给出了“找不到模块错误”

login.component.ts

@Component({
  selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  loginFormGroup: FormGroup;
  customerModel:CustomerLoginModel = new CustomerLoginModel();
  userExist: Boolean = true;

  constructor(private loginService: LoginService,private router: Router,private readonly loader: NgModuleFactoryLoader) { }

  ngOnInit(): void {
    this.loginFormGroup = new FormGroup({
      customerId: new FormControl('',[Validators.required,Validators.maxLength(20),Validators.pattern('^[a-zA-Z0-9]+([._]?[a-zA-Z0-9]+)*$')]),password: new FormControl('',Validators.maxLength(15)])
    })
  }
  submitLoginForm(formGroup: FormGroup): any{
   
   this.customerModel.setCustomerId(formGroup.value.customerId);
   this.customerModel.setPassword(formGroup.value.password);
   this.loginService.authenticateCustomer(this.customerModel).subscribe(
     response=>{
       this.userExist=response},error=>{
        console.log(error)
      }
    );
      if(this.userExist){
          //this.loader.load('./app/integrate-pmnts-module/integrate-pmnts.module#IntegratePmntsModule').
          //then(factory =>this.router.navigate(['integratedPayments']));
          this.router.navigate(['integratedPayments']);
      }
      else
        this.router.navigate(['login']);
  }

}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { LoginauthGuard } from './login/loginauth.guard';


const routes: Routes = [
 
  {
    path: 'login',loadChildren: () => import('./login/login.module').then(mdule=>mdule.LoginModule),},];

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

login-routing.module.ts


const routes: Routes = [
  {
    path: '',component: LoginComponent,//canDeactivate: [LoginauthGuard]
  },{
    path: 'integratedPayments',loadChildren: () => import('../integrate-pmnts-module/integrate-pmnts.module').then(mdule=>mdule.IntegratePmntsModule)
  }
];

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

}

login.component.html


<html>
    <form [formGroup]="loginFormGroup" (ngSubmit)="submitLoginForm(loginFormGroup)"> 
            Customer Id:<input type="text" formControlName="customerId" placeholder="Enter Customer ID"><br><br>
            Password: <input type="password" formControlName="password" placeholder="Enter Password"><br><br>
            <div *ngIf='!userExist'>
                Please enter valid credentials!
            </div><br><br>
        <button class="pmntButton">Login</button>
    </form>
</html>

integratepayments-routing.module.ts


const routes: Routes = [
    {
        path: '',component: IntegratedPaymentsComponent
    },{
      path: 'eftPaymentsPage',loadChildren: () => import('src/app/integrate-pmnts-module/eft-payments-module/eft-payments-module').then(mod=>mod.EftPaymentsModuleModule)
    }
];

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

解决方法

由于integratedPayments路径是login路径的子，因此您应该使用：this.router.navigateByUrl('login/integratedPayments')。

这可能仍然不起作用，因为来自login-routing.module.ts的路由定义如下：

const routes: Routes = [
  {
    path: '',component: LoginComponent,//canDeactivate: [LoginauthGuard]
  },{
    path: 'integratedPayments',loadChildren: () => import('../integrate-pmnts-module/integrate-pmnts.module').then(mdule=>mdule.IntegratePmntsModule)
  }
];

这意味着第一条路线（path: ''）将始终匹配。为了避免这种情况，您可以做的是添加pathMatch: 'full'选项：

const routes: Routes = [
  {
    path: '',pathMatch: 'full'
  },loadChildren: () => import('../integrate-pmnts-module/integrate-pmnts.module').then(mdule=>mdule.IntegratePmntsModule)
  }
];

完美配合'button routerLink ='integratePayments'class =“ pmntButton”'

这是因为RouterLink指令在内部是如何工作的。

当点击具有以下指令的按钮时，我们来看看what happens：

@HostListener('click')
  onClick(): boolean {
    const extras = {
      skipLocationChange: attrBoolValue(this.skipLocationChange),replaceUrl: attrBoolValue(this.replaceUrl),state: this.state,};
    this.router.navigateByUrl(this.urlTree,extras);
    return true;
  }

  get urlTree(): UrlTree {
    return this.router.createUrlTree(this.commands,{
      relativeTo: this.route,// !
      queryParams: this.queryParams,fragment: this.fragment,preserveQueryParams: attrBoolValue(this.preserve),queryParamsHandling: this.queryParamsHandling,preserveFragment: attrBoolValue(this.preserveFragment),});
  }

如您所见，它使用的是relativeTo选项。 this.route作为private route: ActivatedRoute注入。

这意味着您可以通过登录组件将其与this.router.navigate(['integratedPayments']);一起使用。

您必须首先在登录组件中注入ActivatedRoute，然后将relativeTo选项添加到route.navigate：

this.router.navigate(['integratedPayments'],{ relativeTo: this.route });

angular angular angular-lazyloading angular-router angular-routerlink angular-routing

NgModuleFactoryLoader.load无法找到模块

问题描述

解决方法

相关问答