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

Question

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

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

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

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

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

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

所以我的问题：

• 为什么 LazyModule 在完全没有依赖的情况下尝试加载 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 中使用或引用过。

Answer 1

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

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

Answer 2

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

希望能帮助到你

Answer 3

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

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

Answer 4

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

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