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