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

780
Views
módulo angular compartido que distribuye varios módulos @angular/material NullInjectorError: ningún proveedor

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

Tenía la esperanza de que cuando importe uiModule en anotherModule ; ahora anotherModule tendrá acceso a material @angular/material... Pero eso no funciona exactamente.

Si bien el material funciona bien dentro de uiModule, anotherModule reconoce elementos materiales, sin embargo, hay muchos errores como

NullInjectorError: ¡No hay proveedor para la estrategia de desplazamiento mat-menu-scroll de InjectionToken!

NullInjectorError: ¡No hay proveedor para Overlay!

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

Aquí hay 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, ], })
over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

Cuando intente construir un módulo que exporte todo lo que necesita del material, simplemente import y export módulos de material en ese módulo.

Cambiar MaterialModule como a continuación:

 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 {}

Luego agregue esto en su uiModule donde declaró PaginationComponent o en cualquier otro lugar.


Pero si desea usar lazyLoading correctamente y como se supone que debe hacerlo, le sugiero que importe cada módulo donde sea necesario. Si hace esto, lo ayudará con el arranque de su aplicación porque para cargar, por ejemplo, solo un menú del módulo de material, su aplicación no necesita cargar todos los módulos primero.

Luego, puede usar el siguiente código en app-routing.module.ts para brindar una mejor experiencia a sus usuarios:

 @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })], exports: [RouterModule] }) export class AppRoutingModule { }
over 4 years ago · Santiago Trujillo Report

0

Los errores que ve tienen un patrón, ¡todos son errores relacionados con los proveedores! Faltan algunos proveedores en el lugar donde está utilizando un componente de material. Ejemplo: proveedor de superposición.

La forma en que funcionan los componentes y servicios es un poco diferente.

Puede usar un componente (A) en otro módulo (B) si exporta el componente A en su módulo A e importa el módulo del componente en B. Esto debe hacerse en cada módulo que desee usar el componente A.

Pero si el módulo A requiere un servicio, se puede proporcionar a nivel de módulo oa nivel de raíz. Si no proporciona esto, puede obtener este error.

Como no ha publicado ningún código en el que esté utilizando componentes de material y enfrente el error, mostraré un caso de uso en el que esto podría suceder.

Caso: anotherModule tiene un componente que tiene un botón en su html que abre un cuadro de diálogo.

Los componentes del cuadro de diálogo no se representan dentro del componente que los abre. Y tienen acceso al inyector de anotherModule . Por lo tanto, aunque haya importado uiModule en materialModule si no lo ha importado en AppModule , puede aparecer la ventana emergente Ningún proveedor para errores XYZ.

Así que intente importar este uiModule en AppModule .

over 4 years ago · Santiago Trujillo Report

0

Revisé el código agregado por usted y no hay nada malo con el concepto que mencionó. Todos los módulos de material estarán disponibles para el módulo que lo importe.

El único problema con el código es que te faltan dos importaciones en tu ui.module.ts

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

Después de hacer esto, le sugiero que ejecute el comando npm install para instalar todas las dependencias. Resolverá el problema con el código.

Por favor, avíseme si todavía tiene algún problema.

over 4 years ago · Santiago Trujillo 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!