Bonsoir,

J'ai crée un composent header que j'aimerai utiliser sur la page signin.component.html sauf que l'affichage du header ne s'exécute pas dans la page signin.

Voici dans un premier temps, la structure du petit projet.



Par ailleurs, je n'ai aucun message d'erreur sur la console...



J'ai crée une reproduction sur Stackblitz -> https://stackblitz.com/github/kora13...component.html

Sincèrement, je ne sais pas trop quelle partie du code afficher, je m'excuse si j'affiche trop d'informations:

header.component.css

Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
:host {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  height: 60px;
  background-color: #ececec;
}

header.component.html
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
<span>Header Works!!</span>
shared.module.ts
Code JS : 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
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { RouterModule } from '@angular/router';
 
@NgModule({
  declarations: [
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    CommonModule,
    RouterModule,
  ],
  exports: [
    HeaderComponent,
    FooterComponent
  ]
})
export class SharedModule { }
signin.component.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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<header></header>
 
<div class="container">
    <div class="signin">
    <form (ngSubmit)="login()" class="sign-in-form">
    <h2 class="title">Sign in</h2>
    <div class="input-field">
    <i class="fas fa-user"></i>
    <input type="text" name="user" [(ngModel)]="loginForm.user" required maxlength="4" placeholder="Username">
    </div>
    <div class="input-field">
    <i class="fas fa-lock"></i>
    <input type="password" name="password" [(ngModel)]="loginForm.password" required maxlength="4" placeholder="Password">
    </div>
    <input type="submit" value="Login" class="btn">
    <p class="icon-text"> </p>
    <div class="icon-block">
    <a href="#" class="item-icon">
    <i class="fab fa-google"></i>
    </a>
    <a href="" class="item-icon">
    <i class="fab fa-google"></i>
    </a>
    <a href="" class="item-icon">
    <i class="fab fa-google"></i>
    </a>
    </div>
    </form>
    <div class="signin_item_block sign-in-block-form"></div>
 
    </div>
    <div class="panels-container">
    <div class="panel left-panel"></div>
    <div class="panel right-panel">
    <div class="content">
    <h3>Bienvenue sur le site</h3>
    <p>Veuillez choisir votre langue s'il vous plait</p>
    <button class="btn" id="language-btn">Français</button>
    <button class="btn" id="language-btn">Néerlandais</button>
    </div>
    </div>
    </div>
 </div>
identity.module.ts
Code JS : 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
@NgModule({
  declarations: [
    IdentityComponent,
    SigninComponent,
 
  ],
  imports: [
    CommonModule,
    RouterModule,
    FormsModule,
    IdentityRoutingModule
 
  ],
  providers: [
    SessionService
  ]
})
export class IdentityModule { }
app.module.ts
Code JS : 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
@NgModule({
  declarations: [
    AppComponent,  
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    IdentityModule,
    HttpClientModule,
    FormsModule,
    NgxsModule.forRoot([SessionState], {
      developmentMode: true
    }),
    NgxsStoragePluginModule.forRoot({
      key: 'session'
    }),
 
  ],
  providers: [
    CanActivateTeam,
    IsActivate,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AppHttpInterceptor,
      multi: true
 
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Si vous avez une solution, je suis vraiment intéressé, car je galère depuis 2 jours.

Merci beaucoup