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
– Venomy, Commented Nov 15, 2017 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
– MegaTron, Commented Nov 15, 2017 at 10:42
What's the relation between ProjectsModule and AppModule? Are you using it in any other module except these 2? — eko
– eko, Commented Nov 15, 2017 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
– MegaTron, Commented Nov 15, 2017 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
– eko, Commented Nov 15, 2017 at 10:55

Vivek Doshi · Accepted Answer · 2017-11-15 10:57:50Z

13

Remove :

LoadingOverlayModule from AppModule

LoadingOverlayComponent from ProjectsModule

And :

import LoadingOverlayModule Where its required

answered Nov 15, 2017 at 10:57

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MegaTron Over a year ago

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.

Vivek Doshi Over a year ago

@MegaTron, Happens sometime, now you are smarter :)

Naveen Roy Over a year ago

I need more explanation. can you provide some more detail? Like I want to use that loading component in login while checking authentication, or other modules where I need to use that component so where I need to import ? on component or module or where?

ggorlen · Accepted Answer · 2019-09-11 02:17:41Z

8

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.

edited Sep 11, 2019 at 2:17

ggorlen

59.4k8 gold badges119 silver badges173 bronze badges

answered Nov 15, 2017 at 11:05

Hiralal Manmode

812 bronze badges

Comments

Stanley · Accepted Answer · 2021-10-09 19:45:07Z

General answer

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

Remove already created component from appmodule
Create new module e.g. SharedModule
Import and export already created component
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 { }

Collectives™ on Stack Overflow

Angular - Using a component across multiple modules

3 Answers 3

3 Comments

Comments

General answer

Thats it!

Longer explanation

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

General answer

Thats it!

Longer explanation

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related