使用路由器延迟加载 Angular 模块：错误找不到模块

Question

嘿，所以我遇到了一个非常奇怪的问题，我之前在设置 angular 路由时没有运行进入，当我尝试延迟加载另一个模块时，我不断收到此错误Error: Cannot find module "app/feed/feed.module"

这里是我的设置

@angular/cli: 6.0.1
@angular/core: 6.0.0
@angular/material: 6.0.1
npm: 6.0.1
节点：10.1.0

还要注意，我刚刚在更新了我所有的全局 npm 包之后生成了一个新的 angular 项目，所以列出的内容在我运行 ng new app-name

这是我的 app-routing.module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const rootRoutes: Routes = [
  { path: '', redirectTo: 'feed', pathMatch: 'full' },
  { path: 'feed', loadChildren: 'app/feed/feed.module#FeedModule' }
];

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

然后在我的 app.module 中导入上面的这个模块：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

这里是 feed-routing.module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { FeedComponent } from './feed.component';
import { CreatePostComponent } from './create-post/create-post.component';

export const feedRoutes: Routes = [
  {
    path: '',
    component: FeedComponent,
    children: [
      { path: 'create', component: CreatePostComponent }
    ]
  }
];

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

就像在 app.module 中一样，我在我的 feed.module 中导入该模块：

@NgModule({
  imports: [
    CommonModule,
    FeedRoutingModule
  ],
  declarations: [
    FeedComponent,
    CreatePostComponent
  ]
})

这是我在 VSCode 中的资源管理器的小图片，只是为了验证我的模块是否在正确的位置：

我已经多次使用这种方法，但从未见过关于找不到我的第二个模块的错误，想知道它是否与更新的 Angular 6 包有关。非常感谢任何帮助，因为我想在这个项目中延迟加载各种模块。提前致谢！

Answer 1

对于那些你无法从上面的评论中得到答案的人，请使用@penleychan指定的以下语法

根据 documentation，你最终会写成这样

const rootRoutes: Routes = [
  { path: '', redirectTo: 'feed', pathMatch: 'full' },
  { path: 'feed', loadChildren: 'app/feed/feed.module#FeedModule' }
];

将此更改为

const rootRoutes: Routes = [
  { path: '', redirectTo: 'feed', pathMatch: 'full' },
  { path: 'feed', loadChildren: './feed/feed.module#FeedModule' }
];

请注意两个代码示例中 loadChildren 属性的变化。如果您还没有使用 ng-cli 创建应用程序，请确保 loadChildren 路径相对于 app-routing.module.ts文件

Answer 2

对我来说，建议的相对路径解决方案不起作用。

如果其他人对此有疑问，请在此处尝试我的解决方案，您使用绝对路径并在 angular.json 配置文件中的 lazyModules 下添加惰性模块：

Answer 3

用于 Angular 9 和 following syntax 的另一种方法：

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
  }
];

使用路由器延迟加载 Angular 模块：错误找不到模块

Lazy Loading Angular Modules with router: Error cannot find module

angular-module

angular

angular-router