GEOFFREY MWANGI GEOFFREY MWANGI - 2 months ago 14
TypeScript Question

Angular2 importing components in modules

I have a loading screen component that I would like to reuse across different components in different modules.

I have an AppModule

@NgModule ( {
declarations: [
LoadingScreenComponent //has tag app-loading-screen
],
imports: [
ReportsModule,DashboardModule
]

});
export class AppModule {
}


In the ReportsModule I have

@NgModule ( {
declarations: [
ReportsComponent
],
});
export class ReportsModule {
}


In the ReportsComponent html file

<app-loading-screen></app-loading-screen>


When doing it this way am getting an error that

'app-loading-screen' is not a known element


Several other components in different modules also need to use the loading screen component.

Why does this fail yet i have included
LoadingScreenComponent
in the root module. Or how do i go about it?

Answer Source

You can do Loding screen component as shared module and you import shared module both app module and report module

import { NgModule} from '@angular/core';
@NgModule({
imports: [
],
declarations: [
 LoadingScreenComponent
],
providers: [

],
exports: [
   LoadingScreenComponent
]
})
export class SharedModule { }

Then you can import shared module in both dashboard module and report module