在 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，同样的错误。

有什么想法吗？提前致谢。

Answer 1

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

路由代码，一旦模块延迟加载就会被路由

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

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

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

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

Answer 2

你可以尝试改变

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

至

import {AccountModule} from './path';

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

注意 - 不要忘记像上面那样导入模块

Answer 3

loadChildren 的字符串版本已在 angular 8

中弃用

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

angular8/9

中的新语法

新语法采用动态导入表达式。这是 returns 导入的功能。在那里导入模块至关重要。否则你不是懒加载模块，而是急切加载它。

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

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

angular10

中的新语法

在 angular 10 中，语法再次略有变化。现在它作为 JavaScript Promise ( import returns a Promise: ):

的结果提供导入

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

警告：导入后分配模块不会延迟加载您的模块！

S.Pradeep的解决方案仍然会急切加载模块！您可以通过实施这两种方法来检查自己，同时检查导航到延迟加载路径的新（延迟加载）网络请求。

Answer 4

我遇到了同样的问题，我尝试了一些方法。但是改变 app.routing.ts 就可以了。

只需将您的行替换为：

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

希望对你有帮助

在 Angular 路由中找不到模块

Cannot find module in Angular routing

angular2-routing

angular