Avec Angular 8, il est assez simple de créer un composant, pour ensuite le publier sur NPM. Mais encore faut-il savoir comment ! Voici la solution... ;)

Pour ce faire, il faudra créer une librairie d'Angular.

Publier le composant sur NPM vous permettra de le réutiliser plus facilement par la suite, si vous souhaitez le rendre public.

Prérequis:

  • NodeJS (v8.11.2) and NPM (v6.1.0)
  • Angular Cli (v6.0.8)

Pour ce guide, nous nous baserons sur la création du composant Angular Cd Tabs.

Génération de la librairie

Vous devez gérer les libraries dans un projet Angular, qui peut être le votre.

Si vous n'avez pas de projet Angular, vous pouvez en créer un:

ng new angular-cd-tabs

Placez-vous dans le répertoire du projet:

cd angular-cd-tabs

Pour générer la librairie, exécutez les commandes suivantes:

ng generate library cd-tabs

Vous venez de générer les fichiers de développement de la librairie Angular!
Maintenant, vous pouvez modifier les fichiers dans le répertoire ./projects/cd-tabs/src/lib pour développer les fonctions de votre composant.

Un peu plus loin...

Voici quelques explications sur ce qu'il vient de se produire. ;)

Lors de la génération de la librairie, les entrées suivantes ont été ajoutées au fichier tsconfig.json:

{
    //...
    "paths": {
      "cd-tabs": [
        "dist/cd-tabs"
      ],
      "cd-tabs/*": [
        "dist/cd-tabs/*"
      ]
    }
  },
  //...
}

Ces lignes permettent au projet de savoir où sont situé les fichiers compilés de votre composant, c'est-à-dire dans dist/cd-tabs. Ainsi, au lieu d'avoir un import avec un chemin relatif vers le composant, le code suivant peut être utilisé: import * from 'cd-tabs';.

Dans le fichier angular.json, les lignes suivantes ont été ajoutées:

{
  //...
    "cd-tabs": {
      "projectType": "library",
      "root": "projects/cd-tabs",
      "sourceRoot": "projects/cd-tabs/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/cd-tabs/tsconfig.lib.json",
            "project": "projects/cd-tabs/ng-package.json"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/cd-tabs/src/test.ts",
            "tsConfig": "projects/cd-tabs/tsconfig.spec.json",
            "karmaConfig": "projects/cd-tabs/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/cd-tabs/tsconfig.lib.json",
              "projects/cd-tabs/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  //...
}

Cela correspond à la configuration Angular du composant dans le projet, nécessaire et utilisée pour le build, le codelint...

Le préfixe lib est ajouté par défaut, mais vous pouvez l'enlever ou définir votre propre préfixe.

Utilisation du composant

Une fois que vous avez modifié les fichiers de développement du composant, vous devez compiler la librairie:

ng build cd-tabs

Et maintenant, vous pouvez l'utiliser dans votre application:

<cd-tabs>
    <cd-tab-bar>
        <cd-tab-button>Tab 1</cd-tab-button>
        <cd-tab-button>Tab 2</cd-tab-button>
    </cd-tab-bar>
    <cd-tab-content>Tab 1 is displayed !</cd-tab-content>
    <cd-tab-content>Tab 2 is displayed !</cd-tab-content>
</cd-tabs>

L'import dans le fichier `module.ts` est simplifié comme ceci:

```typescript
import CdTabsModule from 'cd-tabs';

Publication sur NPM

Tout d'abord, il vous faut créer un compte NPM.

Puis, avec la console, il faut vous connecter:

cd dist/cd-tabs
npm adduser

Vous serez amené à renseigner vos informations d'identification de compte.

Maintenant, il ne vous reste plus qu'à publier avec la commande:

npm publish

Avant de publier, renseignez bien les informations du package dans le fichier projects/cd-tabs/package.json. Avant de publier, rédigez correctement le README publié sur NPM: projects/cd-tabs/README.md.

Un peu plus loin...

Vous pouvez automatiser tout cela par le biais de scripts.

Dans le fichier package.json, ajoutez les lignes suivantes:

{
    //...
    "scripts": {
    "build-lib": "ng build cd-tabs",                         // Build the librarie
    "npm-publish": "cd dist/cd-tabs && npm publish",         // Publish the librarie
    "publish": "npm run build-lib && npm run npm-publish"    // Build and Publish the librarie
    },
    //...
}

Vous pouvez maintenant exécuter la commande npm run publish, pour compiler et publier le composant.

J'espère que cet article vous a été utile. ;)

Je vous dis à plus pour le prochain. xD


Liens utiles:

Previous Post Next Post


Add a comment