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
Info |
---|
See how to connect to the npm repository by checking this link |
Code Block |
---|
language | text |
---|
title | .npmrc |
---|
collapse | true |
---|
|
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
Code Block |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
npm i -g @angular/cli |
- Cd to <project>/resources
- Create and empty angular project
Code Block |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
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)
Code Block |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
ng generate library <name-of-library> --prefix=plug |
- Install Saga plugin
Code Block |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
npm install @saga/plugin --save |
- Install Angular Material and Angular CDK
Code Block |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
npm install @angular/material @angular/cdk --save |
- Open the file pacakge.json
- On the scripts section add or update
Code Block |
---|
|
"build": "ng build"
"build-prod": "ng build --prod" |
- Cd to projects/<name-of-library>
- Open the file package.json
- On peerDependencies add
Code Block |
---|
|
"@saga/plugin": "^x.y.z" |
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
Code Block |
---|
|
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
Code Block |
---|
|
providers: [{
provide: '<NameOfRecognizer>Component',
useValue: [{
name: '<NameOfRecognizer>Component',
component: <NameOfRecognizer>Component
}],
multi: true
}],
imports: [
CommonModule,
FormsModule,
PluginModule
] |
...