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（在promise中）：错误：找不到模块＆＃39; ./ account / account.module＆＃39;。错误：找不到模块＆＃39; ./帐户/ account.module＆＃39;

我已尝试将./account/account.module#AccountModule更改为app / account / account.module＃AccountModule，同样的错误。

有什么想法？提前谢谢。

Answer 1

您可以尝试更改

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

到

import {AccountModule} from './path';

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

注释-不要忘记如上所述导入模块

Answer 2

loadChildren的字符串版本已在8号角中弃用

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

角度8/9的新语法

新语法采用动态导入表达式。这是一个返回导入的函数。在此导入模块至关重要。否则，您不会懒惰地加载模块，而是急于加载它。

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

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

角度为10的新语法

在角度10中，语法再次稍有变化。现在，它通过JavaScript Promise（import returns a Promise：）提供导入：

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

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

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

Answer 3

确保您的帐户模块具有如下所示的单一路线

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

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

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

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

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

Answer 4

我遇到了同样的问题，我尝试了几件事。但是更改 app.routing.ts 可以解决问题。

只需将您的行替换为：

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

我希望对您有帮助

在Angular路由中找不到模块

4 个答案: