延迟加载时找不到模块“功能模块的路径”

时间:2019-02-08 05:48:54

标签: angular ionic3 lazy-loading

离子延迟加载错误

我在尝试配置延迟加载时遇到以下stacktrace错误:

Error: Uncaught (in promise): Error: Cannot find module 'pages/home/home.module'.
Error: Cannot find module 'pages/home/home.module'.
    at http://localhost:8100/build/main.js:10:9
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:5134:33)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
    at r.run (http://localhost:8100/build/polyfills.js:3:10143)
    at http://localhost:8100/build/polyfills.js:3:20242
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5125:33)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:10834)
    at c (http://localhost:8100/build/polyfills.js:3:19752)
    at c (http://localhost:8100/build/polyfills.js:3:19461)
    at http://localhost:8100/build/polyfills.js:3:20233
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5125:33)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:10834)
    at o (http://localhost:8100/build/polyfills.js:3:7894)

配置

Ionic Framework: 3.9.2
Ionic App Scripts: 3.2.1
Angular Core: 5.2.11
Angular Compiler CLI: 5.2.11
Node: 10.12.0
OS Platform: macOS
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

代码段

以下是其中一些文件:

app-routing.module.ts

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

const routes: Routes = [
    { path: 'home', loadChildren: "pages/home/home.module#HomePageModule" },
    { path: 'form', loadChildren: "pages/form/form.module#FormPageModule" },
    { path: '',  redirectTo: '/home',  pathMatch: 'full' }
];

@NgModule({
    imports: [ RouterModule.forRoot(routes, {
        enableTracing: true
    }) ],
    exports: [ RouterModule ]
})

export class AppRoutingModule { }

我尝试了loadChildren的各种值,例如:

pages/home/home.module#HomePageModule

./home/home.module#HomePageModule

../pages/home/home.module#HomePageModule

注意事项

  • 在我的app/app.module.ts上,我尚未导入要延迟加载的模块。
  • 在我的app/app.component.ts上,我使用了对HomePage模块的字符串引用。
  • 在我的app/app-routing.module.ts上,路由使用loadChildren引用了我模块的文件路径。
  • App模块使用RouterModule.forRoot,而pages文件夹中的功能模块使用RouterModule.forChild

不确定在这里要做什么,我遵循了离子文档上的延迟加载说明,并通读了Angular文档以进行延迟加载。

问题

  1. 如何解决“找不到模块”错误?我知道文件在那里,但是Ionic / Angular无法找到模块文件在哪里。

  2. 实际上我是否需要像angular-router-loader这样的外部依赖项才能使angular从基于字符串的文件路径引用中加载模块?

Github存储库

要重现该错误,请查看以下存储库:

https://github.com/darrensapalo/ionic-lazy-loading-error

0 个答案:

没有答案