Búsqueda de sitios web

typescript - ¿Cómo importar correctamente el módulo Angular Material a través de un módulo compartido en Angular 4?

Estoy desarrollando una aplicación usando Angular junto con Angular Material, y estoy teniendo algunos problemas con la estructura de mis módulos.

Como sugieren las directrices, la importación del MaterialModule está en desuso y ya no debería hacerse, por lo que he creado un MaterialModule separado donde solo importo los módulos de Material que necesito usar; este módulo luego se importa en un SharedModule, que finalmente se importa en todos los lugares donde se necesita, incluyendo el AppModule principal.

Uno de los componentes de Material que estoy usando es el MdTooltip, y todo funciona bien excepto cuando pruebo mi aplicación en una tableta: lo que sucede es que los tooltips no reaccionan a las pulsaciones largas como se supone que deben hacerlo, y no se abren. La única forma en que he logrado que funcione es importando el MaterialModule completo (desde @angular/material) en mi AppModule, lo cual es horriblemente incorrecto y poco elegante. Cualquier otro enfoque no parecía funcionar del todo, ya que todos traían sus propios problemas sin resolver la situación.

Estos son mis módulos (despojados de declaraciones de importación redundantes):

MóduloDeMaterial:

import { NgModule } from '@angular/core';
import {...} from '@angular/material';

@NgModule({
  imports: [
    MdGridListModule,
    MdButtonModule,
    MdTabsModule,
    MdToolbarModule,
    MdCardModule,
    MdInputModule,
    MdSelectModule,
    MdAutocompleteModule,
    MdIconModule,
    MdTooltipModule
  ],
  exports: [
    MdGridListModule,
    MdButtonModule,
    MdTabsModule,
    MdToolbarModule,
    MdCardModule,
    MdInputModule,
    MdSelectModule,
    MdAutocompleteModule,
    MdIconModule,
    MdTooltipModule
  ],
  providers: [
    MdIconRegistry
  ]
})

export class MaterialModule {}

MóduloCompartido:

import { MaterialModule } from '../material/app-material.module';
@NgModule({
  imports:      [
    CommonModule,
    MaterialModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    NavbarComponent,
    SearchFiltersComponent,
    RightCurrencyPipe
  ],
  exports:      [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
    FlexLayoutModule,
    NavbarComponent,
    RightCurrencyPipe,
    SearchFiltersComponent
  ],
  providers: [
    SpinnerService,
    ProductsService,
    StatePersistenceService
  ]
})

export class SharedModule {}

MóduloApp:

import { MaterialModule } from "@angular/material";
@NgModule({
  declarations: [
    AppComponent,
    ProductPageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    SharedModule,
    CoreModule,
    LoginModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

¿Estoy haciendo algo mal? ¿Cómo dividirías tu aplicación en submódulos?

Gracias de antemano

Respuesta #1

Dependiendo de tu estrategia de compilación y despliegue, querrás usar tree shaking (para la eliminación de código muerto o la importación de código activo). Esta es la principal motivación para que MaterialModule esté en desuso. La sugerencia oficial es importar solo los componentes que necesitas en los módulos que los necesitan. Tu solución de crear un único MaterialModule con todas las importaciones está deshaciendo ese aspecto, pero podría funcionar dependiendo de la estructura de tu proyecto (si solo estás usando un único módulo, por ejemplo).

Intenta eliminar MaterialModule de los SharedModule exports. De esa manera solo tendrás un único punto de entrada para el módulo en la raíz de tu aplicación.

Respuesta #2

Tu enfoque es excelente. La estructura que has presentado es una alternativa que se mostró en material.angular.io. No estoy seguro de por qué tu tooltip no funciona. Pero me gustaría aconsejarte que solo uses tu MaterialModule personalizado una vez en el módulo raíz. No es necesario importarlo nuevamente en el SharedModule.

Artículos relacionados