Using Angular component in lazy loaded modules

Question

I want to use an Angular component in several parts of my application, including in a component inside a lazy loaded module. I don't know how to declare the component for using it in the lazy module. I'll show you some of the relevant parts of the different files:

app.module.ts

import { FpgTimeComponent } from './fpgTime/fpg-time.component';


@NgModule({
  declarations: [
      AppComponent, 
      (...)
      FpgTimeComponent

app.routing.ts

const appRoutes: Routes = [

    { path: '', redirectTo: 'customer', pathMatch: 'full' },
    {
        path: 'customer',
        component: CustomerComponent
    },
    {
        path: 'lazy',
        loadChildren: 'app/lazy/lazy.module#LazyModule'
    }
];

lazy.module.ts

import { FpgTimeComponent } from '../fpgTime/fpg-time.component';

import { LazyComponent }   from './lazy.component';
import { routing } from './lazy.routing';

@NgModule({
    imports: [routing],
    declarations: [
        LazyComponent, 
        FpgTimeComponent
    ]
})

The app loads, but when I go to the lazy route, it throws the following error:

Uncaught (in promise): Error: Type FpgTimeComponent is part of the declarations of 2 modules: AppModule and LazyModule! Please consider moving FpgTimeComponent to a higher module that imports AppModule and LazyModule. You can also create a new NgModule that exports and includes FpgTimeComponent then import that NgModule in AppModule and LazyModule.

I'm not importing LazyModule anywhere, as it's being lazy loaded. So, how could I declare the component FpgTimeComponent to be able to use it inside the lazy module (and also in non-lazy components)?

Thanks in advance,

Answer 1

FpgTimeComponent is not a part of the files of the lazy module that will be loaded, so you can't do that. Think about it, you are trying to import a component in the lazy module that the module knows nothing about since it isn't defined in that module, and it isn't defined in any other module you have imported in the LazyModule. So where is it going to get the component from?

Add FpgTimeComponent to a SharedModule and import the SharedModule in your LazyModule, or move the FpgTimeComponent to your LazyModule. Once you do one of those, it should work then.

The former might be a better approach because I can guarantee as you keep developing you will keep running into the same error with other components/lazy modules. If you are using the components in multiple places, then they should live in a SharedModule as Angular best practices defines, and that SharedModule should be imported in all your lazy modules.

Here is an example.

SharedModule:

import { FpgTimeComponent } from './some/path';

@NgModule({
    declarations: [
        FpgTimeComponent
    ],
    exports: [
        FpgTimeComponent
    ]
})

LazyModule:

import { SharedModule } from '../shared/shared.module';

import { LazyComponent }   from './lazy.component';
import { routing } from './lazy.routing';

@NgModule({
    imports: [
        routing,
        SharedModule
    ],
    declarations: [
        LazyComponent
    ]
})