angular shared module that distributes various @angular/material modules NullInjectorError: No provider

The errors you see have a pattern, they are all errors regarding providers! The place where you are using a material component has some providers missing. Example: Overlay Provider.

The way components and services work is a bit different.

You can use a component (A) in another module (B) if you export the component A in it's module A and import the component's module in B. This needs to be done in every module you want to Use the component A.

But if module A requires a service it can be provided at the module level or at the root level. If you missing providing this you can get this error.

As you have not posted any code where you are using material components and facing the error, i will show a use case where this could happen.

Case: anotherModule has a component which has a button in it's html which opens a dialog.

The dialog components are not rendered inside the component opening them. And they do have access to injector of anotherModule. So even though you have imported uiModule in materialModule if you have not imported in AppModule the No provider for XYZ errors can popup.

So try importing this uiModule in AppModule.

When you are trying to build a module that exports all you need from material so just import and export material modules in that module.

Change MaterialModule Like below:

import { NgModule } from '@angular/core';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  imports: [
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatExpansionModule,
    MatInputModule,
    MatChipsModule,
    MatAutocompleteModule,
    MatFormFieldModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatMenuModule,
    OverlayModule,
    MatDialogModule,
    ScrollingModule
  ],
  exports: [
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatExpansionModule,
    MatInputModule,
    MatChipsModule,
    MatAutocompleteModule,
    MatFormFieldModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatMenuModule,
    OverlayModule,
    MatDialogModule,
    ScrollingModule
  ],
})
export class MaterialModule {}

Then add this in your uiModule where you declared the PaginationComponent or anywhere else.

But if you want to use lazyLoading correctly and as it supposed to, I suggest you to import each module where it is needed. If you do this, it will help you with the boot of your application because in order to load for example just a menu from material module, your app doesn't need to load all modules first.

Then you can use the below code in app-routing.module.ts too provide a better experience for your users:

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I have checked the code added by you and there is nothing with wrong with the concept you mentioned. All the material modules will be available to the module which import it.

The only issues with the code is that you are missing two imports in your ui.module.ts

import {ScrollingModule} from '@angular/cdk/scrolling';
import {OverlayModule} from '@angular/cdk/overlay';

After doing this, I would suggest you to run the command npm install to install all the dependecies. It will resolve the issue with the code.

Please let me know if you still face any issue.