Adding a Plugin to the Server

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

.npmrc

registry=https://repository.searchtechnologies.com/artifactory/api/npm/npm-virtual
_auth=<USERNAME:PASSWORD in base 64>
always-auth=true
email=<EMAIL>

@angular:registry=https://repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:_password=<PASSWORD_BASE64>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:username=<USERNAME>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:email=<EMAIL>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:always-auth=true

@angular-devkit:registry=https://repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:_password=<PASSWORD_BASE64>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:username=<USERNAME>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:email=<EMAIL>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:always-auth=true

@clr:registry=https://repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:_password=<PASSWORD_BASE64>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:username=<USERNAME>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:email=<EMAIL>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:always-auth=true

@material-extended:registry=https://repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:_password=<PASSWORD_BASE64>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:username=<USERNAME>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:email=<EMAIL>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:always-auth=true

@ng-select:registry=https://repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:_password=<PASSWORD_BASE64>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:username=<USERNAME>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:email=<EMAIL>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:always-auth=true

@ngx-translate:registry=https://repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:_password=<PASSWORD_BASE64>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:username=<USERNAME>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:email=<EMAIL>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:always-auth=true

@types:registry=https://repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:_password=<PASSWORD_BASE64>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:username=<USERNAME>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:email=<EMAIL>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:always-auth=true

Adding the Angular Library Step-by-step guide

Install angular-cli
1. ```
npm i -g @angular/cli
```
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

Create a component

ng generate component --style=scss --skipTests=true --skipImport=true

Cd to <component-name> folder
Create a component (this will be the configuration dialog)
1. The name must contain config dialog at the end of the name
2. ```
ng generate component --style=scss --skipTests=true --skipImport=true
```
Next open the file <component-name>-config-dialog.component.ts
Extend the component with ConfigDialogBase (the implementation is explain further in the document)
1. ```
export class ComponentNameConfigDialogComponent extends ConfigDialogBase implements OnInit {
```
Next go up one level and open the file <component-name>.component.ts
Extend the component with the right abstract class (each type implementation is specified further in the document)
1. PluginComponent
2. PatternComponent

Open to projects/saga-plugin/src/lib/plugin.module.ts

Import the components

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';

Add the main component into the array called components

const components = [
  RegexComponent,
  .
  .
  .
  <component-name>Component
];

Add the config dialog component into the array called entryComponents

const entryComponents = [
  PatternActionsDialogComponent,
  EntityActionsDialogComponent,
  .
  .
  .
  <component-name>ConfigDialogComponent
];

Page tree

Before Start

Adding the Angular Library Step-by-step guide

Related articles