Angular 角度延迟加载找不到模块问题

首次在此发布：）

我在角度应用方面遇到了一个奇怪的问题。 首先，我将发布一些我正在使用的代码

这是我的app-routing.module.ts：

从'@angular/core'导入{NgModule}；
从'@angular/router'导入{Routes，RouterModule}；
从“./account/_guards/auth.guard”导入{AuthGuard}；
从“./modules/modules.module”导入{ModulesModule}
常数路由：路由=[
{path:''，loadChildren:（）=>moduleModule，canActivate:[AuthGuard]}，
{path:'account'，loadChildren:'./account/account.module#AccountModule'}，
{路径：'**'，重定向到：'}
];
@NGD模块({
导入：[RouterModule.forRoot（路由）]，
导出：[路由模块]
})
导出类AppRoutingModule{}

这是我的app.module.ts：

从'@angular/platform browser'导入{BrowserModule}；
从“@angular/core”导入{NgModule}；
从“./app routing.module”导入{AppRoutingModule}；
从“./app.component”导入{AppComponent}；
从“@angular/platform browser/animations”导入{BrowserAnimationsModule}；
从“./AngularMaterial.module”导入{AngularMaterialModule}；
从“@angular/common/HTTP”导入{HttpClientModule，HTTP_INTERCEPTORS}；
从“./account/_helpers/jwt.interceptor”导入{JwtInterceptor}；
从“./account/_helpers/error.interceptor”导入{ErrorInterceptor}；
从“./account/_components/alert.component”导入{AlertComponent}；
@NGD模块({
声明：[
AppComponent，AlertComponent
],
进口：[
浏览器模块，
批准模块，
BrowserAnimationsModule，
角度材料模块，
HttpClientModule
],
供应商：[
HttpClientModule，
{provide:HTTP_拦截器，useClass:JwtInterceptor，multi:true}，
{提供：HTTP_拦截器，useClass:ErrorInterceptor，multi:true}
],
引导：[AppComponent]
})
导出类AppModule{}

这是我的modules.module.ts：

从'@angular/core'导入{NgModule}；
从“@angular/common”导入{CommonModule}；
从“../AngularMaterial.module”导入{AngularMaterialModule}；
从'@angular/forms'导入{FormsModule，ReactiveFormsModule}；
从'@angular/common/http'导入{HttpClientModule}；
从“./modules routing.module”导入{ModulesRoutingModule}；
从“./home/home.component”导入{HomeComponent}；
@NGD模块({
声明：[
HomeComponent
],
进口：[
公共模块，
模块路由模块，
角度材料模块，
FormsModule，
反应形式模块，
HttpClientModule，
]
})
导出类模块模块{}

这是我的modules-routing.module.ts：

从'@angular/core'导入{NgModule}；
从'@angular/router'导入{RouterModule，Routes}；
从“./home/home.component”导入{HomeComponent}；
常数路由：路由=[
{路径：“”，组件：HomeComponent}
]
@NGD模块({
导入：[RouterModule.forChild（路由）]，
导出：[路由模块]
})
导出类模块routingmodule{}

现在，我正在尝试进行延迟加载，但以下是我的体验。当我执行“ng s”时，应用程序以错误开始：

但如果我在app-routing.module.ts中更改了一个空格并保存了该更改，当应用程序重新加载时（保存更改时），它将路由到首先应该路由的组件（我已经实现了auth guard，所以它路由到登录页面，就像我启动应用程序时一样）。 我试着在谷歌上搜索了很多，但当应用程序路由发生变化时，找不到路由的解释。 这些是依赖性：

“开发依赖性”：{
“@angular devkit/build angular”：“~0.803.19”，
“@angular/cli”：“~8.3.19”，
“@angular/compiler cli”：“~8.2.14”，
“@angular/language service”：“~8.2.14”，
“@types/node”：“~8.9.4”，
“@types/jasmine”：“~3.3.8”，
“@types/jasminewd2”：“~2.0.3”，
“codelyzer”：“^5.0.0”，
“茉莉花芯”：“~3.4.0”，
“jasmine spec reporter”：“~4.2.1”，
“因果报应”：“~4.1.0”，
“卡玛铬发射器”：“~2.2.0”，
“因果报应报道伊斯坦布尔记者”：“~2.0.1”，
“因果报应茉莉”：“~2.0.1”，
“karma jasmine html reporter”：“^1.4.0”，
“量角器”：“~5.4.0”，
“ts节点”：“~7.0.0”，
“tslint”：“~5.15.0”，
“类型脚本”：“~3.5.3”
}

我在app-routing.module.ts中尝试了modules.module的不同路径，但都无法解决问题。 如果你们需要更多的代码或数据，请让我知道，我会编辑这个问题。 希望你能给我点好东西。

---

谢谢。

您不需要在

app.module

中导入您的

模块。module

？

您不需要在

app.module

中导入您的

模块。
尝试用更合适的东西替换
{path:，loadChildren:（）=>modules模块，可以激活：[AuthGuard]}
。例如
{path:''，组件：SomeComponent，canActivate:[AuthGuard]}

语法
loadChildren:（）=>ModulesModule
看起来有误

无需延迟加载根路径，根路径将有90%的机会被访问。但是，如果您需要它，仍然值得将语法更改为正确的语法

loadChildren:（）=>import（'./module/module.module'）。然后（m=>m.ModuleModule）

这是Angular 8引入的一种更好的新语法

这里的
import（'./module/module.module'）
是一个常规网页的动态导入，它允许IDE帮助您完成路由声明的自动完成和检查。然后您只需从加载的包返回
ModuleModule
（更多详细信息请参见网页包）

下面是一个官方文件中关于的例子

此外，您还可以停止服务器并尝试执行
ngbuild--prod
。大多数情况下，它会显示许多隐藏的错误，这些错误在默认开发版本中不会发生。
尝试替换
{path:''，loadChildren:（）=>ModulesModule，
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './account/_guards/auth.guard';
import { ModulesModule } from './modules/modules.module'

const routes: Routes = [
   { path: '', loadChildren: () => import('./modules/Modules.module').then(mod => mod.ModulesModule), canActivate: [AuthGuard] },
   { path: 'account', loadChildren: './account/account.module#AccountModule' },
   { path: '**', redirectTo: '' }
];

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