Informatique
Publié le 09/07/2017, rédigé par Chloé MAHALIN

@Angular/cli

Changer l'icone par défaut de mon projet

Prérequis, installation de @angular-cli.

Objectif

Nous allons changer l'icône par défaut de votre site web.

Par défaut, dans votre projet Angular4 créé avec @angular/cli, vous avez cette icone dans l'onglet de votre navigateur : icone par défaut{.center} Nous allons la remplacer par une autre.

Supprimer l'icône en cours et mettre la votre à la place

Vous avez deux solutions pour remplacer l'icône de votre site web :

Rajouter votre icône au dossier asset

Le dossier src/assets/ contient les sources nécessaires au bon fonctionnement de votre site web mais qui sont décorrélés du framework. Comme par exemple, vos fonts, vos images ou des fichiers css extérieurs. Vous pouvez aussi rajouter des librairies extérieures.

Pour ce faire : rajoutez votre icône dans le dossier src/assets/ :

myProject
    |
    |____src/
    |     |
    |     |____app/ 
    |     |
    |     |____assets/
    |     |      |____images/
    |     |             |____myIcon.png
    |     |____index.html 
    |
    |____package.json
    |____karma.conf.json
    ...

Vous n'aurez alors qu'à remplacer le chemin vers votre icône dans le fichier index.html :

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>My awesome application</title>
    <link rel="icon" type="image/x-icon" href="/assets/images/myIcon.png">
    <base href="/">
  </head>
  <body>
    <app-root>Loading...</app-root>
  </body>
</html>

Remplacer l'icône courante par la votre

C'est sans doute la manière la plus propre. Mais pour la mettre en place, il faut comprendre un peu la configuration angular-cli.

Dans votre projet, se trouve un fichier .angular-cli.json à la racine

myProject
    |
    |____src/
    |     |
    |     |____app/ 
    |     |____assets/
    |     |____index.html 
    |
    |____package.json
    |____karma.conf.json
    |____.angular-cli.json
    ...

Ce fichier décide de beaucoup de choses, notamment des fichiers qui seront inclus dans votre livrable lors du build :

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "toto"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ]
    }
  ],
...
}

L'attribut assets de ce fichier indique les fichiers qui seront rajoutés à votre livrable lors du build. Sont indiqués dans la liste des assets : le dossier assets, bien sur, mais aussi le nom de l'icône.

Remplacez le nom de l'icone courante par la votre

N'hésitez pas : remplacez le nom de l'icône par la votre :

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "toto"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "myIcon.png"       // <===== Ici.
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ]
    }
  ],
...
}
Supprimez l'icone courante et mettez la votre

Dans votre projet, supprimez l'icone de base, elle ne vous sera pas utile (Vous ne versionnez pas votre projet ?) et mettez la votre :

myProject
    |
    |____src/
    |     |
    |     |____app/ 
    |     |____assets/
    |     |____index.html 
    |     |____favicon.ico    <==== Supprimez cette icone
    |     |____myIcon.png    <==== Rajoutez la votre
    |
    |____package.json
    |____karma.conf.json
    |____.angular-cli.json
    ...
Mettez à jour le fichier index.html

Vous n'aurez alors qu'à remplacer le chemin vers votre icône dans le fichier index.html :

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>My awesome application</title>
    <link rel="icon" type="image/x-icon" href="myIcon.png">   <!-- ICI ! -->
    <base href="/">
  </head>
  <body>
    <app-root>Loading...</app-root>
  </body>
</html>

Et voilà !

Sélection d'articles :

ITAMETIS

Bienvenue sur l'université d'ITAMETIS où ses membres s'expriment librement sur les sujets qui leur plaisent. C'est un lieu de partage et d'échanges afin de fournir à tous, une base de connaissances accessible de manière libre et gratuite.

Qui nous sommes

Politique de Confidentialité