Créer des Packages NPM pour Angular 2+

Introduction

Lorsque vous développez une application en utilisant Angular 2+, il est fréquent de rencontrer la nécessité de partager des composants entre plusieurs applications. La publication de ces composants sous forme de package NPM constitue une approche idéale pour faciliter leur partage et leur mise à jour. Dans ce tutoriel, nous allons explorer les étapes à suivre pour créer un package NPM pour Angular 2+.

Section 45.1 : Obtenir une référence à NgZone

Avant de passer à la création du package NPM, il est important de comprendre comment obtenir une référence à NgZone. La référence à NgZone peut être injectée via le système de dépendance.

import { Component, OnInit, NgZone } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<p>hello</p>'
})
export class AppComponent implements OnInit {
  constructor(private _ngZone: NgZone) {}

  ngOnInit() {
    this._ngZone.runOutsideAngular(() => {
      // Faire quelque chose en dehors d'Angular pour éviter la détection des changements
    });
  }
}

Section 45.2 : Utiliser NgZone pour exécuter plusieurs requêtes HTTP

Lorsque vous devez exécuter plusieurs requêtes HTTP avant de rendre les données, il est possible d’utiliser runOutsideAngular pour exécuter le code en dehors d’Angular et éviter la détection des changements inutiles. Une fois que les données sont disponibles, vous pouvez utiliser la méthode run de NgZone pour exécuter le code à l’intérieur d’Angular.

import { Component, OnInit, NgZone } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'app-root',
  template: '<p>hello</p>'
})
export class AppComponent implements OnInit {
  private data: any[];

  constructor(private http: Http, private _ngZone: NgZone) {}

  ngOnInit() {
    this._ngZone.runOutsideAngular(() => {
      this.http.get('resource1').subscribe((data1: any) => {
        // La première réponse est revenue, vous pouvez utiliser les données pour la requête suivante
        this.http.get(`resource2?id=${data1['id']}`).subscribe((data2: any) => {
          this.http.get(`resource3?id1=${data1['id']}&id2=${data2}`).subscribe((data3: any) => {
            this._ngZone.run(() => {
              this.data = [data1, data2, data3];
            });
          });
        });
      });
    });
  }
}

Section 46 : Animer des éléments avec Angular

L’animation dans Angular permet de créer des animations qui fonctionnent avec la même performance native que les animations CSS pur.

import { Component } from '@angular/core';
import { trigger, state, transition, animate, style } from '@angular/animations';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <button *ngFor="let user of users" [class.button]="user.active">
        {{ user.firstName }}
      </button>
    </div>
  `,
  styles: [
    `
      .button {
        height: 30px;
        width: 100px;
        border: 1px solid rgba(0, 0, 0, 0.33);
        border-radius: 3px;
        margin-bottom: 5px;
      }
    `,
  ],
  animations: [
    trigger('buttonState', [
      state('true', style({
        background: '#04b104',
        transform: 'scale(1)',
      })),
      state('false', style({
        background: '#e40202',
        transform: 'scale(1.1)',
      })),
      transition('true => false', animate('100ms ease-in')),
      transition('false => true', animate('100ms ease-out')),
    ]),
  ],
})
export class AppComponent {
  users = [
    { firstName: 'Narco', active: false },
    { firstName: 'Bombasto', active: false },
    { firstName: 'Celeritas', active: false },
    { firstName: 'Magneta', active: false },
  ];
}

Section 47 : Créer un package NPM pour Angular 2+

Pour publier une bibliothèque de composants en tant que package NPM, vous devez suivre les étapes suivantes.

Étape 1 : Configurer les fichiers de configuration

• gitignore : éviter la versionning de fichiers et dossiers inutiles.
• npmignore : éviter la publication de fichiers et dossiers inutiles.
• gulpfile.js : configurer Gulp pour compiler votre application.

var gulp = require('gulp');
var embedTemplates = require('gulp-angular-embed-templates');
var inlineNg2Styles = require('gulp-inline-ng2-styles');

gulp.task('js:build', function () {
  gulp.src('src/*.ts')
    .pipe(embedTemplates({ sourceType: 'ts' }))
    .pipe(inlineNg2Styles({ base: '/src' }))
    .pipe(gulp.dest('./dist'));
});

Étape 2 : Configurer le fichier index.d.ts

Ce fichier est utilisé par TypeScript pour importer les modules externes. Il aide l’éditeur avec la completion automatique et les conseils de fonction.

export * from './lib';

Étape 3 : Créer un fichier index.js comme point d’entrée du package

Ce fichier est utilisé par NPM pour importer le package. Il permet à l’application de savoir où trouver les composants exportés.

exports.AngularXMinimalNpmPackageModule = require('./lib').AngularXMinimalNpmPackageModule;

Étape 4 : Configurer le fichier package.json pour la publication sur NPM

Ce fichier est utilisé pour configurer la publication du package sur NPM.

{
  "name": "angular-x-minimal-npm-package",
  "version": "0.0.18",
  "description": "An Angular 2+ Data Table that uses HTTP to create, read, update and delete data from an external API such REST.",
  "main": "index.js",
  "scripts": {
    "watch": "tsc -p src -w",
    "build": "gulp js:build && rm -rf lib && tsc -p dist"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/vinagreti/angular-x-minimal-npm-package.git"
  },
  "keywords": [
    "Angular",
    "Angular2",
    "Datatable",
    "Rest"
  ],
  "author": "bruno@tzadi.com",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/vinagreti/angular-x-minimal-npm-package/issues"
  },
  "homepage": "https://github.com/vinagreti/angular-x-minimal-npm-package#readme",
  "devDependencies": {
    "gulp": "3.9.1",
    "gulp-angular-embed-templates": "2.3.0",
    "gulp-inline-ng2-styles": "0.0.1",
    "typescript": "2.0.0"
  },
  "dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "rxjs": "5.0.2",
    "zone.js": "0.7.4"
  }
}

Étape 5 : Configurer le fichier tsconfig.json pour la compilation de TypeScript

Ce fichier est utilisé par TypeScript pour configurer la compilation.

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "",
    "rootDir": ".",
    "outDir": "./dist"
  }
}

En suivant ces étapes, vous pourrez créer un package NPM pour votre bibliothèque de composants Angular 2+.

Conclusion

Créer un package NPM pour Angular 2+ nécessite une bonne compréhension des concepts et techniques liés à la publication de packages sur NPM. En suivant les étapes décrites dans ce tutoriel, vous pourrez créer votre propre package NPM pour partager vos composants avec les autres développeurs.