npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

lz-header-lib

2.0.26 • Public • Published

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());
        }
      }
      ```

Keywords

none

install

npm i lz-header-lib

Downloadsweekly downloads

1,810

version

2.0.26

license

none

last publish

collaborators

  • avatar
Report a vulnerability