What I'm using
What I'm trying to do
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.
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.
Remove :
LoadingOverlayModule
from AppModule
LoadingOverlayComponent
from ProjectsModule
And :
import
LoadingOverlayModule
Where its required