Угловое - использование компонента через несколько модулей

Что я использую

  • Угловая

Что я пытаюсь сделать

  • У меня есть компонент загрузки, который я хочу использовать в нескольких модулях

Что я сделал

  • Я создал новый модуль под названием "loading-overlay"

  • Внутри этого модуля я экспортирую оверлейный компонент

  • Я добавляю этот модуль в app.module

  • При добавлении компонента в несколько модулей я получаю следующую ошибку:

Тип LoadingOverlayComponent является частью объявлений 2 модулей: LoadingOverlayModule и ProjectsModule! Пожалуйста, рассмотрите возможность перемещения LoadingOverlayComponent в модуль более высокого уровня, который импортирует LoadingOverlayModule и ProjectsModule. Вы также можете создать новый NgModule, который экспортирует и включает в себя LoadingOverlayComponent, а затем импортировать этот NgModule в LoadingOverlayModule и ProjectsModule.

  • Я попытался удалить его из app.module и импортировать в другие нужные мне модули без особой удачи. Я должно быть упускаю некоторые очевидные.

Модуль наложения

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

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



@NgModule({
  declarations: [
    LoadingOverlayComponent,
  ],

  imports: [

  ],

  exports: [
    LoadingOverlayComponent
  ],

  providers: [ ],

})

export class LoadingOverlayModule { }

Модуль приложения

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 { }

Модуль проекта

// 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 { }

Любая помощь, указывающая на то, что я тупо пропустил, будет очень признательна.

Ответ 1

Удалить:

LoadingOverlayModule из AppModule

LoadingOverlayComponent от ProjectsModule

А также:

import LoadingOverlayModule Где его требуется

Ответ 2

LoadingOverlayModule является общим модулем. У него есть свой компонент. Теперь, чтобы использовать его компонент, вам нужно импортировать LoadingOverlayModule в модуль Project. Удалите LoadingOverlayComponent из объявлений модуля проекта.

Вам понадобится другой компонент (скажем, ProjectComponent) для объявления модуля проекта. Поскольку общий модуль импортируется в ваш проектный модуль, вы можете напрямую использовать оверлейный компонент в шаблоне ProjectComponent, используя селектор. Надеюсь это поможет.