在Angular路由中找不到模块

Question

我的文件夹结构如下：

+-- app.module.ts
+-- app.routing.ts
+-- app.component.ts
+-- account/
|   +-- account.module.ts
|   +-- account.routing.ts
|   +-- account.component.ts

在我的app.routing.ts文件中，我有以下内容：

  { path: 'account', loadChildren: './account/account.module#AccountModule' },

在 account.routing.ts 中，我有以下代码：

  { path: 'login', component: LoginFormComponent}

但是当我输入page/account/login时，出现以下错误：

NodeInvocationException: Uncaught (in promise): Error: Cannot find module './account/account.module'. Error: Cannot find module './account/account.module'.

我已经尝试将./account/account.module#AccountModule更改为app/account/account.module#AccountModule，但仍然出现相同的错误。

有什么想法吗？先谢谢了。

- Zair Henrique

---

你尝试过使用 /app/account/account.module#AccountModule 吗？在 Angular 中使用相对路径经常会导致奇怪的意外结果。 - Iskandar Reza

@I.R.R. 没有成功 :( - Zair Henrique

你的代码其他部分怎么样？Promise 从哪里获取数据？我曾经因为没有在我的 API 端点前面加上两个点 (..) 和一个斜杠 (/) 而花费了两天时间解决非常相似的问题，这只是让你了解一下你可能会遇到的路径问题调试。 - Iskandar Reza

你能展示一下AccountModule的代码吗？你尝试过急切加载吗？如果是，那个方法有效吗？ - dasfdsa

Answer 1

你可以尝试更改

  { path: 'account', loadChildren: './account/account.module#AccountModule' }

到

import {AccountModule} from './path';

{ path: 'account', loadChildren: ()=> AccountModule' }

注意 - 不要忘记按照上述方式导入模块。

- S.Pradeep

---

我的代码无法使用第一种方式运行：{ path: 'account', loadChildren: './account/account.module#AccountModule' } - HungNM2

我不知道为什么原始的实现 loadChildren 的方法不起作用，但这确实解决了我的问题。 - Shawn

我认为符号链接/联接或包含空格的父路径可能会出现问题。这个原本适用于同事，但对我来说不起作用（我使用包含空格的ntfs联接路径）。 - Piro

解决了我的问题。但我不明白：你是怎么想到那个主意的？我从来没有想过那个。谢谢！ - William Hou

Answer 2

在Angular 8中，loadChildren的字符串版本已被弃用

请参见：https://github.com/angular/angular/blob/master/CHANGELOG.md＃800-2019-05-28。 请参见：https://angular.io/api/router/LoadChildren

在Angular 8/9中出现了新的语法

新的语法采用动态导入表达式。这是返回导入的函数。重要的是，在那里导入您的模块。否则，您将不会对模块进行惰性加载，而是急切地加载。

{ 
path: 'account', 
loadChildren: ()=> import('./account/account.module').next(mod => mod.AccountModule) 
}

文档：https://angular.io/api/router/LoadChildrenCallback

Angular 10 中的新语法

在 Angular 10 中，语法略有改变。现在它通过 JavaScript Promise 作为结果提供导入（import 返回一个 Promise）：

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

警告：在导入模块后分配模块将不会惰性加载您的模块！

S.Pradeep的解决方案仍然会急切地加载该模块！您可以通过实现这两种方法并检查导航到惰性加载路径的新（惰性加载的）网络请求来进行验证。

- Rob Monhemius

---

这个解决方案在Angular10中运行良好。旧的方式：{ path: 'account', loadChildren: './account/account.module#AccountModule' }适用于Angular 6。 - ChinaHelloWorld

在Angular10中，稍微更改一下： { path: 'account', loadChildren: ()=> import('./account/account.module').then(mod => mod.AccountModule) } - ChinaHelloWorld

@ChinaHelloWorld 感谢评论！我更新了答案，提供了Angular 10的语法 ;)。 - Rob Monhemius

Answer 3

我遇到了相同的问题，试过了几种方法。但是更改 app.routing.ts 就可以解决。

只需将您的行替换为：

{ path: 'account', loadChildren: () => AccountModule },

希望它有所帮助

- tahi

Answer 4

确保您的账户模块应该有一个单一的路由，如下所示

路由代码将在模块惰性加载时被路由

const routes: Routes = [{
  path: ':something',
  component: AccountComponent,
}];

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

在核心模块中调用路由模块

@NgModule({
  imports: [
    CommonModule,
    NgbModule.forRoot(),
    AccountRoutingModule,
    ...

- Aniruddha Das

---

从他的设置来看，他似乎正在尝试进行延迟加载。这个解决方案将使其变成急切加载。 - Emmanuel John