Angular2 Lazy loading Fails with a shared module

Question

I've created an AccountModule that successfully lazy loads, but when I add my SharedModule to the AccountModule my app seems to forget all of my eagerly loaded modules and I get the error:

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

Where FoodComponent is an eagerly loaded component that both loaded and rendered correctly before calling for the AccountModule via lazy load. If I remove that component fro the app, then the next eagerly loaded component send the same issue. What is it about my SharedModule that is making this happen?

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() { }
}

Why would you export AppRoutingModule from shared? Not saying that is the issue, but it is very suspect code. — Aluan Haddad
– Aluan Haddad, Commented Jan 2, 2017 at 18:57
I think I've followed an out dated Routing module tutorial. I've solve the issue using ModuleWithProviders instead and adding it to AppModule alone. I'll put together the answer. — Nate May
– Nate May, Commented Jan 2, 2017 at 19:34

Nate May · Accepted Answer · 2017-01-02 19:43:44Z

Apparently I was Following an outdated AppRoutingModule tutorial. Instead of a traditional NgModule module I switched to a ModuleWithProviders module.

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)

Collectives™ on Stack Overflow

Angular2 Lazy loading Fails with a shared module

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related