In addition to Saga built-in stages (recognizers and processors) coming out of the box, developers can create external stages. This guide will help you create the Angular UI part of your new external stage.
Before Start
Adding the Angular Library Step-by-step guide
- Install angular-cli
- Cd to <project>/resources
- Create and empty angular project
ng new webapp --createApplication=false
Would you like to add Angular routing? No
Which stylesheet format would you like to use? Sass
- Cd to webapp
- Create an angular library (this is where your interface will live)
ng generate library <name-of-library> --prefix=plug
- Install Saga plugin
npm install @saga/plugin --save
- Install Angular Material and Angular CDK
npm install @angular/material @angular/cdk --save
- Open the file pacakge.json
- On the scripts section add or update
"build": "ng build"
"build-prod": "ng build --prod"
- Cd to projects/<name-of-library>
- Open the file package.json
- On peerDependencies add
the same version as the package.json located in webapp
- Cd to src/lib
- Open the file <name-of-library>.module.ts
import the following modules
import {PluginModule} from '@saga/plugin';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
Then update the @NgModule by adding a new provider and the modules to the section imports
providers: [{
provide: '<NameOfRecognizer>Component',
useValue: [{
name: '<NameOfRecognizer>Component',
component: <NameOfRecognizer>Component
}],
multi: true
}],
imports: [
CommonModule,
FormsModule,
PluginModule
]
Updating the Pom.xml Step-by-step guide
- Add to the <properties>
<saga.webapp.code>src/main/resources/webapp</saga.webapp.code>
<saga.webapp.export>webapp/dist/</saga.webapp.export>
- In every "ManifestEntries" in the pom, add
<Artifact>${project.artifactId}</Artifact>
<WebApp>${saga.webapp.export}</WebApp>
- Add the following profiles to the pom.xml
<profiles>
<profile>
<id>develop</id>
<activation>
<activeByDefault>true</activeByDefault>
</activation>
<build>
<resources>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>${saga.webapp.export}</include>
</includes>
</resource>
</resources>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>buildnumber-maven-plugin</artifactId>
<version>1.4</version>
<executions>
<execution>
<phase>validate</phase>
<goals>
<goal>create</goal>
</goals>
</execution>
</executions>
<configuration>
<doCheck>false</doCheck>
<doUpdate>false</doUpdate>
</configuration>
</plugin>
</plugins>
</build>
</profile>
<profile>
<id>developUX</id>
<activation>
<activeByDefault>false</activeByDefault>
</activation>
<build>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>buildnumber-maven-plugin</artifactId>
<version>1.4</version>
<executions>
<execution>
<phase>validate</phase>
<goals>
<goal>create</goal>
</goals>
</execution>
</executions>
<configuration>
<doCheck>false</doCheck>
<doUpdate>false</doUpdate>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-clean-plugin</artifactId>
<version>2.5</version>
<configuration>
<filesets>
<fileset>
<directory>src/main/resources/webapp/dist</directory>
<includes>
<include>**/*</include>
</includes>
<followSymlinks>false</followSymlinks>
</fileset>
</filesets>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.3.2</version>
<configuration>
<workingDirectory>${saga.webapp.code}</workingDirectory>
</configuration>
<executions>
<execution>
<id>npm install (generate-resources)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>install</argument>
</arguments>
</configuration>
</execution>
<!-- Optional: The following will output the npm configuration.
I do this so my CI logs will show the npm information used
for the build -->
<execution>
<id>npm config list (validate)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>validate</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>config</argument>
<argument>list</argument>
</arguments>
</configuration>
</execution>
<!-- Required: This following calls `npm run build` where 'build' is
the script name I used in my project, change this if yours is
different -->
<execution>
<id>npm run build (generate-resources)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>run</argument>
<argument>build</argument>
</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
<resources>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>${saga.webapp.export}</include>
</includes>
</resource>
</resources>
</build>
</profile>
<profile>
<id>prod</id>
<activation>
<activeByDefault>false</activeByDefault>
</activation>
<build>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>buildnumber-maven-plugin</artifactId>
<version>1.4</version>
<executions>
<execution>
<phase>validate</phase>
<goals>
<goal>create</goal>
</goals>
</execution>
</executions>
<configuration>
<doCheck>false</doCheck>
<doUpdate>false</doUpdate>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-clean-plugin</artifactId>
<version>2.5</version>
<configuration>
<filesets>
<fileset>
<directory>src/main/resources/webapp/dist</directory>
<includes>
<include>**/*</include>
</includes>
<followSymlinks>false</followSymlinks>
</fileset>
</filesets>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.3.2</version>
<configuration>
<workingDirectory>${saga.webapp.code}</workingDirectory>
</configuration>
<executions>
<!-- Required: The following will ensure `npm install` is called
before anything else during the 'Clean Lifecycle' -->
<execution>
<id>npm prune (clean)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>clean</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>prune</argument>
</arguments>
</configuration>
</execution>
<execution>
<id>npm install --production (generate-resources)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>install</argument>
<argument>--production</argument>
</arguments>
</configuration>
</execution>
<!-- Optional: The following will output the npm configuration.
I do this so my CI logs will show the npm information used
for the build -->
<execution>
<id>npm config list (validate)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>validate</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>config</argument>
<argument>list</argument>
</arguments>
</configuration>
</execution>
<!-- Required: This following calls `npm run build` where 'build' is
the script name I used in my project, change this if yours is
different -->
<execution>
<id>npm run build-prod (generate-resources)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>run</argument>
<argument>build-prod</argument>
</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
<resources>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>${saga.webapp.export}</include>
</includes>
</resource>
</resources>
</build>
</profile>
</profiles>
Updating the RestHandler in Java Step-by-step guide
- On the <NameRecognizer>RestHandler, after the RecognizerInfo is set up, add
info.bundle(<path-to-bundle>);
where the path would be <artifact-id>/<name-of-library>/bundles/<name-of-library>.umd.min.js
There is no content with the specified labels