Angular – Component Library erstellen

Downloads:

Update 11.05.2018

Angular Component Libraries lassen sich nun eleganter mittels ng-packagr erstellen.
Erfahre hier mehr.

Angular Component Library Projekt anlegen

Mittels Angular Cli lässt sich mit folgendem Befehl sehr einfach ein neues Angular Projekt erstellen in dem wir unsere Library entwickeln:
ng new ng2-cli-test

Angular App starten

Wir wechseln in das Root Verzeichnis der Angular Applikation und starten sie im Live Reload Modus, somit müssen wir bei Änderungen am Code kein manuelles Refresh im Browser tätigen:
ng serve

Neue Component definieren

Unter „src/app“ erstellen wir einen neuen Ordner „my-component“.
In diesem Ordner erstellen wir eine neue Datei „my-component.component.ts“.
Für Testzwecke reicht eine einfache Komponente, die bei Verwendung nur „hello my component“ ausgibt.

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

@Component({
    selector: 'my-component',
    template: 
            `<div>
                <h3>hello my component</h3>
            </div>`
})

export class MyComponent implements OnInit {
    ngOnInit() {
        console.info("hello my component");
    }       
}

Neues Component Module definieren

Um Angular 2 konform zu entwickeln definieren wir ein Modul, welches unsere Komponente deklariert und zur Verwendung in anderen Komponenten exportiert.
Dafür erstellen wir eine Datei „my-component.module.ts“ mit folgendem Inhalt:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my-component.component';

@NgModule({
    declarations: [MyComponent],
    exports: [MyComponent]      
})
export class MyComponentModule { }

Einstiegspunkt definieren

Zusätzlich benötigen wir eine Datei, die sämtliche gebrauchten Module und Komponenten exportiert, damit später keine Import Probleme entstehen.
Dafür erstellen wir die Datei „index.ts“ mit folgendem Inhalt:

export * from './my-component.module';
export * from './my-component.component';

.tsconfig.json Datei erstellen

Um eine Component Library zu kompilieren, benötigen wir „tsc“ ( TypeScript Comipler )
Mittels „.tsconfig“ Datei können wir Angaben machen, die der Typescript Compiler beachtet.
Zur Übersicht erstellen wir in unserem Komponenten Verzeichnis eine neue „.tsconfig.json“ Datei mit folgenden Einträgen.
Wichtig zu beachten!

• outDir – Output Verzeichnis der Javascript Dateien
• files – Dateien, die von tsc kompiliert werden
• exclude – Dateien, die ausgeschlossen werden

{
    "compilerOptions": {
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "ES5",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "declaration": true,
        "outDir": "./dist",
        "moduleResolution": "node"
    },
    "files": [
        "my-component.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

package.json anlegen

Zusätzlich legen wir eine neue „package.json“ Datei im „my-component“ Verzeichnis an, welche unser Start Script, die Abhängigkeiten und den Modulnamen definiert.

{
    "name": "my-component",
    "version": "0.0.2",
    "scripts": {
        "build": "tsc"
    },
    "angular-cli": {},
    "devDependencies": {
      "@angular/common": "^4.0.0",
        "@angular/compiler": "^4.0.0",
        "@angular/core": "^4.0.0",
        "@angular/forms": "^4.0.0",
        "@angular/http": "^4.0.0",
        "@angular/platform-browser": "^4.0.0",
        "@angular/platform-browser-dynamic": "^4.0.0",
        "@angular/router": "^4.0.0",
        "core-js": "^2.4.1",
        "rxjs": "^5.1.0",
        "zone.js": "^0.8.4"
    },
    "devDependencies": {
        "typescript": "2.2.0",
        "@types/node": "~6.0.60"
    },
    "typings": "./dist/index.d.ts",
    "module": "./dist/index.js"
}

Component Library erstellen

Nun lässt sich im Verzeichnis unserer „my-component“ mittels folgendem Befehl die Component erstellen:
npm run build
Nach erfolgreichem Ausführen des Befehls sollte der Ordner „dist“ mit den kompillierten Dateien erstellt werden.

Library für GitHub vorbereiten

Für den Upload zu GitHub erstellen wir eine „.gitignore“ Datei mit folgendem Inhalt.
Das stellt sicher, dass nur die per „tsc“ erstellten Dateien hochgeladen werden.

# Node generated files
node_modules
npm-debug.log

# OS generated files
Thumbs.db
.DS_Store

# Ignored files

*.ts
!/dist/*.d.ts
tsconfig.json

Projekt auf GitHub veröffentlichen:

Mittels GitHub Desktop Client lassen sich GitHub Repositories sehr einfach erstellen, committen und synchronisieren.
Anleitung hier

Component Library via Git installieren

Wichtig – ng serve muss nach der Installation nochmals aufgerufen werden.
Nachdem unser Package erfolgreich auf GitHub gehostet wurde, kann man dieses über eine Eingabeaufforderung installieren.
Dafür navigieren wir in ein neues Projekt und importieren unsere Angular Component Library mit folgendem Befehl:
npm install git+https://github.com/MuchaDev/my-component --save

Modul importieren

Das Modul lässt sich nun einfach in anderen Modulen importieren.
z.B.: erstellen wir ein weiteres Angular Cli Projekt und importieren unser Modul im App Module.
import { MyComponentModule } from 'my-component';

Nun muss das Modul noch unter den imports eingetragen werden:

imports: [
    ..
    MyComponentModule
    ..
]

Component benutzen

Final lässt sich die Komponente im app.component.html benutzen:
<my-component></my-component>