Angular - Using a component across multiple modules

Question

What I'm using

• Angular

What I'm trying to do

• I have a loading component I want to reuse across multiple modules

What I've done

• I've created a new module called 'loading-overlay'

• Inside this module I export the overlay component

• I add this module to app.module

• When adding the component to multiple modules I receive the following error:

Type LoadingOverlayComponent is part of the declarations of 2 modules: LoadingOverlayModule and ProjectsModule! Please consider moving LoadingOverlayComponent to a higher module that imports LoadingOverlayModule and ProjectsModule. You can also create a new NgModule that exports and includes LoadingOverlayComponent then import that NgModule in LoadingOverlayModule and ProjectsModule.

• I've tried removing it from app.module and importing it into the other modules I need without much luck. I must be missing some obvious.

Overlay Module

// Modules
import { NgModule } from '@angular/core';

// Components
import { LoadingOverlayComponent } from './loading-overlay.component';



@NgModule({
  declarations: [
    LoadingOverlayComponent,
  ],

  imports: [

  ],

  exports: [
    LoadingOverlayComponent
  ],

  providers: [ ],

})

export class LoadingOverlayModule { }

App Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Routing
import { AppRouting } from './routing/app-routing';

// Modules
import { ProjectsModule } from './projects/projects.module';
import { UserModule } from './user/user.module';
import { LoadingOverlayModule } from './loading-overlay/loading-overlay.module';


// Services / Providers
import { AuthService } from './user/auth.service'





@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRouting,
    LoadingOverlayModule  
  ],
  providers: [
    AuthService,

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Project Module

// Modules
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { LoadingOverlayModule } from '../loading-overlay/loading-overlay.module';

import { LoadingOverlayComponent } from '../loading-overlay/loading-overlay.component';






@NgModule({
  declarations: [

    LoadingOverlayComponent
  ],

  imports: [
    CommonModule,
    RouterModule,

    LoadingOverlayModule
  ],

  providers: [ ],

})

export class ProjectsModule { }

Any help pointing out what I've stupidly missed would be greatly appreciated.

Answer 1

Remove :

LoadingOverlayModule from AppModule

LoadingOverlayComponent from ProjectsModule

And :

import LoadingOverlayModule Where its required

Answer 2

LoadingOverlayModule is shared module. It has its own component. Now to use its component you need to import LoadingOverlayModule into Project module. Remove LoadingOverlayComponent from project module's declarations.

You will need another component (say ProjectComponent) for Project Module declaration. As shared module is imported into you project module you can directly use overlay component in ProjectComponent template, using selector. Hope this helps.