How to import one time global module that other module components can recognize

Question

I'm creating a project that is subdivided into different applications. As an example, I would like to use the authentication app.

First, let us define what I mean one time global module. As a minimal example, here are few lists.

1. FlexLayoutModule
2. CustomUIModule

These module must be declared once in the project. Here is the AppModule

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    // Dependencies
    BrowserModule,
    BrowserAnimationsModule,
    FlexLayoutModule,
    CustomUIModule,

    // Apps
    AuthenticationModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now let me show you the AuthenticationModule. I only had a login component for this module.

@NgModule({
    declarations: [
        LoginComponent,
    ],
    exports: [
        LoginComponent
    ],
})
export class AuthenticationModule { }

My problem here is LoginComponent cannot recognize FlexLayoutModule and CustomUIModule modules.However this can be solve IF you put those modules in the import option of the AuthenticationModule.

But man that is crazy, I don't wanna do that whenever i create another app and do the same thing, Since these modules are global type and MUST DECLARED ONCE . Can anyone have any solution how can i construct my application? Lot of thanks.

To be more specific i got this error:

Error: Template parse errors:'mat-[some-material-component]'is not a known element.

Answer 1

As per the guidelines : https://angular.io/guide/sharing-ngmodules

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FlexLayoutModule} from './new-item.directive';
import { CustomUIModule } from './orders.pipe';

@NgModule({
 imports:      [  FlexLayoutModule,CustomUIModule, FormsModule, CommonModule  ],
 declarations: [ ],
 exports:      [  FlexLayoutModule,CustomUIModule, FormsModule, CommonModule   ]
})
export class SharedModule { }

By re-exporting FlexLayoutModule,CustomUIModule, FormsModule, CommonModule, any other module that imports this SharedModule, gets access to exported members.