代码之家 › 专栏 › 技术社区 › DoubleA

延迟加载模块,角度4错误,“组件X不是任何NgModule的一部分”

angular4-router lazy-loading angular

DoubleA · 技术社区 · 7 年前

我有一个有很多模块的应用程序。它工作得很好。我想让一个模块延迟加载,因为它不经常被普通用户点击。

所以,我改变了LazyModule使用的路径 loadChildren ,主应用程序仍然可以加载,但当我尝试点击LazyModule的一个子路径时,它给了我这个错误:

错误:未捕获(承诺中):错误:组件HomeComponent不是任何NgModule的一部分或该模块尚未导入到您的单元

HomeComponent未在LazyModule中使用。它是另一个模块的一部分,称为MainModule。

还有一个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 { }

应用程序模块

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',
},

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

4 回复 | 直到 7 年前

DoubleA 4 年前

多亏了@Dmitry Grinko,我重新组织了我的路由器,这让我发现我随机导入了应用程序路由。将模块转换为不同的模块。

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

Dmitry Grinko 7 年前

试着用这个 批准模块

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',
        }
    ]
}

你的 应用程序。组成部分

<router-outlet></router-outlet>

主布线模块

{
    path: '',
    component: HomeComponent
},

这是你的

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

和 删除组件模块

希望有帮助

sharmila k 7 年前

看看你们的代码,我只是想说明一下,延迟加载的模块不需要导入到你们的应用程序模块中,因为你们正在将其添加到组件模块并导入到应用程序模块中。

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

carraua 4 年前

我也有同样的问题,类似于@Dmitry所建议的,我只是从AppRoutingModule中删除了所有路由,留下根+延迟加载的模块路由。我在评论中收到了另一条错误消息,比如“DoubleA”。

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