...
Code Block | ||||
---|---|---|---|---|
| ||||
npm i -g @angular/cli |
Code Block | ||||
---|---|---|---|---|
| ||||
ng new webapp --createApplication=false Would you like to add Angular routing? No Which stylesheet format would you like to use? Sass |
Code Block | ||||
---|---|---|---|---|
| ||||
ng generate library <name-of-library> --prefix=plug |
Code Block | ||||
---|---|---|---|---|
| ||||
npm install @saga/plugin --save |
Code Block | ||||
---|---|---|---|---|
| ||||
npm install @angular/material --save |
Code Block | ||||
---|---|---|---|---|
| ||||
"build": "ng build" "build-prod": "ng build --prod" |
Code Block | ||||
---|---|---|---|---|
| ||||
"@saga/plugin": "^x.y.z" |
the same version as the package.json located in webapp
import the following modules
Code Block | ||||
---|---|---|---|---|
| ||||
import {PluginModule} from '@saga/plugin'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; |
Then update the @NgModule the @NgModule by adding a new provider and the modules to the section imports
Code Block | ||||
---|---|---|---|---|
| ||||
providers: [{ provide: '<NameOfRecognizer>Component', useValue: [{ name: '<NameOfRecognizer>Component', component: <NameOfRecognizer>Component }], multi: true }], imports: [ CommonModule, FormsModule, PluginModule ] |
Code Block | ||||
---|---|---|---|---|
| ||||
<saga.webapp.code>src/main/resources/webapp</saga.webapp.code> <saga.webapp.export>webapp/dist/</saga.webapp.export> |
Code Block | ||||
---|---|---|---|---|
| ||||
<Artifact>${project.artifactId}</Artifact> <WebApp>${saga.webapp.export}</WebApp> |
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<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> |
...
Code Block | ||||
---|---|---|---|---|
| ||||
info.bundle(<path-to-bundle>); |
where the path would be <artifact-id>/<name-of-library>/bundles/<name-of-library>.umd.min.js
Content by Label | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...