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.

Do as the error says? Remove `LoadingOverlayComponent` from `ProjectsModule `? — Venomy, Nov 15 '17 at 10:39
Bugger. That's my bad. I tried a bunch of things so quickly I forgot to remove that. However, now that's removed I get the following: "'app-loading-overlay' is not a known element: If 'app-loading-overlay' is an Angular component, then verify that it is part of this module." - This is probably why i ended up adding the component in the module too. — MegaTron, Nov 15 '17 at 10:42
What's the relation between `ProjectsModule` and `AppModule`? Are you using it in any other module except these 2? — eko, Nov 15 '17 at 10:51
Hi Echonax - App Module is importing every module I have and need including ProjectsModule. ProjectModule just contains modules and components to display a list of projects (components, angular material modules etc) — MegaTron, Nov 15 '17 at 10:52
You need to import `LoadingOverlayModule` in every module where you are using any of its directives. Maybe you missed to import it somewhere? — eko, Nov 15 '17 at 10:55

score 8 · Accepted Answer · answered Nov 15 '17 at 10:57

8

Remove :

LoadingOverlayModule from AppModule

LoadingOverlayComponent from ProjectsModule

And :

import LoadingOverlayModule Where its required

answered Nov 15 '17 at 10:57

Vivek Doshi

46,471
9
84
100

Thanks all. Turns out that did work. Someone else happened to have added the snippet to another HTML component which I wasn't aware of and it didn't throw it up in the error! Thanks for your time. Much appreciated. – MegaTron Nov 15 '17 at 11:07
@MegaTron, Happens sometime, now you are smarter :) – Vivek Doshi Nov 15 '17 at 11:09

score 7 · Answer 2 · edited Sep 11 '19 at 02:17

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.

Angular - Using a component across multiple modules

2 Answers2

Linked