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

@Angular/cli

Ajouter des sources extérieures (assets, ex : css, font, image, ...) à mon projet

Prérequis, installation de @angular-cli.

Objectif

Comprendre ou déposer les fichiers extérieurs à l'application afin qu'elles soient récupérées et intégrées à l'application lors du build.

Comprendre comment ajouter un dossier ou un fichier à la liste des fichiers récupérés et intégrés à l'application lors du build.

Ou poser un fichier extérieur au framework Angular mais nécessaire à l'application ?

Lors de la création de votre projet, @angular/cli initie pour vous un dossier assets/ :

myProject
    |
    |____e2e/
    |____src/
    |     |
    |     |____app/ 
    |     |     |____app.component.css
    |     |     |____app.component.html
    |     |     |____app.component.spec.ts
    |     |     |____app.component.ts
    |     |     |____app.module.ts
    |     |____assets/                      <===== Ici !
    |     |____environments/
    |     |        |____environment.prod.ts
    |     |        |____environment.ts
    |     |____favicon.ico
    |     |____index.html 
    |     |____main.ts
    |     |____polyfills.ts
    |     |____styles.css
    |     |____test.ts 
    |     |____tsconfig.app.json
    |     |____tsconfig.spec.json
    |     |____typings.d.ts
    |
    |____.angular-cli.json
    |____karma.conf.json
    |____package.json
    |____protractor.conf.json
    |____tsconfig.json
    |____tslint.json
    ...

Ce dossier assets est disponible pour vous ! Vous pouvez le remplir de ce qui vous convient : des fonts, des images, des fichiers de style css. Il sera automatiquement exporté dans le dossier généré lors du build de prod.

Vous pourrez ensuite faire référence à vos fichiers depuis n'importe quel composant depuis l'url '/assets' :

<!doctype html>
<html>
  <head>
    <title>My awesome application</title>
    <link rel="stylesheet" type="text/css" href="/assets/css/font-awesome.min.css">    <!-- un exemple -->
    <base href="/">
  </head>
  <body>
    <app-root>Loading...</app-root>
  </body>
</html>

Configurer votre build angular pour prendre en compte un de vos dossier contenant des fichiers statiques extérieurs au framework

Supposons que vous ayez créé un dossier images/ dans src/, qui contient vos images.

myProject
    |
    |____e2e/
    |____src/
    |     |
    |     |____app/ 
    |     |____assets/
    |     |____environments/
    |     |____images/          <===== Votre nouveau dossier
    |
    |____.angular-cli.json
    |____package.json
    ...

Vous souhaitez que ce dossier apparaisse dans le dossier dist/ lors du build (commande ng build on npm run build).

La clé se trouve dans le fichier .angular-cli.json : 

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my Application"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [                   <==== Ici
        "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"
      ],...
    }
  ],
  ...
}

Il vous suffit de rajouter le chemin vers votre dossier pour qu'il soit naturellement inclus comme un dossier Asset.

Après :

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my Application"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "images"                        <==== Je l'ai rajouté 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"
      ],...
    }
  ],
  ...
}

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é