@angular/cdk/overlay#OverlayModule TypeScript Examples

@NgModule({
  declarations: [NpDatePickerComponent],
  imports: [
    CommonModule,
    OverlayModule,
    PortalModule,
    NpTooltipModule,
    NpAutofocusModule,
    NpTranslationsModule,
  ],
  exports: [NpDatePickerComponent],
})
export class NpDatePickerModule { }

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    FlexLayoutModule,
    LayoutModule,
    OverlayModule,
    PortalModule,
    DragDropModule,
    ReactiveFormsModule,
    HttpClientModule,
    MaterialComponentsModule
  ],
  exports: [
    CommonModule,
    FormsModule,
    FlexLayoutModule,
    LayoutModule,
    OverlayModule,
    PortalModule,
    DragDropModule,
    ReactiveFormsModule,
    HttpClientModule,
    MaterialComponentsModule
  ]
})
export class SharedModule {}

@NgModule({
  imports: [
    CommonModule,
    OverlayModule
  ],
  providers: [
    ...interceptors,
    EnvironmentServiceProvider
  ],
  declarations: [],
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error(
        `${parentModule} has already been loaded. Import Core module in the AppModule only.`
      );
    }
  }
}

@NgModule({
    imports: [
        CommonModule,
        FormsModule, ReactiveFormsModule,
        OverlayModule,
        A11yModule,

        IntlModule,
        ValidationModule,
        CoreModalModule.forRoot(BsConfirm, BsPrompt),
        LoginModule.forRoot(BsLogin),

        UtilsModule,
    ],
    declarations: [
        BsModal, BsModalHeader, BsModalFooter, BsLogin, BsConfirm,
        BsHelp, BsOverrideUser, BsEditable, BsPrompt
    ],
    exports: [
        BsModal, BsModalHeader, BsModalFooter, BsLogin, BsConfirm,
        BsHelp, BsOverrideUser, BsEditable, BsPrompt
    ],
})
export class BsModalModule {
}

@NgModule({
  declarations: [NpTimePickerComponent],
  imports: [
    CommonModule,
    OverlayModule,
    PortalModule,
    NpAutofocusModule,
    NpTranslationsModule,
  ],
  exports: [NpTimePickerComponent],
})
export class NpTimePickerModule { }

@NgModule({
  declarations: [NpTagsComponent],
  imports: [
    CommonModule,
    OverlayModule,
    PortalModule,
    NpAutofocusModule,
    NpTranslationsModule,
    NpOrderByModule,
    NpHighlightModule,
  ],
  exports: [NpTagsComponent],
})
export class NpTagsModule { }

@NgModule({
  declarations: [
    NpMenubarComponent,
    NpPopupMenubarDirective,
    NpMenuItemComponent,
    NpPanelMenuItemComponent,
  ],
  imports: [CommonModule, RouterModule, OverlayModule],
  entryComponents: [NpMenubarComponent],
  exports: [NpMenubarComponent, NpPopupMenubarDirective],
})
export class NpMenubarModule { }

@NgModule({
  declarations: [NpDropdownComponent],
  imports: [
    CommonModule,
    OverlayModule,
    PortalModule,
    NpAutofocusModule,
    NpOrderByModule,
  ],
  exports: [NpDropdownComponent],
})
export class NpDropdownModule { }

@NgModule({
  declarations: [NpDialogContainerComponent],
  imports: [
    CommonModule,
    FormsModule,
    OverlayModule,
    PortalModule,
    NpTranslationsModule,
    NpAutofocusModule,
  ],
  exports: [NpDialogContainerComponent],
  entryComponents: [NpDialogContainerComponent],
  providers: [NpDialogService],
})
export class NpDialogModule { }

@NgModule({
  declarations: [NpDataGridComponent, NpFilterTypesPipe, NpSearchColumnsPipe],
  imports: [
    CommonModule,
    FormsModule,
    DragDropModule,
    OverlayModule,
    PortalModule,
    NpDatePickerModule,
    NpDialogModule,
    NpPaginatorModule,
    NpCheckboxModule,
    NpTranslationsModule,
  ],
  exports: [NpDataGridComponent],
  providers: [
    NpFilterService,
    NpGridUtilityService,
    NpODataService,
    NpFileService,
  ],
})
export class NpDataGridModule { }

@NgModule({
  declarations: [NpColorPickerComponent],
  imports: [
    CommonModule,
    OverlayModule,
    PortalModule,
    NpAutofocusModule,
    NpTranslationsModule,
  ],
  exports: [NpColorPickerComponent],
})
export class NpColorPickerModule { }

@NgModule({
  declarations: [NpAutoCompleteComponent],
  imports: [
    CommonModule,
    OverlayModule,
    PortalModule,
    NpAutofocusModule,
    NpOrderByModule,
    NpHighlightModule,
    NpTranslationsModule,
  ],
  exports: [NpAutoCompleteComponent],
})
export class NpAutoCompleteModule { }

@NgModule({
    declarations: [UserMenuComponent, UserMenuAvatarComponent, UserMenuHeaderComponent],
    imports: [
        CommonModule,
        DrawerHeaderModule,
        InfoListItemModule,
        OverlayModule,
        MatBottomSheetModule,
        MatCardModule,
        MatToolbarModule,
    ],
    exports: [UserMenuComponent, UserMenuAvatarComponent, UserMenuHeaderComponent],
})
export class UserMenuModule {}

@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule,
    PortalModule,
    OverlayModule,
    CommonModule,
    InputModule,
    TooltipModule,
    IconModule,
    ButtonModule,
    I18nModule,
  ],
  declarations: [TimePickerComponent, TimePickerPanelComponent],
  exports: [TimePickerComponent, TimePickerPanelComponent],
})
export class TimePickerModule {}

@NgModule({
  declarations: [
    AppComponent,
    TheAmazingListComponent,
    LoaderComponent,
    TheAmazingListItemComponent,
    PopoverPositionalClassDirective,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    ScrollingModule,
    OverlayModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

@NgModule({
  imports: [CommonModule, OverlayModule, TooltipModule],
  declarations: [
    AutoCompleteDirective,
    CustomAutoCompleteDirective,
    AutocompleteComponent,
    SuggestionComponent,
    AutocompletePlaceholderComponent,
    SuggestionGroupComponent,
    SuggestionGroupTitleDirective,
  ],
  exports: [
    AutoCompleteDirective,
    CustomAutoCompleteDirective,
    AutocompleteComponent,
    SuggestionComponent,
    AutocompletePlaceholderComponent,
    SuggestionGroupComponent,
    SuggestionGroupTitleDirective,
  ],
})
export class AutocompleteModule {}

@NgModule({
  imports: [
    CommonModule,
    OverlayModule,
    PortalModule,
    IconModule,
    ButtonModule,
  ],
  declarations: [
    DialogComponent,
    DialogHeaderComponent,
    DialogContentComponent,
    DialogFooterComponent,
    DialogCloseDirective,
    ConfirmDialogComponent,
  ],
  exports: [
    DialogComponent,
    DialogHeaderComponent,
    DialogContentComponent,
    DialogFooterComponent,
    DialogCloseDirective,
  ],
  entryComponents: [DialogComponent, ConfirmDialogComponent],
  providers: [DialogService],
})
export class DialogModule {}

@NgModule({
  imports: [CommonModule, OverlayModule],
  declarations: [
    TooltipDirective,
    TooltipComponent,
    TooltipActiveDirective,
    TooltipCopyDirective,
  ],
  entryComponents: [TooltipComponent],
  exports: [TooltipDirective, TooltipActiveDirective, TooltipCopyDirective],
  providers: [TOOLTIP_COPY_INTL_INTL_PROVIDER],
})
export class TooltipModule {}

@NgModule({
  declarations: [NpTooltipComponent, NpTooltipDirective],
  imports: [CommonModule, OverlayModule],
  exports: [NpTooltipDirective],
  entryComponents: [NpTooltipComponent],
})
export class NpTooltipModule { }

@NgModule({
  declarations: [
    AppComponent,
    ProfileManagerComponent,
    SupportComponent,
    ProfileOverviewTileComponent,
    ProfileDetailsEditComponent,
    InfoComponent,
    CpuDashboardComponent,
    GlobalSettingsComponent,
    ShutdownTimerComponent,
    ToolsComponent,
    ChangeCryptPasswordComponent,
    FanGraphComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxElectronModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatIconModule,
    MatTableModule,
    MatFormFieldModule,
    MatSelectModule,
    MatButtonModule,
    MatCardModule,
    MatChipsModule,
    MatExpansionModule,
    MatInputModule,
    MatTooltipModule,
    MatCheckboxModule,
    MatDividerModule,
    MatSliderModule,
    MatGridListModule,
    MatStepperModule,
    MatButtonToggleModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MarkdownModule.forRoot(),
    OverlayModule,
    GaugeModule.forRoot(),
    ChartsModule
  ],
  providers: [
    DecimalPipe,
    ThemeService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
    imports: [
        CommonModule,
        A11yModule,
        FormsModule,
        MatButtonModule,
        MatFormFieldModule,
        MatDialogModule,
        MatInputModule,
        MatSelectModule,
        MatToolbarModule,
        MatIconModule,
        OverlayModule,
        PortalModule,
        SmpCoreUtilsModule.forRoot()
    ],
    exports: [
        NgxMatTimepickerComponent,
        NgxMatTimepickerToggleComponent,
        NgxMatTimepickerFieldComponent,
        NgxMatTimepickerDirective,
        NgxMatTimepickerToggleIconDirective
    ],
    declarations: [
        // Not really used, but needed to use it as abstract class
        NgxMatTimepickerBaseDirective,
        NgxMatTimepickerHoursFaceDirective,
        //
        NgxMatTimepickerActiveHourPipe,
        NgxMatTimepickerActiveMinutePipe,
        NgxMatTimepickerComponent,
        NgxMatTimepickerDialComponent,
        NgxMatTimepickerDialControlComponent,
        NgxMatTimepickerDialogComponent,
        NgxMatTimepickerDirective,
        NgxMatTimepickerFaceComponent,
        NgxMatTimepickerMinutesFaceComponent,
        NgxMatTimepickerPeriodComponent,
        NgxMatTimepickerStandaloneComponent,
        NgxMatTimepickerToggleComponent,
        NgxMatTimepicker12HoursFaceComponent,
        NgxMatTimepicker24HoursFaceComponent,
        NgxMatTimepickerToggleIconDirective,
        NgxMatTimepickerAutofocusDirective,
        NgxMatTimepickerMinutesFormatterPipe,
        NgxMatTimepickerThemeDirective,
        NgxMatTimepickerFieldComponent,
        NgxMatTimepickerControlComponent,
        NgxMatTimepickerParserPipe,
        NgxMatTimepickerContentComponent,
        NgxMatTimepickerTimeFormatterPipe,
        NgxMatTimepickerTimeLocalizerPipe
    ],
    entryComponents: [
        NgxMatTimepickerDialogComponent,
        NgxMatTimepickerStandaloneComponent
    ]
})
export class NgxMatTimepickerModule {

    static setLocale(locale: string): ModuleWithProviders<NgxMatTimepickerModule> {
        return {
            ngModule: NgxMatTimepickerModule,
            providers: [
                {provide: NGX_MAT_TIMEPICKER_LOCALE, useValue: locale},
                {provide: NGX_MAT_TIMEPICKER_CONFIG, useValue: undefined},
            ]
        };
    }
}

@NgModule({
  declarations: [
    AppComponent,
    AppShellComponent,
    BrowserOutletsComponent,
    BrowserOutletComponent,
    RouterOutletComponent,
    RouterOutletSettingsComponent,
    RouterOutletContextComponent,
    OutletRouterComponent,
    ContextComponent,
    ContextEntryComponent,
    LookupContextValueComponent,
    PublishMessageComponent,
    ReceiveMessageComponent,
    MessageListItemComponent,
    RegisterCapabilityComponent,
    RegisterIntentionComponent,
    LookupCapabilityComponent,
    LookupIntentionComponent,
    TopicSubscriberCountPipe,
    AppendParamDataTypePipe,
    MicrofrontendComponent,
    ScrollableMicrofrontendComponent,
    PreferredSizeComponent,
    PlatformPropertiesComponent,
    DevToolsComponent,
  ],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    SciViewportModule,
    SciListModule,
    SciSashboxModule,
    SciAccordionModule,
    SciCheckboxModule,
    SciFormFieldModule,
    SciParamsEnterModule,
    SciQualifierChipListModule,
    SciPropertyModule,
    OverlayModule,
    A11yModule,
    AppRoutingModule,
  ],
  bootstrap: [
    AppComponent,
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: providePlatformInitializerFn,
      deps: [PlatformInitializer],
      multi: true,
    },
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // required because <sci-router-outlet> is a custom element and unknown to Angular
})
export class AppModule {
}

/**
 * This module contains an implementation of a [modal dialog service]{@link ModalService} which can be extended
 * to support UI frameworks such as Bootstrap and Material Design. It uses the `Overlay` and `Portal` funcionality
 * provided by the [Angular CDK]{@link https://material.angular.io/cdk/categories} library.
 */
@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,

        // CDK
        OverlayModule, // Needed for the modal service
        A11yModule,

        // Sinequa modules
        BaseModule,
        IntlModule,
        ValidationModule,
    ],
    declarations: [
        Confirm,    // Default confirm
        Prompt
    ],
    exports: [
    ],
    providers: [
        ...MODAL_MODULE_PROVIDERS
    ]
})
export class ModalModule {
    static forRoot(confirmModal: Type<any> = Confirm, promptModal: Type<any> = Prompt): ModuleWithProviders<ModalModule> {
        return {
            ngModule: ModalModule,
            providers: [
                {provide: MODAL_CONFIRM, useValue: confirmModal},
                {provide: MODAL_PROMPT, useValue: promptModal},
            ]
        };
    }
}

/**
 * This module provides support for user authentication in the {@link AuthenticationService}. This authentication can be
 * automatic (OAuth/SAML), if configured in the Sinequa administration, or manual where the user name and password are
 * entered in a modal dialog box and transmitted in clear text. There is also support for the ng2-ui-auth library where the
 * authentication process occurs in a browser popup window. Authentication is instigated by the handling of HTTP 401 errors
 * in an `HttpInterceptor` so all web service calls requiring authentication are automatically protected. This module will
 * not be used for authentication when the web server is configured for Windows authentication.
 *
 * A higher level {@link LoginService} groups the successful retrieval of the current `application configuration` ({@link AppService}),
 * `principal` ({@link PrincipalWebService}), and `user settings` ({@link UserSettingsWebService}) all of which require the user
 * to be authenticated. This can be used as a "gatekeeper" to protect access to the main, often routed, component(s).
 *
 * The {@link LoginInterceptor} in this module must be registered using `HTTP_INTERCEPTORS` in your app module.
 */
@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,

        Ng2UiAuthModule.forRoot(undefined, false),
        ModalModule.forRoot(),

        // CDK
        OverlayModule, // Needed for the modal service
        A11yModule,

        // Sinequa modules
        BaseModule,
        AppUtilsModule,
        WebServicesModule,  // Required for start-up config (START_CONFIG token)
        IntlModule,
        ValidationModule,
        NotificationModule
    ],
    declarations: [
        Login, // Default Login components
    ],
    exports: [
    ],
    providers: [
        // Auth module dependencies
        {provide: CONFIG_OPTIONS, useClass: AuthConfig},
        {provide: OauthService, useExisting: AuthenticationOauthService},
        {provide: PopupService, useExisting: AuthenticationPopupService},

        ...LOGIN_MODULE_PROVIDERS
    ]
})
export class LoginModule {
    static forRoot(loginModal: Type<any> = Login): ModuleWithProviders<LoginModule> {
        return {
            ngModule: LoginModule,
            providers: [
                // Login
                {provide: MODAL_LOGIN, useValue: loginModal},
            ]
        };
    }
}

@NgModule({
  declarations: [
    AppComponent,
    RtcComponent,
    NotificationComponent,
  ],
  imports: [
    RippleModule,
    SharedModule,
    ActiveClassModule,
    OverlayModule,
    BrowserAnimationsModule,
    BrowserModule,
    HammerModule,
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    IonicModule.forRoot({
      mode: 'ios',
      backButtonText: '',
      backButtonIcon: 'chevron-back-outline'
    }),
    SocketioModule.forRoot({
      url: '',
      options: {
        path: environment.socketioPath,
        autoConnect: false,
        transports: ['websocket'] // 只使用WebSocket连接
      }
    }),
    QuillModule.forRoot({
      placeholder: '在此处插入文字…'
    }),
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      registrationStrategy: 'registerImmediately'
    })
  ],
  providers: [
    { provide: LOCALE_ID, useValue: 'zh-Hans' },
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: BaseInterceptor, multi: true },
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: ErrorHandler, useClass: GlobalErrorHandler }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  imports: [CommonModule, OverlayModule, IconModule],
  declarations: [MessageWrapperComponent, MessageComponent],
  entryComponents: [MessageWrapperComponent, MessageComponent],
  providers: [MessageService],
})
export class MessageModule {}

/** Fix icon warning? https://stackoverflow.com/a/62277810 */
describe("FooterComponent", () => {
  let fixture: ComponentFixture<FooterComponent>;
  let wowUpServiceSpy: WowUpService;
  let sessionServiceSpy: SessionService;
  let electronService: ElectronService;
  let linkService: LinkService;

  beforeEach(async () => {
    mockPreload();

    wowUpServiceSpy = jasmine.createSpyObj("WowUpService", [], {
      getApplicationVersion: () => Promise.resolve("TESTV"),
      wowupUpdateCheck$: new Subject<UpdateCheckResult>().asObservable(),
      wowupUpdateDownloaded$: new Subject<any>().asObservable(),
      wowupUpdateDownloadInProgress$: new Subject<boolean>().asObservable(),
    });

    sessionServiceSpy = jasmine.createSpyObj("SessionService", [""], {
      statusText$: new BehaviorSubject(""),
      pageContextText$: new BehaviorSubject(""),
      wowUpAccount$: new Subject(),
    });

    linkService = jasmine.createSpyObj("LinkService", [""], {});

    electronService = jasmine.createSpyObj("ElectronService", [""], {
      appUpdate$: new Subject(),
    });

    await TestBed.configureTestingModule({
      declarations: [FooterComponent, MatIcon],
      imports: [
        MatModule,
        NoopAnimationsModule,
        MatIconTestingModule,
        OverlayModule,
        HttpClientModule,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: httpLoaderFactory,
            deps: [HttpClient],
          },
          compiler: {
            provide: TranslateCompiler,
            useClass: TranslateMessageFormatCompiler,
          },
        }),
      ],
    })
      .overrideComponent(FooterComponent, {
        set: {
          providers: [
            { provide: ElectronService, useValue: electronService },
            { provide: WowUpService, useValue: wowUpServiceSpy },
            { provide: SessionService, useValue: sessionServiceSpy },
            { provide: LinkService, useValue: linkService },
          ],
        },
      })
      .compileComponents();
  });

  it("should create", () => {
    fixture = TestBed.createComponent(FooterComponent);
    expect(fixture.componentInstance).toBeTruthy();
  });
});

@NgModule({
  declarations: [NpPopoverComponent, NpPopoverDirective],
  imports: [CommonModule, OverlayModule],
  exports: [NpPopoverDirective],
  entryComponents: [NpPopoverComponent],
})
export class NpPopoverModule { }

@NgModule({
  declarations: [NpModalContainerComponent],
  imports: [CommonModule, OverlayModule, PortalModule],
  exports: [NpModalContainerComponent],
  entryComponents: [NpModalContainerComponent],
  providers: [NpModalService],
})
export class NpModalModule { }