Page History

Before Start

Get access to our NPM Repository by adding this configuration file into your user folder, just replace the fields insede <>, and remenber all the tokens and passwords are encoded in Base 64

Adding the Angular Library Step-by-step guide

1. Install angular-cli
   

   1. Code Block
      language text theme FadeToGrey
      npm i -g @angular/cli

2. Cd to <project>/resources
3. Create and empty angular project

   1. Code Block
      language text theme FadeToGrey
      ng new webapp --createApplication=false Would you like to add Angular routing? No Which stylesheet format would you like to use? Sass

4. Cd to webapp
5. Create an angular library (this is where your interface will live)

   1. Code Block
      language text theme FadeToGrey
      ng generate library <name-of-library> --prefix=plug

6. Install Saga plugin

   1. Code Block
      language text theme FadeToGrey
      npm install @saga/plugin --save

7. Install Angular Material and Angular CDK

   1. Code Block
      language text theme FadeToGrey
      npm install @angular/material @angular/cdk --save

8. Open the file pacakge.json
   1. On the scripts section add or update

      1. Code Block
         language js theme RDark
         "build": "ng build" "build-prod": "ng build --prod"

9. Cd to projects/<name-of-library>
10. Open the file package.json
    1. On peerDependencies add

       1. Code Block
          language js theme RDark
          "@saga/plugin": "^x.y.z"

          the same version as the package.json located in webapp

11. Cd to src/lib
12. Open the file <name-of-library>.module.ts

    1. import the following modules 

       Code Block
       language js theme Eclipse
       import {PluginModule} from '@saga/plugin'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms';

    2. Then update the @NgModule by adding a new provider and the modules to the section imports

       Code Block
       language js theme Eclipse
       providers: [{ provide: '<NameOfRecognizer>Component', useValue: [{ name: '<NameOfRecognizer>Component', component: <NameOfRecognizer>Component }], multi: true }], imports: [ CommonModule, FormsModule, PluginModule ]

...