Angular - использование компонента в нескольких модулях

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

  • Угловой

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

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

Что я сделал

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

  • Внутри этого модуля я экспортирую компонент наложения

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

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

Тип LoadingOverlayComponent является частью объявлений двух модулей: 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 { }

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


person MegaTron    schedule 15.11.2017    source источник
comment
Как написано в ошибке? Удалить LoadingOverlayComponent из ProjectsModule ?   -  person Venomy    schedule 15.11.2017
comment
Баггер. Это у меня плохо. Я так быстро перепробовал кучу вещей, что забыл это удалить. Однако теперь, когда он удален, я получаю следующее: «app-loading-overlay» не является известным элементом: если «app-loading-overlay» является компонентом Angular, убедитесь, что он является частью этого модуля. - Вероятно, поэтому я тоже добавил компонент в модуль.   -  person MegaTron    schedule 15.11.2017
comment
Какая связь между ProjectsModule и AppModule? Используете ли вы его в каком-либо другом модуле, кроме этих 2?   -  person eko    schedule 15.11.2017
comment
Привет, Echonax - модуль приложения импортирует каждый модуль, который у меня есть и который мне нужен, включая ProjectsModule. ProjectModule просто содержит модули и компоненты для отображения списка проектов (компоненты, угловые модули материалов и т. Д.).   -  person MegaTron    schedule 15.11.2017
comment
Вам необходимо импортировать LoadingOverlayModule в каждый модуль, в котором вы используете какую-либо из его директив. Может, вы его куда-то пропустили?   -  person eko    schedule 15.11.2017


Ответы (2)


Удалять :

LoadingOverlayModule из AppModule

LoadingOverlayComponent из ProjectsModule

А также :

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

person Vivek Doshi    schedule 15.11.2017
comment
Спасибо всем. Оказывается, это сработало. Кто-то еще добавил этот фрагмент к другому компоненту HTML, о котором я не знал, и он не вызвал его ошибку! Спасибо за ваше время. Очень признателен. - person MegaTron; 15.11.2017
comment
@MegaTron, бывает когда-нибудь, теперь ты умнее :) - person Vivek Doshi; 15.11.2017

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

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

person Hiralal Manmode    schedule 15.11.2017