Сделать модуль глобальным доступным в приложении Angular

Question

У меня есть следующий модуль, компоненты которого я использую в других модулях:

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

import { CommonModule } from '@angular/common';  
import { ClickOutsideModule } from "ng-click-outside";

import { PopupComponent} from './popup.component';

@NgModule({  
  declarations: [
    PopupComponent
  ],      
  imports: [
    CommonModule,
    ClickOutsideModule
  ],  
  exports: [
    PopupComponent
  ],
  providers: []
})

export class PopupModule {}

И у меня есть мой AppModule:

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

import { AppBrowserModule } from './app-browser.module';
import { AppRoutingModule } from './app-routing.module';

import { HomeModule } from './home/home.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppBrowserModule,  
    HomeModule,
    AppRoutingModule
  ],
  exports: [],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

1. Возможно лиесть ли ClickOutsideModule во всех модулях приложения, таких как PopupModule, без необходимости импортировать его в каждый модуль?

   Или мне всегда нужно импортировать его в каждый модуль, в котором он используется?

2. Для чего нужен Экспорт в AppModule?

Answer 1

Просто создайте SharedModule, добавьте ClickOutsideModule к массиву imports и exports.Примерно так:

import { NgModule } from '@angular/core';
import { ClickOutsideModule } from "ng-click-outside";

@NgModule({ 
  imports: [
    ClickOutsideModule,
    ...
  ],  
  exports: [
    ClickOutsideModule,
    ...
  ],
})
export class SharedModule {}

И затем импортируйте SharedModule везде, где вы хотите иметь доступ к модулю ClickOutsideModule.Скажем, например, если вы хотите это в AppModule, вот как вы это сделаете:

...
import { SharedModule } from './shared/shared.module';

@NgModule({
  ...,
  imports: [
    SharedModule,
    ...
  ],
  ...
})

export class AppModule { }

Вы можете сделать то же самое для PopupModule:

...
import { SharedModule } from './shared/shared.module';

@NgModule({
  ...,
  imports: [
    SharedModule,
    ...
  ],
  ...
})

export class PopupModule { }