4

我有一个包含大量模块的应用程序。它完美地工作。我想让一个模块延迟加载，因为它不经常被普通用户点击。

所以，我将 LazyModule 的路由更改为 use loadChildren，主应用程序仍然可以加载，但是当我尝试点击 LazyModule 的子路由之一时，它给了我这个错误：

错误：未捕获（承诺）：错误：组件 HomeComponent 不是任何 NgModule 的一部分，或者该模块尚未导入到您的模块中。

在 LazyModule 中不使用 HomeComponent。它是不同模块的一部分，称为 MainModule。

MainModule 和 LazyModule 都从 ComponentsModule 导入和导出，然后将其导入 app.module。

还有一个 SharedModule 被导入到所有其他提到的模块中。

所以我的问题：

  • 为什么 LazyModule 完全不依赖 MainModule 时会尝试在 MainModule 中加载组件？
  • 为什么它适用于普通路由，但不适用于延迟加载？

在此先感谢您的帮助。

模块在这里：

懒惰模块

import ...;

const routes: Routes = [
    {
        path: '',
        redirectTo: '/lazy-page/1',
        pathMatch: 'full'
    },
    {
        path: '1',
        component: LazyPage1Component
    }
];

@NgModule({
  imports: [
      RouterModule.forChild(routes),
      SharedModule
  ],
  declarations: [
      LazyPage1Component
  ]
})
export class LazyModule { }

主模块

import ...;

@NgModule({
  imports: [
      SharedModule
  ],
  declarations: [
      HomeComponent
  ],
  exports: [
      HomeComponent
  ]
})
export class MainModule { }

组件模块

import ...;

@NgModule({
  imports: [
    SharedModule,
    MainModule,
    LazyModule
  ],
  declarations: [],
  exports: [
    SharedModule,
    MainModule,
    LazyModule
  ]
})
export class ComponentsModule { }

应用模块

import ...;

@NgModule({
  imports: [
    ComponentsModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [{provide: APP_BASE_HREF, useValue : '/' }],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用路由模块

const routes: Routes = [
{
    path: '',
    component: HomeComponent
},
{
    path: 'lazy-page',
    loadChildren: './components/lazy/lazy.module#LazyModule',
},

编辑：我现在找到了一个解决方法，但我真的想要一个合适的解决方案。hack 只是将我的应用程序中的每个模块都导入到 LazyModule 和 AppModule 中。这是一个糟糕的解决方案，因为拥有延迟加载模块的整个想法是将其与应用程序的其余部分分离，因为它是独立的。我不想将所有内容都导入两次，我也不应该这样做，因为导入的模块都没有在 LazyModule 中使用或引用过。

4

4 回答 4

1

感谢@Dmitry Grinko，我重新组织了我的路由器，这让我发现我已经将 app-routing.module 随机导入到另一个模块中。

解决方案是删除这个额外的导入，这一切都奏效了。

于 2020-04-09T17:07:35.070 回答
0

我遇到了同样的问题，类似于@Dmitry 建议的我只是从我的 AppRoutingModule 中删除了所有路由并留下了根 + 延迟加载的模块路由。我收到了一条不同的错误消息，例如评论中提到的@DoubleA。

RouterModule.forRoot() 调用了两次

最后，我在我的 SharedModule 中导入了 AppRoutingModule，同时它也被导入到延迟加载的模块中。我将不得不重构以避免 AppRoutingModule。

于 2020-01-29T13:47:53.427 回答
0

尝试使用这个AppRoutingModule 

const routes: Routes = [
{
    path: '',
    redirectTo: '',
    pathMatch: 'full',
},
{
    path: '',
    component: AppComponent,
    children: [
        {
            path: '',
            loadChildren: './path/to/main.module#MainModule',
        }
    ]
},
{
    path: 'lazy-page',
    component: AppComponent,
    children: [
        {
            path: '',
            loadChildren: './components/lazy/lazy.module#LazyModule',
        }
    ]
}

你的app.component

<router-outlet></router-outlet>

主路由模块

{
    path: '',
    component: HomeComponent
},

这是你的LazyModule 路线

const routes: Routes = [
    {
        path: '1',
        component: LazyPage1Component
    }
];

并删除 ComponentModule

希望能帮助到你

于 2017-11-14T19:39:41.223 回答
0

查看您的代码，我只想评论延迟加载的模块不需要导入到您的应用程序模块中，因为您正在将其添加到组件模块并导入到应用程序模块。

延迟加载的模块可以作为独立于应用程序的模块，并在路由需要激活时加载。

于 2017-11-15T04:01:14.227 回答