sh-edraft.de

Haren (Ems)

https://www.sh-edraft.de

Repositories

14

Projects

1

Packages Members

1

@sh-edraft/core (2026.3.1300)

Published 2026-03-13 17:45:34 +01:00 by ci

Installation

Set up this registry in your project .npmrc file:

@sh-edraft:registry=

To install the package using npm, run the following command:

npm install @sh-edraft/core@2026.3.1300

or add it to the package.json file:

"@sh-edraft/core": "2026.3.1300"

For more information on the npm registry, see the documentation.

About this package

sh-core (library)

sh-core is an Angular component/service library with ready-to-use UI components, authentication helpers, GraphQL wiring, translation preloading and a set of application-level services. This README is targeted at consumers of the library (apps that import and use @sh-edraft/core).

If you are looking for the example application that demonstrates how the library is used, see projects/example-app in this repository.

Quick start

There are two common ways to consume this library during development:

• Use a published package from npm (if available).
• Use the library from the local workspace while developing (build the library then serve your app). See the "Important notes about angular.json" section below.

Minimal bootstrap example (standalone bootstrap)

The library exposes a convenience provider provideCore(configFileName: string, isProduction: boolean) that wires the most important pieces for you. The typical bootstrap in a modern Angular app using bootstrapApplication looks like this:

import {bootstrapApplication} from '@angular/platform-browser';
import {AppComponent} from './app/app';
import {provideCore} from '@sh-edraft/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideCore('config.development.json', false),
    // any other providers your app needs
  ]
});

This single call registers logging mode, config loading, HTTP client with token interceptor, Keycloak initialization, translation preloading, PrimeNG helpers and the Apollo GraphQL client configured from the loaded config.

Overriding the config filename

If you prefer to provide the config token explicitly or override it later, the library also exports a small helper and token:

• CONFIG_FILE_NAME (InjectionToken)
• provideConfigFileName(name: string) — convenience provider that sets CONFIG_FILE_NAME.

Example (explicit):

import {provideConfigFileName, provideCore} from '@sh-edraft/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideConfigFileName('config.json'),
    provideCore('config.json', true),
  ],
});

Note: provideCore itself registers CONFIG_FILE_NAME internally when you pass a filename; use provideConfigFileName if you want a clearer explicit provider or to provide it before calling other providers that depend on it.

Customizing or extending translation sources

The library uses an internal CustomTranslateHttpLoader and supports additional translation sources via the ADDITIONAL_TRANSLATION_SOURCES InjectionToken.

If you want to add extra translation paths (for example your app or another library), provide ADDITIONAL_TRANSLATION_SOURCES like this:

import {ADDITIONAL_TRANSLATION_SOURCES, TranslationSource} from '@sh-edraft/core';

const extra: TranslationSource[] = [
  {prefix: '/assets/my-app/i18n/', suffix: '.json'},
];

bootstrapApplication(AppComponent, {
  providers: [
    {provide: ADDITIONAL_TRANSLATION_SOURCES, useValue: extra},
    provideCore('config.development.json', false),
  ],
});

The loader will merge translations from the default app path /assets/i18n and any additional sources you register.

Important exports for consumers

The library's public API surface (see projects/sh-core/src/sh-core/public-api.ts) exports many components, services and helpers. Below are the most commonly used exports that are important for application integration:

• Providers / Tokens

  • provideCore(configFileName: string, isProduction: boolean) — main convenience entry point
  • CONFIG_FILE_NAME (InjectionToken) — config filename token
  • provideConfigFileName(name: string) — helper provider for the token
  • ADDITIONAL_TRANSLATION_SOURCES — token for extra translation paths
  • CustomTranslateHttpLoader — translate loader used internally (exported if you want to re-use it)
  • createSseLink — helper used to create an SSE link for Apollo subscriptions
  • tokenInterceptor — HTTP interceptor that attaches authorization tokens

• Services

  • ConfigService — loads /assets/config/<filename> and exposes settings
  • AuthService — authentication-related helpers
  • TranslationPreloaderService — preloads translations on app startup
  • ErrorHandlingService — used as the global ErrorHandler by provideCore
  • Logger — logging helper with dev/production modes

• Components (selected)

  • HeaderComponent, SidebarComponent, FooterComponent, SpinnerComponent
  • TableComponent, FormPageComponent, HistoryComponent, HistorySidebarComponent

• Utilities

  • initKeycloak / initializeKeycloak utilities and helper functions for auth setup

If you need the full list, consult projects/sh-core/src/sh-core/public-api.ts — it exports the full surface (pages, models, components, pipes, guards, services, etc.).

Important notes about angular.json (assets & styles)

When consuming the library locally (not via npm), the example app in this workspace was configured so the app receives built library assets (for example library i18n JSON files). The relevant angular.json changes are:

• The example-app assets array contains a mapping like this:

{
  "glob": "**/*",
  "input": "dist/sh-core/assets/i18n",
  "output": "/assets/sh-core/i18n"
}

This copies the library's built i18n files into the app's /assets/sh-core/i18n path so the ADDITIONAL_TRANSLATION_SOURCES in the library can point to /assets/sh-core/i18n/.

Keep in mind:

• The mapping expects dist/sh-core to exist. That means you must build the library before serving the example app (or run the library build in watch mode).
• The example-app styles include Tailwind / PrimeUI and primeicons in a specific order — adjust them in your app angular.json if you use a different theme or icon setup.

Recommended local development workflow

To work on the library while running the example app, use two terminals:

# rebuild library on changes so dist assets exist
ng build sh-core --watch

# serve the example app
ng serve example-app

Or build once before serving:

ng build sh-core && ng serve example-app

Failing to produce dist/sh-core will result in 404s for library assets (e.g. translations).

Troubleshooting common issues

• Missing translations / 404 for /assets/sh-core/i18n/*:

  • Ensure ng build sh-core has been executed so dist/sh-core/assets/i18n exists.
  • Confirm your angular.json copy mapping matches the one above.

• Keycloak not initialized / auth errors on startup:

  • provideCore runs an initializer that calls ConfigService.loadSettings() before initializing Keycloak. Make sure your config file (provided via CONFIG_FILE_NAME) contains a valid api.url / Keycloak settings the library expects.

• GraphQL / Apollo errors:

  • The Apollo client is configured using settings.settings.api.url from the loaded config. Verify the config file is loaded and api.url is correct.

Contributing / developing the library

This repository includes an example app under projects/example-app that demonstrates full integration. When making changes to the library, keep the dev workflow above in mind so the example app can pick up built assets.

• Build library: ng build sh-core
• Build library in watch mode: ng build sh-core --watch
• Serve example app (development): ng serve example-app

Where to look in the source

• Public API surface: projects/sh-core/src/sh-core/public-api.ts
• Library providers: projects/sh-core/src/sh-core/providers
• Services: projects/sh-core/src/sh-core/service
• Example app bootstrap + config: projects/example-app/src/app/app.config.ts and projects/example-app/src/main.ts

Concrete examples (copy-paste)

Minimal config.json example

Below is a minimal configuration object that the library expects (place it under /assets/config/ and reference it via provideCore or provideConfigFileName). Adjust values for your environment.

{
  "termsUrl": "/terms",
  "privacyURL": "/privacy",
  "imprintURL": "/imprint",
  "themes": [
    {
      "label": "Default",
      "name": "default"
    }
  ],
  "loadingScreen": {
    "background": "",
    "logo": ""
  },
  "keycloak": {
    "url": "https://keycloak.example.com/auth",
    "realm": "my-realm",
    "clientId": "my-client"
  },
  "api": {
    "url": "https://api.example.com",
    "wsUrl": "wss://api.example.com/graphql"
  },
  "languages": [
    "en",
    "de"
  ]
}

bootstrapApplication example (explicit)

If your app uses standalone bootstrap, this is the recommended minimal setup:

import {bootstrapApplication} from '@angular/platform-browser';
import {AppComponent} from './app/app';
import {provideConfigFileName, provideCore} from '@sh-edraft/core';

bootstrapApplication(AppComponent, {
  providers: [
    // optional: provide the config token explicitly
    provideConfigFileName('config.development.json'),

    // wires logger, http client + token interceptor, keycloak init, translations, apollo etc.
    provideCore('config.development.json', false),
  ],
});

NgModule example (if you use the classic bootstrap)

If you bootstrap with NgModule, add provideCore to the module providers array (or provide CONFIG_FILE_NAME explicitly):

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app/app.component';
import {provideCore, provideConfigFileName} from '@sh-edraft/core';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    provideConfigFileName('config.development.json'),
    provideCore('config.development.json', false),
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

angular.json assets snippet (copy-paste)

Add this to your app's assets array so library i18n files are available at runtime when consuming the library from the local workspace (not required if you consume a published npm package that already contains assets):

{
  "glob": "**/*",
  "input": "dist/sh-core/assets/i18n",
  "output": "/assets/sh-core/i18n"
}

Remember: the mapping expects dist/sh-core to exist. Run ng build sh-core (or ng build sh-core --watch) before ng serve for the example app.

---

If you want, I can also add a short copy-paste section with an example angular.json assets snippet and a complete app.config.ts snippet tailored for library consumers. Would you like that added?

Dependencies

Dependencies

ID	Version
tslib	^2.8.1

Peer Dependencies

ID	Version
@angular/animations	^21.1.3
@angular/common	^21.1.3
@angular/compiler	^21.1.3
@angular/core	^21.1.3
@angular/forms	^21.1.3
@angular/platform-browser	^21.1.3
@angular/platform-browser-dynamic	^21.1.3
@angular/router	^21.1.3
@angular/service-worker	^21.1.3
@ngx-translate/core	^17.0.0
@ngx-translate/http-loader	^17.0.0
@primeuix/themes	^2.0.3
@tailwindcss/postcss	^4.1.18
apollo-angular	^13.0.0
date-fns	^4.1.0
dompurify	^3.3.1
graphql-sse	^2.6.0
graphql-ws	^6.0.7
keycloak-angular	^21.0.0
keycloak-js	^26.2.3
marked	^17.0.1
ngx-markdown	^21.1.0
primeicons	^7.0.0
primeng	^21.1.1
qrcode-with-logos	^1.1.1
rxjs	~7.8.2
tailwindcss-primeui	^0.6.1
zone.js	~0.16.0

Details

npm

2026-03-13 17:45:34 +01:00

1

latest

128 KiB

Assets (1)

core-2026.3.1300.tgz 128 KiB

Versions (29) View all

2026.3.1300 2026-03-13

2026.3.401 2026-03-04

2026.3.400 2026-03-04

2026.3.103 2026-03-01

2026.3.102 2026-03-01