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。