cust-supp-portal v0.1.3
Create Basic Angular App
Install Angular CLI
npm install @angular/cli –g
Create Sandbox Application
ng new sample-widget --routing
Verify Sandbox Application Works
cd sample-widget
ng serve
Confirm app loads successfully at http://localhost:4200
Create a sample card
Create Feature Module
ng generate module modules/cust-supp-portal
Alternatively, you can use shortcuts for 'generate' and 'module':
ng g m modules/cust-supp-portal
Create Default Component
ng generate component modules/cust-supp-portal --export
Export the Module from the Extension
Add ./src/app/modules/cust-supp-portal/public_api.ts with the following contents:
export * from './cust-supp-portal.module';
export * from './cust-supp-portal.component';
Import the Module into the App
In ./src/app/app.module.ts:
- Add the following line after the last import statement:
import { CustSuppPortalModule } from 'cust-supp-portal';
- Add 'CustSuppPortalModule' to the 'imports' array
Add Alias for 'cust-supp-portal'
In ./src/tsconfig.app.json:
- Add the following property:
"angularCompilerOptions": {
"paths": {
"cust-supp-portal": [ "./app/modules/cust-supp-portal/public_api.ts" ]
}
}
- Add the following property to 'compilerOptions':
"paths": {
"cust-supp-portal": [ "./app/modules/cust-supp-portal/public_api.ts" ]
}
Note: You may need to add a comma before or after the added properties for proper JSON formatting
Modify the App to Load the Extension
Replace the contents of ./src/app/app.component.html with the following:
<app-cust-supp-portal></app-cust-supp-portal>
Verify Extension Works
ng serve
Confirm app loads successfully with extension at http://localhost:4200. It should display the message 'cust-supp-portals works!'.
Widget Infrastructure Integration
Install Dependencies
npm install @slb-portal/infrastructure --save
Import Infrastructure Module
- Add the following near the top of ./src/app/app.module.ts:
import { InfrastructurModule, PackageConfigurationService, ENVIRONMENT } from '@slb-portal/infrastructure';
- Add the following after the last import statement
export function getEnvironment() {
return env.environment;
}
- Add the following to the imports property of @NgModule:
InfrastructurModule.forRoot()
- Add the following property to @NgModule:
providers: [
{
provide: ENVIRONMENT,
useFactory: getEnvironment
}
]
Note: You may need to add a comma before or after the added properties and/or values for proper syntax
Create Data Resolver
Create a data resolver to preload the configuration:
ng generate service ConfigDataResolver --module app
Replace the contents of ./src/app/config-data-resolver.service.ts with the following:
import { PackageConfigurationService } from '@slb-portal/infrastructure';
import { Injectable } from '@angular/core';
import {
Router,
Resolve,
RouterStateSnapshot,
ActivatedRouteSnapshot
} from '@angular/router';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class ConfigDataResolver implements Resolve<boolean> {
constructor(private packageConfigService: PackageConfigurationService, private router: Router) { }
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
return this.packageConfigService.getConfiguration('cust-supp-portal');
}
}
Use Router to Load Card
- Replace the contents of ./src/app/app.module.routing.ts with the following:
import { Routes } from '@angular/router';
import { ConfigDataResolver } from './config-data-resolver.service';
import { MyCardComponent } from '@slb-portal-widgets/cust-supp-portal';
export const AppRoutes: Routes = [
{
path: '',
component: MyCardComponent,
resolve: { routeData: ConfigDataResolver }
},
{
path: '**',
redirectTo: ''
}
];
- Replace the contents of ./src/app/app.component.html with the following:
<router-outlet></router-outlet>
Incorporate Back-End Service
Define Schema
ng generate interface modules/cust-supp-portal/SampleData
Add the following properties to ./src/app/modules/cust-supp-portal/sample-data.ts:
id: string;
name: string;
Create Service
ng g service modules/cust-supp-portal/back-end-integration -m modules/cust-supp-portal
Inject HttpClient
Add the following to ./src/app/modules/cust-supp-portal/back-end-integration.service.ts:
constructor(private httpClient: HttpClient) { }
Implement Methods
Add the following to ./src/app/modules/cust-supp-portal/back-end-integration.service.ts:
GetSampleData():Observable<SampleData> {
return this.httpClient.get<SampleData>('config://cust-supp-portal');
}
Integrate Service into Component
- Add the following to ./src/app/modules/cust-supp-portal/cust-supp-portal.component.ts
sampleGetData$: Observable<SampleData>;
constructor(private backEndIntegrationService: BackEndIntegrationService) { }
- Add the following to the ngOnInit method of MyCardComponent
ngOnInit() {
this.sampleGetData$ = this.backEndIntegrationService.GetSampleData();
}
Render Data from Service
Add the following to ./src/modules/cust-supp-portal/cust-supp-portal.component.html:
<div style="margin:10px 10px">
<p>
Contents of ./src/assets/config/my-data.json should be displayed below:
</p>
<p>{{ (sampleGetData$ | async)?.name}}</p>
</div>
Compile Widget as Package
Install ng-packagr (version 1.5.0)
npm install ng-packagr --save-dev
Configure Package
- Add ./ng-package.json with the following contents:
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"src": "./src/app/modules/cust-supp-portal",
"dest": "dist-pkg",
"workingDirectory": ".ng_build",
"lib": {
"entryFile": "public_api.ts"
}
}
- Add ./src/app/modules/cust-supp-portal/package.json with the following contents:
{
"name": "@slb-portal-widgets/cust-supp-portal",
"version": "1.2.11",
"repository": "https://github.com/",
"author": "",
"license": "UNLICENSED",
"private": false,
"scripts": {
"postinstall": "node scripts/install.js"
},
"peerDependencies": {
"@angular/core": "^4.2.4",
"@angular/common": "^4.2.4"
}
}
Add a folder ./src/app/modules/cust-supp-portal/scripts
and ./src/app/modules/cust-supp-portal/scripts/config
Configure Build
- Add ./scripts/build.js with the following contents:
const fs = require('fs-extra');
const childProcess = require('child_process');
const os = require('os');
let ngPackagr = './node_modules/.bin/ng-packagr';
if (os.platform().startsWith('win')) {
ngPackagr = ngPackagr.concat('.cmd').replace(/\//g, '\\');
}
console.log(ngPackagr);
childProcess.execFileSync(
ngPackagr,
['-p', 'ng-package.json'],
{ stdio: 'inherit' }
);
fs.copySync('./src/app/modules/cust-supp-portal/scripts', './dist-pkg/scripts');
fs.emptyDirSync('./node_modules/@slb-portal-widgets/cust-supp-portal');
fs.copySync('./dist-pkg', './node_modules/@slb-portal-widgets/cust-supp-portal');
- Add the following properties to 'scripts' in ./package.json:
"start": "cp -R src/app/modules/cust-supp-portal/scripts/config src/assets/ && ng serve --host 0.0.0.0 ",
"start:pkg": "cp -R src/app/modules/cust-supp-portal/scripts/config src/assets/ && ng serve -app pkg --host 0.0.0.0",
"build": "node ./scripts/build.js"
Compile Package
npm run build
Run Widget via Package
Define Compiled-Mode App
- Add ./src/tsconfig.pkg.json with the following contents:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/pkg",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
- Add the following object to 'apps' array in ./.angular-cli.json
{
"root": "src",
"outDir": "dist-pkg",
"name", "pkg",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.pkg.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
Verify Compiled Package
ng serve --app pkg --aot
Publish Widget
Configure
- Add ./src/app/modules/cust-supp-portal/scripts/install.js with the following content:
const fsExtra = require('fs-extra');
const source = './scripts/config';
const target = '../../../src/assets/config';
fsExtra.copySync(source, target);
- Add ./src/app/modules/cust-supp-portal/package.json with the following content (change name as appropriate):
{
"name": "cust-supp-portal",
"version": "1.0.0-alpha.0",
"repository": "https://github.com/",
"author": "",
"license": "Proprietary",
"private": false,
"scripts": {
"postinstall": "node scripts/install.js"
},
"peerDependencies": {
"@angular/core": "^4.2.4",
"@angular/common": "^4.2.4"
}
}
Publish
npm publish dist-pkg