angular - 使用路由器 : Error cannot find module 延迟加载 Angular 模块

Question

嘿，所以我遇到了一个非常奇怪的问题，我在设置 Angular 路由时从未遇到过，当我尝试延迟加载另一个模块时，我不断收到此错误 Error: Cannot find module "app/feed/feed.module"

从这里开始是我的设置

• @angular/cli: 6.0.1
• @angular/核心: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 文件