es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

módulo compartido de Angular que distribuye varios módulos de @angular/material NullInjectorError: No se encontró ningún proveedor

Tengo un uiModule. Importa y exporta varios módulos de @angular/material.

Había esperado que cuando importo uiModule en anotherModule; ahora anotherModule tendría acceso a las cosas de @angular/material… Pero eso no está funcionando exactamente.

Mientras que material funciona bien dentro de uiModuleanotherModule reconoce los elementos de material; sin embargo, hay muchos errores como:

NullInjectorError: ¡No hay un proveedor para InjectionToken mat-menu-scroll-strategy!

NullInjectorError: ¡No hay un proveedor para Overlay!

Obtuve esos ejemplos después de intentar usar <mat-menu>.

Aquí tienes un vistazo al 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,
  ],
})

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    El problema que estás encontrando se debe a que uiModule no está exportando los proveedores necesarios para algunos de los componentes de @angular/material de la manera correcta. Específicamente, MatMenuModule requiere OverlayModule, el cual no está siendo exportado por uiModule de una manera que pueda ser consumida por anotherModule.

    Para solucionar este problema, puedes agregar OverlayModule al arreglo exports en uiModule de la siguiente manera:

    ...
    exports: [
      PaginationComponent,
      ...material,
      OverlayModule,
    ],
    ...
    

    Esto asegurará que anotherModule tenga acceso al proveedor OverlayModule cuando se importe uiModule.

    Si continúas experimentando problemas con otros proveedores, puedes agregarlos al arreglo exports de la misma manera. Solo asegúrate de que todos los proveedores necesarios estén incluidos en el arreglo exports para cualquier módulo que importe uiModule.

Comments are closed.