Installation guide for the developer libraries for client applications supporting yuuvis® Momentum.

Introduction

The developer libraries are open source, available on NPM. With @yuuvis/project we also provide schematics to be used with Angular CLI. It will support developers by integrating the libraries into their project.
>> www.npmjs.com/package/@yuuvis/project

It is also possible to install the libraries separately:

• Install the core library: www.npmjs.com/package/@yuuvis/core
• Install the framework library: www.npmjs.com/package/@yuuvis/framework 

Furthermore, the following libraries can be installed:

• The command-palette library can be installed to enable further support of navigation by keyboard.
  >> www.npmjs.com/package/@yuuvis/command-palette
• The widget-grid library can be installed for creating custom dashboards. Widgets can be registered and afterwards configured by the users.
  >> www.npmjs.com/package/@yuuvis/widget-grid 
  Note: The feature is still in a testing phase. We preserve to apply any changes to its functionality.
• The widget-grid-widgets library contains a set of suitable widgets to be used with the widget-grid library.
  >> www.npmjs.com/package/@yuuvis/widget-grid-widgets 
  Note: The feature is still in a testing phase. We preserve to apply any changes to its functionality.

Installation Steps

• First, you need to install the npm module.

  • For the core library:

    npm install @yuuvis/core --save

  • For the framework library (the command installs the core library as well):

    npm install @yuuvis/framework --save

• Import YuvCoreModule to use @yuuvis/core in your Angular project. You have to import YuvCoreModule.forRoot() in the root NgModule of your application.

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { YuvCoreModule } from '@yuuvis/core';
  
  @NgModule({
    imports: [BrowserModule, YuvCoreModule.forRoot()],
    bootstrap: [AppComponent]
  })
  export class AppModule

• Configure YuvCoreModule via assets/default/config/main.json configuration file. By default it looks like this:
  

    "core": {
      "apiBase": {
        "core": "/api",
        "api-web": "/api-web/api"
      },
      "languages": [
        {
          "iso": "de",
          "label": "Deutsch"
        },
        {
          "iso": "en",
          "label": "English",
          "fallback": true
        }
      ],
      "logging": {
        "level": "debug"

  
  

• Configure translations set up by a translations module provided by the core library that can be used within your application. This module will be bound to the language a user has set up on the yuuvis® Momentum backend. In order to be able to initialize this module, translation files are required. By default, they are supposed to be located at assets/default/i18n/. In this directory, you provide a file for each supported language (en.json, de.json, ...). If you do not need translations, just provide empty files.
  You are able to change the default directory for the configuration by providing different locations to the module config when you import YuvCoreModule or YuvFrameworkModule:
  

  Example import 'YuvCoreModule'

  @NgModule({
    imports: [
      YuvCoreModule.forRoot({
        main: ['assets/my-custom-path/config/main.json'],
        translations: ['assets/my-custom-path/i18n/']
      })
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule

  Example import 'YuvFrameworkModule'

  @NgModule({
    imports: [
      YuvFrameworkModule.forRoot({
        main: ['assets/my-custom-path/config/main.json'],
        translations: ['assets/my-custom-path/i18n/']
      })
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule

• Use the libraries:

  • Core library: Import the services you want to use into your components:

    import { UserService } from '@yuuvis/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
      constructor(private userService: UserService) {}

  • Framework library: Import the components you want to use into your components.

Troubleshooting

Ensure that your project is running on a supported Angular version. If you are not yet on Angular 9, update your project:

ng update @angular/cli@^9 @angular/core@^9

You may also want to update your global Angular CLI to version 9:

npm uninstall -g @angular/cli
npm cache verify
# if npm version is < 5 then use `npm cache clean`
npm install -g @angular/cli@latest

Client outside the yuuvis® Momentum Cluster

Configure the client application such that it can be operated outside the yuuvis® Momentum Kubernetes cluster.

>> Client outside the yuuvis® Momentum Cluster