Getting started (Angular)

Allgemein

Das TypeScript-Frontend verfügt nicht über dieselben Funktionalitäten wie das GWT-Frontend oder der Swing-Client. Eine Liste der Limitations kann in der Knowledge-Base eingesehen werden.

Setup npm

Im ersten Schritt muss npm so eingestellt werden, dass alle Artefakte unter dem Scope @levigo vom levigo Nexus heruntergeladen werden. Hierfür wird ein Account benötigt, welchen Sie über den jadice support erhalten können. Wenn Sie bereits einen Account für den levigo haben, muss dieser noch über den jadice support freigeschaltet werden.

npm config set registry https://artifacts.jadice.com/repository/npm-hosted/ --scope=@levigo
npm login --scope=@levigo

Installation

Nun müssen die benötigten Dependencies installiert werden.

npm install @levigo/ngx-webtoolkit // Angular Komponenten
npm install @levigo/webtoolkit-ng-client // Web-Components
npm install @levigo/ngx-translate-support // Tools für i18n (Angular)
npm install @levigo/jadice-common-components // Common Web Components like buttons that are used for all modern jadice web based solutions
npm install @levigo/common-components-angular // Angular wrapper fot he library above
npm install @levigo/jadice-i18n-support // Tools für i18n
npm install @levigo/jadice-math // Contains mathematical utilities for web projects (used internally)
npm install @levigo/jadice-web-icons // Icon-Font
npm install @levigo/utility-types // useful utils that make working with RxJS easier

Angular version compatibility

Die folgende Tabelle zeigt, welche ngx-webtoolkit-Version mit der jeweiligen Angular Version kompatibel ist.

Angular	@levigo/ngx-webtoolkit
18.x.x	>= 18.0.0 & < 19
17.x.x	>= 17.0.0 & < 18
16.x.x	>= 6.0.0, 16.0.0 & < 17

note

In der Vergangenheit war das jadice web toolkit und die Angular-Teile gemeinsam versioniert. Mit der Unterstützung von Angular 17 im jadice web viewer wurde dieses Versionsschema angepasst. Die Major-Version von ngx-webtoolkit entspricht nun immer der unterstützten Angular-Version. Die letzten beiden Stellen (Minor und Patch) sind unabhängig von Angular und entsprechen wie gewohnt SemVer.

Verwendung

Modul laden

Im jeweiligen Angular-Modul muss das Webtoolkit-Modul geladen werden.

// some.module.ts
import { NgModule } from '@angular/core';
// your very important imports here

// jadice web toolkit
import { WebtoolkitModule } from '@levigo/ngx-webtoolkit';

// other stuff
@NgModule({
  imports: [ 
    // ...
    // gets everything ready!
      WebtoolkitModule.forRoot(),
    // ...
  ]
})
export class SomeModule {}

Styles einbinden

Dieser Vorgang wird unter Styling beschrieben.

In Template einbinden

Folgendes Beispiel lädt ein einfaches PDF Dokument.

    <jwt-multi-mode-viewer [source]="{uri: 'http://www.digbib.org/Franz_Kafka_1883/Der_Prozess_.pdf'}"/>