Angular2延遲加載與共享模塊

我創建了一個AccountModule，成功地延遲加載失敗，但是當我加我SharedModule到AccountModule我的應用程序似乎忘了我所有的即時加載的模塊，我得到的錯誤：Angular2延遲加載與共享模塊

Component FoodComponent is not part of any NgModule or the module has not been imported into your module.

其中FoodComponent是一個急切加載的組件，在通過延遲加載調用AccountModule之前，這兩個組件都已正確加載並正確呈現。如果我從應用程序中刪除該組件，則下一個急切加載的組件發送相同的問題。我的SharedModule是什麼讓這種情況發生？

shared.module.ts

// ... imports ... 

@NgModule({ 
    imports: [ 
    CommonModule, 
    MaterialModule.forRoot(), 
    ReactiveFormsModule, 
    AppRoutingModule 
    ], 
    declarations: [  
    CalNavComponent, 
    IngredientsListComponent, 
    ], 
    exports: [ 
    MaterialModule, 
    ReactiveFormsModule, 
    CommonModule, 
    AppRoutingModule, 

    CalNavComponent, 
    IngredientsListComponent, 
    ], 
    providers: [ 
    UserDataService 
    ], 
}) 
export class SharedModule { }

account.module.ts

// ... imports ... 

const routerConfig: Routes = [{ 
    path: '', 
    component: AccountComponent 
}] 

@NgModule({ 
    imports: [ 
    SharedModule, /* Works fine when this is gone */ 
    RouterModule.forChild(routerConfig) 
    ], 
    declarations: [ 
    AccountComponent 
    ], 
    exports:[ 
    AccountComponent 
    ] 
}) 
export class AccountModule { } // adding 'default' results in "cannot find module at app/features/account/account.module"

APP-routing.module.ts

const routes: Routes = [ 
    { 
    path: '', 
    redirectTo: 'food', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'account', 
    loadChildren: 'app/features/account/account.module#AccountModule' 
    // component: AccountComponent, /* This worked fine*/ 
    }, 
    { 
    path: 'food', 
    component: FoodComponent 
    }, 
    //... more paths 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
}) 

export class AppRoutingModule { 
    constructor() { } 
}

來源

2017-01-02 Nate May

爲什麼要出口' AppRouting模塊'從共享？不是說這是問題，而是非常可疑的代碼。 –

我想我已經遵循了過時的路由模塊教程。我已經使用ModuleWithProviders解決了問題，並將其單獨添加到'AppModule'中。我會把答案放在一起。 –

顯然我是過時的AppRoutingModule教程。我不用傳統的NgModule模塊，而是切換到ModuleWithProviders模塊。

account.routing.ts

import { AccountComponent } from './account.component'; 
import { ModuleWithProviders } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

const routes: Routes = [{ 
    path: '', 
    component: AccountComponent 
}] 

export const AccountRouting: ModuleWithProviders = RouterModule.forChild(routes)

account.module.ts

import { AccountRouting } from './account.routing'; 
import { NgModule } from '@angular/core'; 
import { SharedModule } from '../shared/shared.module'; 
import { AccountComponent } from '../account/account.component'; 

@NgModule({ 
    imports: [ 
    SharedModule, 
    AccountRouting 
    ], 
    declarations: [ 
    AccountComponent 
    ], 
    exports:[ 
    AccountComponent 
    ] 
}) 
export class AccountModule { }

app.routing.ts

import { FoodComponent } from './features/food/food.component'; 
// import { AccountComponent } from './features/account/account.component'; 
import { ModuleWithProviders } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 


const routes: Routes = [ 
    { 
    path: '', 
    redirectTo: 'calendar', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'account', 
    loadChildren: 'app/features/account/account.module#AccountModule' 
    //component: AccountComponent, 
    }, 
    { 
    path: 'food', 
    component: FoodComponent 
    }, 
    //... more routes 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(routes)

來源

2017-01-02 19:43:44

Angular2延遲加載與共享模塊

回答

相關問題