Angular 中的延迟加载模块 4 个错误 "Component X is not part of any NgModule"

Question

我有一个包含大量模块的应用程序。它工作得很好。我想让一个模块延迟加载，因为它不经常被普通用户访问。

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

Error: Uncaught (in promise): Error: Component HomeComponent is not part of any NgModule or the module has not been imported into your module.

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

MainModule 和 LazyModule 都被导入和导出 to/from ComponentsModule 然后导入到 app.module.

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

So my questions:

Why does LazyModule try to load components in MainModule when it has absolutely no dependencies on it?

Why does it work with normal routing, but not with lazy loading?

在此先感谢您的帮助。

模块在这里：

惰性模块

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。这是一个糟糕的解决方案，因为拥有一个延迟加载模块的整个想法是将它与应用程序的其余部分分离，因为它是独立的。我不想将所有内容都导入两次，而且我也不需要，因为 none 导入的模块曾经在 LazyModule 中使用或引用过。

Answer 1

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

希望对您有所帮助

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

Angular 中的延迟加载模块 4 个错误 "Component X is not part of any NgModule"

Lazily loaded module in Angular 4 errors with "Component X is not part of any NgModule"

lazy-loading

angular

angular4-router