Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

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() { }
}
share|improve this question
1  
Why would you export AppRoutingModule from shared? Not saying that is the issue, but it is very suspect code. – Aluan Haddad Jan 2 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 Jan 2 at 19:34
up vote 0 down vote accepted

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)
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.