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.

Answer 3

General answer

For those of you looking for a generalized answer similar to me:

1. Remove already created component from appmodule
2. Create new module e.g. SharedModule
3. Import and export already created component
4. Import module into module where component is already required

Thats it!

---

Longer explanation

I have a few componentsi want to share across the entire project. I created a new module called ComponentsModule which looks like this:

     @NgModule({
      declarations: [
        BannerComponent,
        ImageAndTextComponent,
        InfoAndImageComponent
      ],
      imports: [
        CommonModule
      ],
      exports: [
        BannerComponent,
        
      ]
    })
    export class ComponentsModule { }

I want to use BannerComponent in UtviklingComponent which is a child of UtviklingModule. You can see the code for UtviklingModule below

   @NgModule({
      declarations: [
        UtviklingComponent,
      ],
      imports: [
        CommonModule,
        ComponentsModule,
        RouterModule.forRoot([
          {path: 'utvikling', component: UtviklingComponent,data: {animation: "UtviklingPage"}},
        ])
      ]
    })
    export class UtviklingModule { }