Création d’une bibliothèque Angular : une étape à la fois

Les bibliothèques de composants sont un moyen important de partager des fonctionnalités entre les applications Angular. Dans ce tutoriel, nous allons créer une bibliothèque de composants simple en suivant les étapes suivantes.

Étape 1 : Créer le projet

Créez un nouveau projet Node.js pour votre bibliothèque. Vous pouvez utiliser la commande npm init pour démarrer.

Étape 2 : Configurer TypeScript

Installez le compilateur de TypeScript en exécutant npm install typescript et configurez-le dans votre fichier tsconfig.json.

{
  "compilerOptions": {
    "baseUrl": ".",
    "declaration": true,
    "stripInternal": true,
    "experimentalDecorators": true,
    "strictNullChecks": false,
    "noImplicitAny": true,
    "module": "es2015",
    "moduleResolution": "node",
    "paths": {
      "@angular/core": ["node_modules/@angular/core"],
      "rxjs/*": ["node_modules/rxjs/*"]
    },
    "rootDir": ".",
    "outDir": "dist",
    "sourceMap": true,
    "inlineSources": true,
    "target": "es5",
    "skipLibCheck": true,
    "lib": [
      "es2015",
      "dom"
    ]
  },
  "files": [
    "index.ts"
  ],
  "angularCompilerOptions": {
    "strictMetadataEmit": true
  }
}

Étape 3 : Configurer Rollup

Installez Rollup en exécutant npm install rollup et configurez-le dans votre fichier rollup.config.js.

export default {
  entry: 'dist/index.js',
  dest: 'dist/bundles/awesome.module.umd.js',
  sourceMap: false,
  format: 'umd',
  moduleName: 'ng.awesome.module',
  globals: {
    '@angular/core': 'ng.core',
    'rxjs': 'Rx',
    'rxjs/Observable': 'Rx',
    'rxjs/ReplaySubject': 'Rx'
  },
  external: ['@angular/core', 'rxjs']
}

Étape 4 : Créer votre bibliothèque

Créez un nouveau dossier src et ajoutez-y vos fichiers de code. Pour ce tutoriel, nous allons créer une simple bibliothèque qui contient deux services.

// src/awesome.service.ts
export class AwesomeService {
  public doSomethingAwesome(): void {
    console.log("Je suis si cool !");
  }
}

// src/another-awesome.service.ts
export class AnotherAwesomeService {
  public doAnotherThingAwesome(): void {
    console.log("C'est encore plus cool ?");
  }
}

Étape 5 : Créer votre module

Créez un nouveau fichier awesome.module.ts qui importe vos services et définit votre module.

// src/awesome.module.ts
import { NgModule } from '@angular/core';
import { AwesomeService } from './awesome.service';
import { AnotherAwesomeService } from './another-awesome.service';

@NgModule({
  providers: [AwesomeService, AnotherAwesomeService]
})
export class AwesomeModule {}

Étape 6 : Ajouter votre module à l’index

Modifiez le fichier index.ts pour exporter vos services et votre module.

// index.ts
export { AwesomeService } from './src/awesome.service';
export { AnotherAwesomeService } from './src/another-awesome.service';
export { AwesomeModule } from './src/awesome.module';

Étape 7 : Compiler et minifier

Exécutez la commande npm run build pour compiler et minifier vos fichiers.

Étape 8 : Publier votre bibliothèque

Publiez votre bibliothèque sur npm en exécutant npm publish.

Conclusion

Créer une bibliothèque Angular est un processus simple qui peut être effectué en suivant les étapes décrites ci-dessus. Avec cette bibliothèque, vous pourrez partager vos composants entre plusieurs applications.

Dernières étapes

• Installez l’extension de développement de Chrome pour Redux.
• Configurez votre store dans votre application Angular.
• Commencez à utiliser votre nouvelle bibliothèque !

J’espère que ce tutoriel vous a été utile. N’hésitez pas à me faire savoir si vous avez des questions ou besoin d’aide supplémentaire.