Import des modules material : has no exported member

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:

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:

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:

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:

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:

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
Pièce jointe 528089

Et voici les erreurs que je rencontre:
Pièce jointe 528092
Pièce jointe 528093
Pièce jointe 528097

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

Citation:

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 :

Citation:

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.