Genome components

Install

Developers can easily install Bzg Components using NPM.

First install or update your global angular-cli tools:

# First install angular-cli tools:
npm uninstall -g angular-cli
npm cache clean
npm install -g @angular/cli@latest

Add the feed to your project, create a file next to package.json named .npmrc, and include this lines

use the appropriate token for this step

registry=https://bizagidev.pkgs.visualstudio.com/_packaging/angular-bzg-components/npm/registry/
always-auth=true
; Treat this auth token like a password.
; begin auth token
//bizagidev.pkgs.visualstudio.com/_packaging/angular-bzg-components/npm/registry/:_authToken=XXXXXX
//bizagidev.pkgs.visualstudio.com/_packaging/angular-bzg-components/npm/:_authToken=XXXXXX
; end auth token

Configure you local environment to authenticate with the feed

npm install -g vsts-npm-auth --registry https://registry.npmjs.com --always-auth false

This step asks you for your credentials

vsts-npm-auth -config .npmrc

Install bzg-components with npm

npm install --save bz-genome-angular @angular/cdk masonry-layout

Include the Module in you project

import { BzgCommonsModule } from 'bz-genome-angular';

 imports: [
    BrowserModule,
    BzgComponentsModule.forRoot()
  ],

The module of your application should look like this

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {BzgCommonsModule} from 'bz-genome-angular';

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

Finally you can use the different components offered by the library

<bzg-header [srcLogo]="'assets/sprite.svg#logo-bzg'"
            [srcIcon]="'assets/sprite.svg#clock'"
            [tagText]="'My App'"
            [styleConfig]="{}">
  <bzg-user [email]="'[email protected]'"
            [fullName]="'Scott Austin'"
            [styleConfig]="{}">
  </bzg-user>
</bzg-header>


<bzg-icon [srcIcon]="'assets/sprite.svg#headphones'"
          [size]="100">
</bzg-icon>

<bzg-icon [nameIcon]="'align-middle'"
          [size]="100">  
</bzg-icon>


<bzg-button [text]="'This is my button'"
            [srcIcon]="'assets/sprite.svg#headphones'">
</bzg-button>


 <bzg-combo id="MyCombo"
            formControlName="MyCombo"
            [listData]="myOptions"
            [displayField]="'name'"
            [valueField]="'value'">
 </bzg-combo>

Parallel development setup

If you want to create more components in the library or make changes to the components, it may be useful to use the consumer application as a testing environment, with the help of a symbolic link you can use the components folder within the project of consumer application

1. Enable compilerOptions.paths in /src/tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",                //  <<<< add this
    "module": "es2015",
    "types": [],
    "paths": {
      "bzg-components": ["app/bzg-components/bzg-components.module"]         //  <<<< add this
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

2. Create symbolic link with:

mklink /J "target folder" "{your-path}\genome-components\src\app\bzg-components"

3. Run your project, if something like "Module build failed: Error: {your path}/bzg-components.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property." error arises, you need to add the option preserveSymlinks to your build in your angular-cli.json (Angular 5) or angular.json (Angular 6) file.

//Angular 5 - angular-cli.json
"defaults": {
  "build": {
    "preserveSymlinks": true //   <<<< add this
  },
  "styleExt": "scss",
  "component": {
  }
}

//Angular 6 - angular.json
"architect": {
  "build": {
    "options": {
      "preserveSymlinks": true //   <<<< add this
    },
  },
}