Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre habitué
    Inscrit en
    juin 2005
    Messages
    486
    Détails du profil
    Informations forums :
    Inscription : juin 2005
    Messages : 486
    Points : 198
    Points
    198
    Par défaut Impossible d'afficher le contenu de app.component.html
    Bonjour

    J'ai débuté un projet Angular mais je rencontre un problème au niveau de ma page index.html. en fait le contenu de la page app.component.html ne s'affiche pas dans la balise <app-root></app-root> de index.html.

    Voici la page 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
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>MonProjetAngular</title>
      <base href="/">
     
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
      <app-root></app-root>
    </body>
    </html>

    Voici app.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
    <!--The content below is only a placeholder and can be replaced.-->
    <div style="text-align:center">
      <h1>
        Welcome to {{ title }}!
      </h1>
      <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
    </div>
    <h2>Here are some links to help you start: </h2>
    <ul>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
      </li>
    </ul>

    Voici le contenu de app.component.ts

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import { Component } from '@angular/core';
     
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
      title = 'test';
    }
    Et voici le contenu de app.module.ts:

    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
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
     
    import { AppComponent } from './app.component';
     
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    Merci

  2. #2
    Membre extrêmement actif Avatar de Sodium
    Femme Profil pro
    Développeuse web
    Inscrit en
    avril 2014
    Messages
    1 741
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeuse web

    Informations forums :
    Inscription : avril 2014
    Messages : 1 741
    Points : 1 751
    Points
    1 751
    Par défaut
    Heuuuu tu n'essayes pas d'accéder à ton application en dev comme sur un site web apache normal par hasard ?

  3. #3
    Membre habitué
    Inscrit en
    juin 2005
    Messages
    486
    Détails du profil
    Informations forums :
    Inscription : juin 2005
    Messages : 486
    Points : 198
    Points
    198
    Par défaut
    Non non, je lance le serveur en faisant:

    Et je fais double clique sur index.html pour lancer la page.

  4. #4
    Membre extrêmement actif Avatar de Sodium
    Femme Profil pro
    Développeuse web
    Inscrit en
    avril 2014
    Messages
    1 741
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeuse web

    Informations forums :
    Inscription : avril 2014
    Messages : 1 741
    Points : 1 751
    Points
    1 751
    Par défaut
    Ah oui mais non justement, pour accéder au serveur tu dois utiliser le serveur qu'Angular génère pour toi, normalement à l'adresse localhost:4200

  5. #5
    Membre habitué
    Inscrit en
    juin 2005
    Messages
    486
    Détails du profil
    Informations forums :
    Inscription : juin 2005
    Messages : 486
    Points : 198
    Points
    198
    Par défaut
    Ah oui c'est vrai, tu as raison.

    Merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Angular2 et Net : impossible de charger app.component.html
    Par nightcyborg dans le forum Développement Web avec .NET
    Réponses: 0
    Dernier message: 02/12/2016, 13h24
  2. Impossible d'afficher le contenu d'une table
    Par menoulette dans le forum Débuter
    Réponses: 1
    Dernier message: 05/05/2012, 00h28
  3. Réponses: 49
    Dernier message: 24/11/2010, 17h06
  4. Afficher le contenu d'une page html
    Par megamax dans le forum Intégration
    Réponses: 0
    Dernier message: 26/07/2009, 17h22
  5. Réponses: 2
    Dernier message: 20/11/2005, 18h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo