Import des modules material : has no exported member

**hervane56** · 03/01/2020, 01h16

Bonjour,

Je suis actuellement en train d'apprendre Angular et je rencontre quelques difficultés , notamment sur l'import des modules material à partir d'un module créé.

Voici mes fichiers :

index.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MaFamilleDabord</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- material-->
  <!--<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

style.css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
body{
    color:white;
    background-color:black;
    background-image:url(assets/images/connexion/etoilesGif.gif);
    background-size: 100% ;
    margin:0;
}

material module

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import {NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MatButtonModule, MatCardModule, MatDialogModule, MatInputModule, MatTableModule,
  MatToolbarModule, MatMenuModule,MatIconModule, MatProgressSpinnerModule
} from '@angular/material';
@NgModule({
  imports: [
  CommonModule,
  MatToolbarModule,
  MatButtonModule,
  MatCardModule,
  MatInputModule,
  MatDialogModule,
  MatTableModule,
  MatMenuModule,
  MatIconModule,
  MatProgressSpinnerModule
  ],
  exports: [
  CommonModule,
   MatToolbarModule,
   MatButtonModule,
   MatCardModule,
   MatInputModule,
   MatDialogModule,
   MatTableModule,
   MatMenuModule,
   MatIconModule,
   MatProgressSpinnerModule
   ],
})
export class MaterialModule { }

module app

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';
import { MaterialModule } from './material/material.module';
import { AppRoutingModule } from './material/app-routing/app-routing.module';
import {FormsModule} from '@angular/forms';
 
@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app routing

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from '../../user/user.component';
import { LoginComponent } from '../../login.component';
const routes: Routes = [
  { path: 'user', component: UserComponent },
  { path: 'login', component: LoginComponent },
  {path : '', component : LoginComponent}
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})
export class AppRoutingModule { }

voici l'architecture de mon projet
Nom : archi.PNG
Affichages : 2350
Taille : 21,0 Ko

Et voici les erreurs que je rencontre:
Nom : routing.PNG
Affichages : 2371
Taille : 29,3 Ko

Nom : material_module.PNG
Affichages : 2359
Taille : 35,6 Ko

Nom : module_app.PNG
Affichages : 2370
Taille : 40,9 Ko

Pour module app et le module de rotuing, l'erreur est la même :

Cannot find module './login/login.component'.ts(2307)

Je ne comprends pas pourquoi j'ai cette erreur alors que le même chemin avec le composant user n'a pas de problème et login et user sont au même niveau au vu de mon archi.

Pour le module material, l'erreur est :

node_modules/@angular/material/material"' has no exported member 'MatProgressSpinnerModule'.ts(2305)

pour chacun des modules de material importé et là non plus je ne comprends pas. Pouvez m'aider à résoudre ces problèmes s'il vous plaît

.

Merci d'avance.

**krakatoa** · 03/01/2020, 13h50

cannot find module './login/login.component'.ts(2307)
--> il ne trouve pas le module pas le composant !

on rend un composant exportable via un module (dans celui ci tu exporte la classe)
ainsi tu pourras importe ce module pour utiliser le composant ailleurs...

on importe un module (pas un composant)
par contre, on déclare un composant

Import des modules material : has no exported member

Angular

Vue hybride

Discussions similaires

Partager

Partager