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 : 2348 Taille : 21,0 Ko

Et voici les erreurs que je rencontre:
Nom : routing.PNG Affichages : 2369 Taille : 29,3 Ko
Nom : material_module.PNG Affichages : 2357 Taille : 35,6 Ko
Nom : module_app.PNG Affichages : 2368 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.