Knora ui module: core


66810.0.12 years ago3 years agoMinified + gzip package size for @knora/core in KB


Knora-ui core module

npm (scoped)

This module is part of Knora-ui modules, developed by the team at the Data and Service Center for Humanities DaSCH.

The core module contains every service to use Knora's RESTful webapi v2 and admin.


For help getting started with a new Angular app, check out the Angular CLI.

For existing apps, follow these steps to begin using Knora-ui core.


You can use either the npm or yarn command-line tool to install packages. Use whichever is appropriate for your project in the examples below.


$ yarn add @knora/core


$ npm install --save @knora/core


This module has the following package dependencies, which you also have to install.

Required version of Knora: 12.0.0


On version 6 of Angular CLI they removed the shim for global and other node built-ins as mentioned in #9827 (comment). Because of the jsonld package, we have to manually shimming it inside of the polyfills.ts file of the app:

// Add global to window, assigning the value of window itself.

 (window as any).global = window;

For the environment configuration (Knora API url etc. settings), we have to create the following configuration files and serverice:

mkdir src/config
touch src/config/config.dev.json
touch src/config/config.prod.json

ng g s app-init

The config.dev.json should look as follow:

    "knora": {
        "apiProtocol": "http",
        "apiHost": "",
        "apiPort": 3333,
        "apiPath": "",
        "jsonWebToken": "",
        "logErrors": true

    "app": {
        "name": "Knora-APP",
        "url": "localhost:4200"

The config.prod.json looks similar probably the knora.logErrors are set to false. The config files have to been integrated in angular.json in each "assets"-section:

"assets": [

It's possible to have different configuration files, depending on the environment definition in src/environments/. The name defined in environment is used to take the correct config.xyz.json file.

E.g. the environment.ts needs the name definition for develeop mode:

export const environment = {
    name: 'dev',
    production: false

To load the correct configuration you have to write an app-init.service.ts:

import { Injectable } from '@angular/core';
import { KuiConfig } from '@knora/core';
import { KnoraApiConnection, KnoraApiConfig } from '@knora/api';

export class AppInitService {

    static knoraApiConnection: KnoraApiConnection;

    static knoraApiConfig: KnoraApiConfig;

    static kuiConfig: KuiConfig;

    constructor() { }

    Init() {

        return new Promise<void>((resolve, reject) => {

            // init knora-ui configuration
            AppInitService.kuiConfig = window['tempConfigStorage'] as KuiConfig;

            // init knora-api configuration
            AppInitService.knoraApiConfig = new KnoraApiConfig(

            // set knora-api connection configuration
            AppInitService.knoraApiConnection = new KnoraApiConnection(AppInitService.knoraApiConfig);


This service will be loaded in src/app/app.module.ts:

import { KnoraApiConnectionToken, KuiConfigToken, KuiCoreModule } from '@knora/core';
import { AppInitService } from './app-init.service';

export function initializeApp(appInitService: AppInitService) {
    return (): Promise<any> => {
        return appInitService.Init();

    declarations: [
    imports: [
    providers: [
            provide: APP_INITIALIZER,
            useFactory: initializeApp,
            deps: [AppInitService],
            multi: true
            provide: KuiConfigToken,
            useFactory: () => AppInitService.kuiConfig
            provide: KnoraApiConfigToken,
            useFactory: () => AppInitService.knoraApiConfig
            provide: KnoraApiConnectionToken,
            useFactory: () => AppInitService.knoraApiConnection
    bootstrap: [AppComponent]
export class AppModule { }

Additional you have to update the src/main.ts file:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import 'hammerjs';

if (environment.production) {

function bootstrapFailed(result) {
    console.error('bootstrap-fail', result);

    .then(response => response.json())
    .then(config => {
        if (!config || !config['knora']) {

        // store the response somewhere that the AppInitService can read it.
        window['tempConfigStorage'] = config;

            .catch(err => bootstrapFailed(err));


The @knora/core is a configuration handler for @knora/api which has all the services to make Knora-api requests.

The following project-component example shows how to implement the two modules to get all projects form Knora.

import { Component, Inject, OnInit } from '@angular/core';
import { ApiResponseData, ApiResponseError, KnoraApiConnection, ProjectsResponse, ReadProject } from '@knora/api';
import { KnoraApiConnectionToken } from '@knora/core';

    selector: 'app-projects',
    template: `<ul><li *ngFor="let p of projects">{{p.longname}} (<strong>{{p.shortname}}</strong> | {{p.shortcode}})</li></ul>`
export class ProjectsComponent implements OnInit {
    projects: ReadProject[];

        @Inject(KnoraApiConnectionToken) private knoraApiConnection: KnoraApiConnection
    ) { }

    ngOnInit() {

    getProjects() {
            (response: ApiResponseData<ProjectsResponse>) => {
                this.projects = response.body.projects;
            (error: ApiResponseError) => {

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.