You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

Before Start

See how to connect to the npm repository by checking this link

Adding the Angular Library Step-by-step guide

  1. Install angular-cli
    1. npm i -g @angular/cli
  2. Cd to saga-server/src/main/resources/webapp/projects/saga-plugin/src/lib
    1. Cd to either the processors or the recognizers folder, denpending of the type of component you want to build
      1. Recognizers for tags
      2. Processors for pipelines
  3. Create a component
    1. ng generate component --style=scss --skipTests=true --skipImport=true
  4. Cd to <component-name> folder
  5. Create a component
    1. The name must contain config-dialog at the end of the name
    2. ng generate component --style=scss --skipTests=true --skipImport=true

    3. For implementation of the config dialog check out this page

  6. Next open the file <component-name>-config-dialog.component.ts  
  7. Extend the component with ConfigDialogBase (the implementation is further explained in the document)
    1. export class ComponentNameConfigDialogComponent extends ConfigDialogBase implements OnInit {
  8. Next go up one level and open the file <component-name>.component.ts  
  9. Extend the component with the right abstract class:
    1. PluginComponent - used for plugins not containing a dictionary of patterns, for example the "Number" recognizer.
    2. PatternComponent - used for plugins that need to store a dictionary of patterns, for example "Entity", "Regex" or "Advanced" recognizers.
  10. Open to projects/saga-plugin/src/lib/plugin.module.ts
    1. Import the components
    2. import {<component-name>Component} from './<processors or recognizers>/<component-name>/<component-name>.component';
import {<component-name>ConfigDialogComponent} from './<processors or recognizers>/<component-name>/<component-name>-config-dialog/<component-name>-config-dialog.component';
    3. Add the main component into the array called components 
    4. const components = [
  RegexComponent,
  .
  .
  .
  <component-name>Component
];
    5. Add the config dialog component into the array called entryComponents 
    6. const entryComponents = [
  PatternActionsDialogComponent,
  EntityActionsDialogComponent,
  .
  .
  .
  <component-name>ConfigDialogComponent
];

  • No labels