86 lines
2.0 KiB
Markdown
86 lines
2.0 KiB
Markdown
## Installation
|
|
|
|
Install submodule at `{libs,projects}/common-ui`.
|
|
|
|
Install dependencies:
|
|
|
|
- `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:
|
|
|
|
```ts
|
|
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`:
|
|
|
|
```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.
|