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, ], })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 { }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 .
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.