<app-root> n'est pas rempli

Bonjour, je débute sur angular et je développe une petite application et quand je lance l'application et vais à l'adresse http://localhost:4200/,
le résultat est le suivant

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DemoImmobilierFront</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>

Le fichier index.html est le suivant

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DemoImmobilierFront</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

le fichier app.module.ts est le suivant

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
import { AppRoutingModule } from './app-routing.module';
import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppProduitImmobilierDetailsComponent } from './app-produit-immobilier-details/app-produit-immobilier-details.component';
 
@NgModule({
  declarations: [
    AppComponent,
    AppProduitImmobilierDetailsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

le fichier app.component.ts est le suivant

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Component } from '@angular/core';
import {ProduitImmobilierDTO} from './produit-immobilier-dto';
import {AppServiceService} from './app-service.service';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'demoImmobilierFront';
 
  public annonces: ProduitImmobilierDTO[];
 
  constructor(private service: AppServiceService) {}
 
  ngOnInit() {
      this.service.getListProduitImmobilierDTO().subscribe(
        articles => this.annonces = articles
      );
  }
}

Le fichier app.component.html est le suivant

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="col-md-6">
  <h2> List of Annonces</h2>
    <div *ngFor="let annonce of annonces; let i = index">
      <div class="card">
        <img src="assets/image{{i}}.jpg" alt="Avatar" style="float:left;width:100%">
        <div class="container">
          <h4><b>{{annonce.type}}</b></h4>
          <h4><b>{{annonce.dateConstruction}}</b></h4>
          <h4><b>{{annonce.adresse}}</b></h4>
          <h4><b>{{annonce.prix}}</b></h4>
          <h4><b>{{annonce.surface}}</b></h4>
        </div>
      </div> 
    </div>
 
  </div>
<router-outlet></router-outlet>

le service AppServiceService dans le fichier app-service.service.ts est le suivant

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Injectable } from '@angular/core';
import {Http, Response} from '@angular/http';
import {DossierPinelDTO} from './dossier-pinel-dto';
import {ProduitImmobilierDTO} from './produit-immobilier-dto';
import { Observable} from 'rxjs';
import { map } from 'rxjs/operators';
 
@Injectable({
  providedIn: 'root'
})
export class AppServiceService {
 
  constructor(private http: Http) {}
 
  getDossierPinelDTO(id: number): Observable<DossierPinelDTO> {
    return this.http.get('/api/produitimmobilier/' + id).pipe(map(response => DossierPinelDTO.fromJson(response.json())));
  }
 
  getListProduitImmobilierDTO(): Observable<ProduitImmobilierDTO[]> {
    return this.http.get('/api/produitimmobilier/all').pipe(map((jsonArray: any) =>jsonArray.map((jsonItem) => ProduitImmobilierDTO.fromJson(jsonItem))));
  }
}

Pourriez vous m'aider s'il vous plait ? Merci