Angular NgModuleFactoryLoader.load（）无法找到该模块

我创建了一个包含多个延迟加载的嵌套模块的项目

在应用程序启动时，已加载AppModule

当用户单击登录按钮时，将加载LoginModule

如果用户存在，即登录成功，则应从login-routing.module.ts延迟加载AppModule的另一个功能模块IntegratedPmntsModule。它使用“button routerLink='IntegratedPayments'class=“pmntButton””完美地加载IntegratedPMNTS模块，但这不是我想要的

这里我的要求是有条件地加载功能子模块，如component login.component.ts中所示，当用户登录失败时，应该将其导航到login（其工作正常，因为LoginModule已经延迟加载）当登录成功时，应将用户导航到IntegratedPaymentsModule中的IntegratedPaymentsComponent（未发生）

this.router.navigate（['integratedPayments']）；--正在给出“未捕获（承诺）：错误：无法匹配任何路由“集成付款”

我甚至尝试使用NgModuleFactoryLoader.load（）的load（）方法加载IntegratedPmntsModule，该方法给出“找不到模块错误”

login.component.ts
@组成部分({
选择器：“应用程序登录”，
templateUrl:'./login.component.html'，
样式URL:['./login.component.css']
})
导出类LoginComponent实现OnInit{
loginFormGroup:FormGroup；
customerModel:CustomerLoginModel=新CustomerLoginModel（）；
userExist:Boolean=true；
构造函数（私有loginService:loginService，私有路由器：路由器，私有只读加载器：NgModuleFactoryLoader）{}
ngOnInit（）：void{
this.loginFormGroup=新表单组({
customerId:新的FormControl（“”，[Validators.required，Validators.maxLength（20），Validators.pattern（'^[a-zA-Z0-9]+（[.\u]？[a-zA-Z0-9]+）*$），
密码：新FormControl（“”，[Validators.required，Validators.maxLength（15）]）
})
}
submitLoginForm（formGroup:formGroup）：任何{
this.customerModel.setCustomerId（formGroup.value.customerId）；
this.customerModel.setPassword（formGroup.value.password）；
this.loginService.authenticateCustomer（this.customerModel）.subscribe(
响应=>{
this.userExist=response}，
错误=>{
console.log（错误）
}
);
if（this.userExist）{
//此.loader.load（“./app/integrate-pmnts-module/integrate-pmnts.module#integratepmnts-module”）。
//然后（factory=>this.router.navigate（['integratedPayments']）；
this.router.navigate（['integratedPayments']）；
}
其他的
this.router.navigate（['login']）；
}
}

由于

integratedPayments

路由是

login

路由的子路由，您应该使用：

this.router.navigateByUrl（'login/integratedPayments'）

但这可能仍然不起作用，因为来自

login routing.module.ts

的路由定义如下：

const routes:routes=[
{
路径：“”，
组件：LoginComponent，
//canDeactivate:[登录守卫]
},
{
路径：“综合支付”，
loadChildren:（）=>import（'../integrate-pmnts-module/integrate-pmnts.module'）。然后（mdule=>mdule.integratepmts-module）
}
];

这意味着第一条路由（

路径：'

）将始终匹配。为了避免这种情况，您可以添加

pathMatch:'full'

选项：

const routes:routes=[
{
路径：“”，
组件：LoginComponent，
路径匹配：“已满”
},
{
路径：“综合支付”，
loadChildren:（）=>import（'../integrate-pmnts-module/integrate-pmnts.module'）。然后（mdule=>mdule.integratepmts-module）
}
];

---

与“button routerLink='IntegratedPayments'class=“pmntButton”完美结合

这是因为

RouterLink

指令在内部是如何工作的

让我们看看当您单击具有此指令的按钮时：

@HostListener（'click'）
onClick（）：布尔值{
临时演员={
skipLocationChange:attrBoolValue（this.skipLocationChange），
replaceUrl:attrBoolValue（this.replaceUrl），
州：这个州，
};
this.router.navigateByUrl（this.urlTree，extras）；
返回true；
}
获取urlTree（）：urlTree{
返回this.router.createUrlTree（this.commands{
relativeTo:this.route，//！
queryParams:this.queryParams，
片段：这个片段，
preserveQueryParams:attrBoolValue（this.preserve），
queryParamsHandling:this.queryParamsHandling，
preserveFragment:attrBoolValue（this.preserveFragment），
});
}

如您所见，它使用了

relativeTo

选项<代码>此。路径作为一个参数注入

这意味着你可以使用

this.router.navigate（['integratedPayments']）从您的登录组件

您必须首先在登录组件中插入
ActivatedRoute
，然后将
relativeTo
选项添加到
路由。导航
：

this.router.navigate（['integratedPayments']，{relativeTo:this.route}）；
由于
integratedPayments
路由是
login
路由的子路由，您应该使用：
this.router.navigateByUrl（'login/integratedPayments'）

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

const routes:routes=[
{
路径：“”，
组件：LoginComponent，
//canDeactivate:[登录守卫]
},
{
路径：“综合支付”，
loadChildren:（）=>import（'../integrate-pmnts-module/integrate-pmnts.module'）。然后（mdule=>mdule.integratepmts-module）
}
];

这意味着第一条路由（
路径：'
）将始终匹配。为了避免这种情况，您可以添加
路径匹配