Angular2 importing components in modules

Question

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 1

LoadingScreenComponent is declared in AppModule, but ReportsModule, which is imported to AppModule, doesn't know about LoadingScreenComponent. You need to refactor to make a common module to both and import LoadingScreenComponent there.

Answer 2

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

Answer 3

Create a shared module like this and import in other modules.

shared.module.ts

 @NgModule({
        imports: [
            //If needed
        ],
        declarations: [
          LoadingScreenComponent 
        ],
        exports:[LoadingScreenComponent]
 })
 export class SharedModule {}

In AppModule

 @NgModule ({
   imports: [
    SharedModule
    ]
  });
export class AppModule {}

In ReportModule

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

Answer 4

Add the LoadingScreenComponent to exports array in the AppModule. This will make it globally accessible:

@NgModule({
    declarations: [
        LoadingScreenComponent  //has tag app-loading-screen
    ],
    imports: [
        ReportsModule,
        DashboardModule
    ],
    exports: [
        LoadingScreenComponent
    ]
})
export class AppModule {
}

Otherwise, the best way is to create a shared module and import that module to any other module where you want to use the LoadingScreenComponent:

import { NgModule } from '@angular/core';
import { LoadingScreenComponent } from '...'; //Path to the LoadingScreenComponent

@NgModule({
    declarations: [
        LoadingScreenComponent
    ],    
    exports: [
        LoadingScreenComponent
    ]
})
export class SharedModule { }

And import it to other modules like this:

import { SharedModule } from '...'; //Path to the SharedModule

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

Answer 5

Please include the selector in your LoadingScreenComponent as shown below. The selector will be used to app to the component

import {
   Component
} from '@angular/core';

@Component({
    selector: 'app-loading-screen',
    templateUrl: 'loading-screen.component.html'
})

export class LoadingScreenComponent {}

Answer 6

Add bootstrap: [ LoadingScreenComponent ] to your NgModule.

Edit

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

    });
export class AppModule {
 }

Also in your index what is defined there?

Normal you would add the report html to your main component not the other way around.