Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Install angular-cli
    1. Code Block
      languagetext
      themeFadeToGrey
      npm i -g @angular/cli
  2. Cd to <project>/resources
  3. Create and empty angular project
    1. Code Block
      languagetext
      themeFadeToGrey
      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
      languagetext
      themeFadeToGrey
      ng generate library <name-of-library> --prefix=plug
  6. Install Saga plugin
    1. Code Block
      languagetext
      themeFadeToGrey
      npm install @saga/plugin --save
  7. Install Angular MaterialaMaterial and Angular CDK
    1. Code Block
      languagetext
      themeFadeToGrey
      npm install @angular/material @angular/cdk --save
  8. Open the file pacakge.json
    1. On the scripts section add or update
      1. Code Block
        languagejs
        themeRDark
        "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
        languagejs
        themeRDark
        "@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
      languagejs
      themeEclipse
      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
      languagejs
      themeEclipse
      providers: [{
      	provide: '<NameOfRecognizer>Component',
      	useValue: [{
      		name: '<NameOfRecognizer>Component',
      		component: <NameOfRecognizer>Component
      	}],
      	multi: true
      }],
      imports: [
      	CommonModule,
      	FormsModule,
      	PluginModule
      ]

...