MedrecordUiComponents

Components Demo

Installation

npm i @medrecord/ui-components @medrecord/frontend-translations-middleware

Connect styles to you root styles file

@import "~@medrecord/ui-components/components";

Assets

For correct components work you should connect fonts, icons and translations.

angular.json

 "build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "allowedCommonJsDependencies": [
      "@medrecord/frontend-translations-middleware",
      "lodash",
      "lodash/get",
      "lodash/uniqBy",
      "lodash/toString",
      "moment-timezone",
      "moment-range"
    ],
    ....
    "assets": [
      ...
      {
        "glob": "**/*",
        "input": "node_modules/@medrecord/ui-components/client-styling/images/",
        "output": "/client-styling/images/"
      },
      {
        "glob": "**/*",
        "input": "node_modules/@medrecord/ui-components/fonts/",
        "output": "/client-styling/fonts/"
      },
      {
        "glob": "**/*",
        "input": "node_modules/@medrecord/ui-components/medrecord-i18n/",
        "output": "/assets/medrecord-i18n/"
      }
      ...
    ],
   ...
  },
...

Import MedrecordUiComponentsModule and HttpClientModule in root module of your application.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ...
    MedrecordUiComponentsModule,
    TranslationMiddlewareModule.forRoot()
    HttpClientModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Translations

Library uses translations what are managed by @medrecord/frontend-translations-middleware and connected as assets. For correct components work library should be installed and connected in root module.

Troubleshooting

Take into account that starting with version 10, Angular now warns you when your build pulls in one of these bundles. If you’ve started seeing these warnings for your dependencies, let your dependency know that you’d prefer an ECMAScript module (ESM) bundle. Here is an official documentation - Configuring CommonJS dependencies

Add into your angular.json

"architect": {
"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    ...
    "allowedCommonJsDependencies": [
      "moment-timezone",
      "moment-range",
      "lodash/get",
      "lodash/uniqBy"
    ],
    ...

We are using i18n and Angular 9 introduced a global $localize() function that needs to be loaded. Please run ng add @angular/localize from the Angular CLI. (For non-CLI projects, add import '@angular/localize/init'; to your polyfills.ts file.