Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

770
Vistas
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,
  ],
})
over 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

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 { }
over 4 years ago · Santiago Trujillo Denunciar

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.

over 4 years ago · Santiago Trujillo Denunciar

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.

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda