Angular 4 中延迟加载的模块出现“组件 X 不是任何 NgModule 的一部分”错误

Question

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

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

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

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

MainModule 和 LazyModule 都被导入和导出到 ComponentsModule 或从 ComponentsModule 中导入，然后再导入 app.module。

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

所以我的问题：

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

提前感谢您的帮助。

模块在这里：

LazyModule

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 { }

AppModule

import ...;

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

AppRoutingModule

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

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

Answer 1

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

解决方案是删除这个额外的导入，并且一切正常。

Answer 2

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

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

Answer 3

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

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

Answer 4

尝试使用这个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>

MainRoutingModule

{
    path: '',
    component: HomeComponent
},

这是你的 LazyModule 路由

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

并移除 ComponentModule

希望对你有帮助