Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

I have a uiModule. It imports and exports various @angular/material modules.

I had hoped that when I import uiModule in to anotherModule; now anotherModule will have access to @angular/material stuff... But that is not exactly working.

While material works fine inside the uiModule — anotherModule recognizes material elements however there are a lot of errors like

NullInjectorError: No provider for InjectionToken mat-menu-scroll-strategy!

NullInjectorError: No provider for Overlay!

I got those examples after trying to use <mat-menu>

Here is a look at the uiModule

// material
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';

const material = [
  MatIconModule,
  MatProgressSpinnerModule,
  MatProgressBarModule,
  MatExpansionModule,
  MatInputModule,
  MatChipsModule,
  MatAutocompleteModule,
  MatFormFieldModule,
  MatDatepickerModule,
  MatNativeDateModule,
  MatMenuModule,
  OverlayModule,
  MatDialogModule,
  ScrollingModule,
];

@NgModule({
  declarations: [
    PaginationComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    ...material,
  ],
  providers: [],
  exports: [
    PaginationComponent,
    ...material,
  ],
})
about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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 { }
about 4 years ago · Juan Pablo Isaza Report

0

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.

about 4 years ago · Juan Pablo Isaza Report

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!