web-dev-qa-db-fra.com

Erreur: Erreurs d'analyse du modèle: 'mat-card' n'est pas un élément connu:

J'ai lancé un projet Angular 4 Material il y a environ deux mois, avec toutes les installations npm en cours à ce moment-là, et j'utilise la plupart des composants de material.angular.io. depuis lors Angular 5.0.0 a été déployé. J'ai reconstruit par projet sur les nouvelles mises à jour, et la console a l'erreur suivante.

Erreur: Erreurs d'analyse du modèle: 'mat-card' n'est pas un élément connu: 1. Si 'mat-card' est un Angular, vérifiez qu'il fait partie de ce module . 2. Si "mat-card" est un composant Web, ajoutez "CUSTOM_ELEMENTS_SCHEMA" au "@ NgModule.schemas" de ce composant pour supprimer ce message.

J'ai vérifié l'installation et je pense que tout est à jour, mais le code qui fonctionnait auparavant échoue maintenant. S'agit-il d'une nouvelle exigence de A5 ou les colis de matériel ne sont-ils pas prêts?

angularangular-materialangular5
4
AppDreamer

Hou la la! J'ai de nouveau rencontré ce problème et j'ai vraiment creusé pour le résoudre. Si vous suivez certaines documentations comme le module Material Side-Nav, vous serez peut-être amené à scinder votre déclaration @NgModule dans app.module.ts afin de séparer les exportations du reste, comme suit ...

@NgModule({
   exports: [
      myModule,
      anotherModule
   ],
})
export class MaterialModule {}

@NgModule({
   imports: [
      ... all the rest of your stuff]
   declarations: [
      ... all your custom Components
})
export class AppModule {}

Dans ce cas, après les avoir divisés, vous ajouterez plus tard des composants personnalisés à l'aide de ...

ng g component components/myNewModule

Il peut placer de nouvelles "déclarations:" supplémentaires dans l'autre section @NgModule, coupant ainsi l'accès à des éléments tels que des mat-cards à ces composants! Déplacez simplement les nouvelles déclarations ajoutées vers les autres et le problème disparaîtra.

J'ai testé cela deux fois et il semble résoudre le problème si vous obtenez l'erreur Error: Template parse: 'mat-card' n'est pas un élément connu ci-dessus.

1
AppDreamer

Dans Angular 6 

app.module.ts:

import { MatCardModule } from '@angular/material';
...
@NgModule({
    declarations: [
    AppComponent,...
],
imports: [
...
MatCardModule,
....
]
...

})

html:

<mat-card>
    <p>
    it works!
    </p>
</mat-card>
1
Yuri Gridin

Pouvez-vous essayer d'importer MatCardModule à partir de son point d'entrée distinct (alias @angular/material/card)? Cela a fonctionné pour moi.

Si vous ne fournissez aucun code, je ne peux pas vraiment vous aider autrement.

0
Edric

J'ai fini par démarrer une nouvelle application ...

npm cache clean -f
npm install -g n
ng new myAppName

Ensuite, j'ai copié mes composants un par un dans le dossier des composants. Avec chaque copie, je cours et corrige chaque problème (comme l’ajout d’importations dans le fichier app.module.ts, etc.). J'ai installé les composants npm uniquement lorsqu'ils étaient nécessaires au bon code actuel.

npm install myComponent --save

Au fur et à mesure, j'ai trouvé quelques éléments md obsolètes (tels que md-card) et les ai convertis dans leur version mat-element. Fait intéressant, apparemment dans Angular 4, ils supportaient les versions mat et md des mêmes composants, mais dans 5 ils semblent en avoir déconseillé certaines.

L’après-midi a été long, mais cela m’a aidé à éliminer tous les modules npm que j’ai essayés et abandonnés et à présent tout est cuit.

0
AppDreamer