common-ui

yarn add keycloak-angular keycloak-js ngx-toastr @biesbjerg/ngx-translate-extract-marker @ngx-translate/core @ngx-translate/http-loader dayjs lodash-es ngx-translate-messageformat-compiler messageformat
yarn add @types/lodash-es -D
ng add @angular/material

In app.module.ts add:

export function httpLoaderFactory(httpClient: HttpClient, configService: ConfigService): PruningTranslationLoader {
    return new PruningTranslationLoader(httpClient, '/assets/i18n/', `.json?version=${configService.values.FRONTEND_APP_VERSION}`);
}

 @NgModule({
    ...
    imports: [
        ...
        CommonUiModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: httpLoaderFactory,
                deps: [HttpClient, ConfigService],
            },
            compiler: {
                provide: TranslateCompiler,
                useClass: TranslateMessageFormatCompiler,
            },
        })
    ]
})

Add the following to the compilerOptions section of the root tsconfig.json:

"compilerOptions": {
   ...
    "paths": {
      ...
      "@iqser/common-ui": ["{libs,projects}/common-ui/src/index.ts"]
    },
    "allowSyntheticDefaultImports": true
  },

Make sure noImplicitOverride is not set to true.

Include the common-ui assets in the assets section of angular.json:

{
    "glob": "**/*",
    "input": "{libs,projects}/common-ui/src/assets/",
    "output": "/assets/"
}

Update styles and stylePreprocessorOptions in angular.json:

"styles": [
  ...
  "{libs,projects}/common-ui/src/assets/styles/common-styles.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [
    ...
    "./{libs,projects}/common-ui/src/assets/styles"
  ]
}

Add theming classes (light or dark) to the <body> element.

Configure light and dark theme variables in styles.scss.

Configure Material theme.