1
votes

Le matériau angulaire ne fonctionne pas dans la version angulaire 9

J'ai mis à jour la version angulaire 8 vers angulaire 9 et également mis à jour le matériau angulaire vers la version 9, mais cela ne fonctionne pas et ne montre aucune erreur. comment y remédier.

voici le code module de matériaux

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform browser/animations';
 import { MaterialModule } from './angular-material/material/material.module';
  import { MatButtonModule } from '@angular/material/button';



@NgModule({
 declarations: [
  AppComponent
 ],
 imports: [
   BrowserModule,
   AppRoutingModule,
   BrowserAnimationsModule,
    MaterialModule,    
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
 })
 export class AppModule { }

app-component.html

<h3>Stroked Buttons</h3>
 <div class="example-button-row">
  <button mat-stroked-button>Basic</button>
  <button mat-stroked-button color="primary">Primary</button>
  <button mat-stroked-button color="accent">Accent</button>
  <button mat-stroked-button color="warn">Warn</button>
  <button mat-stroked-button disabled>Disabled</button>
  <a mat-stroked-button routerLink=".">Link</a>
 </div>

app.module

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

 @NgModule({
  declarations: [],
  imports: [
    MatButtonModule
  ] 
})
export class MaterialModule { }

angular angular-material angular-material2 angular9

7 commentaires

1. Avez-vous mis à jour vers angular-material 9.0.0? 2. que signifie «ne fonctionne pas»?

oui, je mets à jour angular-material 9.0.0. . et j'importe le module de bouton de tapis mais il montre un bouton simple

Montrez alors le code que vous utilisez pour le bouton du tapis. Fondamentalement, nous avons besoin de suffisamment d'informations dans la question elle-même pour vous aider à comprendre ce qui ne va pas. La mise au point sur le bouton qui n'a pas le style / n'apparaît pas comme prévu est un problème assez spécifique.

ajouter MatButtonModule dans le tableau importations d'AppModule

@ShubhamPatil C'est la reconstitution la plus simple de la configuration basée sur ce que vous avez dit: stackblitz.com/edit/ angular-gputfr . Pouvez-vous fournir des messages d'erreur ou des détails sur ce qui ne fonctionne pas. Edit: Prashant a la réponse

il n'y a pas de message d'erreur.

Que se passe-t-il si vous exportez également tous les modules de matériaux dans votre fichier material.module.ts ?

3 Réponses :

2
votes

Vous devrez peut-être également ajouter des modules de matériaux aux exportations comme ceci:

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

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatToolbarModule } from '@angular/material/toolbar';

const mat = [
  MatButtonModule,
  MatIconModule,
  MatMenuModule,
  MatSidenavModule,
  MatSlideToggleModule,
  MatToolbarModule,
];

@NgModule({
  imports: [
    ...mat,
  ],
  exports: [
    ...mat,
  ],
})
export class MaterialModule { }

Voici un exemple d'un module de matériaux que j'utilise dans un projet:

XXX

De cette façon, tout ce qui est ajouté au tableau sera importé et exporté vers d'autres modules.

4 commentaires

est-il nécessaire de créer un fichier MaterialModule ts

Non pas nécessaire. Vous pouvez importer tous les modules dans l'app.module.ts ou tout autre module déclaré. C'est juste pour la maintenabilité.

Il y a quelques problèmes avec Angular 9 et Angular Material, j'ai ajouté dans l'exportation et l'importation mais j'obtiens une erreur: cela signifie probablement que la bibliothèque (@ angular / material / sidenav) qui déclare MatSidenav n'a pas été traitée correctement par ngcc, ou est non compatible avec Angular Ivy

@MJX Avez-vous trouvé une solution pour cela?

2
votes

Pour ceux d'entre vous qui éprouvent encore des difficultés et je ne sais pas pourquoi ce problème a été rejeté, je viens de redémarrer le code de mon studio visuel et cela a fonctionné pour moi.

0 commentaires

1
votes

La bibliothèque de matériaux angulaires (@ angular / material / *) n'a pas été traitée correctement par ngcc, ou n'est pas compatible avec Angular Ivy (vs.9).

Ajoutez package.json

"scripts": {
    "postinstall": "ngcc"
  },

0 commentaires