lz-pltheader v0.0.0

LIGAZAKON HEADER ANGULAR LIBRARY

Installing

1. Install it

  npm i lz-header-lib-<current-project-version>

2. Prepare your angular.json

  Exmaple:

  "lzDeveloperClient": {
  ...
    "architect": {
      "build": {
        "builder": ... ,
          "options": {
          "outputPath": ... ,
          "index": ... ,
          "main": ... ,
          "polyfills": ... ,
          "tsConfig": ... ,
          "assets": [
            ... ,
            {
              "glob": "**/*",
              "input": "node_modules/lz-header-lib/assets",
              "output": "dist/ng2/src/assets/lz-header-assets/" // Папка "lz-header-assets" должна находиться по точно такому же пути в вашем проекте
            }
            ...
          ],
          "styles": [
            ...
            "node_modules/lz-header-lib/assets/less/fonts.less",
            "node_modules/lz-header-lib/assets/less/header-modals.less",
            "node_modules/font-awesome/css/font-awesome.css" // Шапка использует font-awesome-4.7
          ],
          "scripts": [ // Шапка использует набор js библиотек
            "node_modules/jquery/dist/jquery.min.js",
            "lib/sockjs/sockjs.min.js",
            "lib/stomp-websocket/lib/stomp.min.js",
            "lib/platform/platform.js",
            "lib/fingerprint/fingerprint.js"
          ]
        }
      }
    }
    ...
  }

3. Prepare your app.module.ts

    Exmaple:
    

    import { NgModule } from '@angular/core';

    ...

    import { PLTHeaderModule, LzProductConfig, LzLanguageService } from 'lz-header-lib';

    export function createTranslateLoader(http: HttpClient) {
      // your path to translate sources *смотреть п.4 
      return new TranslateHttpLoader(http, './i18n/', '.json');
    }

    ...

      imports: [
        ...
        PLTHeaderModule,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [HttpClient]
          }
        }),
        ...
      ]

    ...

    export class AppModule { 
      constructor(private lzProductConfig: LzProductConfig, private lzLanguageService: LzLanguageService, private translateService: TranslateService) {
        this.lzProductConfig.setProductSettings({
          'ips_location': '/ips', // Ссылка на ИПС
          'ipas_location': '/ipas', // Ссылка на ПЛАТФОРМУ
          'order_code': 'lz_developer_client', // Алиас продукта, который подключает шапку
          'product_name': 'lzDeveloperClient', // Имя продукта, который подключает шапку
          'product_version': '1.0', // Версия клиента, который подключает шапку
          'api_path': 'dev', // Сервер, через который будут ходить ресты шапки: dev/test/prod
          'check_user_session': true, // Нужно ли проверять сессию пользователя каждую минуту,
                                      // в случае выбитой сессии всплывает модалка с авторизацией
        });
        this.translateService.use(this.lzLanguageService.identifyLanguage());
      }
    }

4. Add header component to your app.component.html

    Example:

    <lz-header-lib-component></lz-header-lib-component>
    <router-outlet></router-outlet>

5. Translations

    translations and TranslateModule

    lz-header-lib have buttons to change project language. It's using 'LzLanguageService' from lz-header-lib.
    current language is saving in local storage (it can be 'ru' or 'ua' values). By default 'ua' language.

    After language change it triggers page reloading.

    You can use 'identifyLanguage' method from 'LzLanguageService' to get current language and apply it to your project.

    You shoud merge yours i18n .jsons with lz-header-lib translations via grunt, gulp, webpack etc. and import it into yours app.module.ts

      Example:
      
      Grunt task for merging

      grunt.initConfig({
        "merge-json": {
            "ru": {
                src: [
                    "src/**/ru.json",
                    "lz-shared/**/ru.json",
                    "node_modules/lz-header-lib/assets/i18n/ru.json"
                ],
                dest: "dist/i18n/ru.json"
            },
            "ua": {
                src: [
                    "src/**/ua.json",
                    "lz-shared/**/ua.json",
                    "node_modules/lz-header-lib/assets/i18n/ua.json"
                ],
                dest: "dist/i18n/ua.json"
            }
        }
      })

      app.module.ts

      import { HttpClient } from '@angular/common/http';
      import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
      import { TranslateHttpLoader } from '@ngx-translate/http-loader';

      import { LzLanguageService } from 'lz-header-lib';

      export function createTranslateLoader(http: HttpClient) {
        return new TranslateHttpLoader(http, '/dist/i18n/', '.json'); 
      }

      @NgModule({
        imports: [
          TranslateModule.forRoot({
            loader: {
              provide: TranslateLoader,
              useFactory: (createTranslateLoader),
              deps: [HttpClient]
            }
          })
        ]
      })

      export class AppModule {
        constructor(private langService: LzLanguageService, private translate: TranslateService) { 
          translate.use(language.identifyLanguage());
        }
      }