How to use Javascript with Angular 8

[Anders_Vejen]

Hi

I was trying to get an Angular project integrated with PureCloud.

Being a complete Angular/TS noob, I fearlessly wanted to see if I could get the PureCloud JS SDK script to work with Angular 8.

And I succeeded .

It started with reading the troubles of other users here:

Unable to use JS SDK in Angular 7 web app

Building on the article above, the steps to get it to work are:

1. Add @angular-builders/custom-webpack to your project using

npm i -D @angular-builders/custom-webpack

2. Edit `angular.json` (in the root folder of project) and edit/add the following lines (first and last quoted block are just for guidance):

  ...
  "architect": {
    "build": {

            "builder": "@angular-builders/custom-webpack:browser",
            "options": {
  			"customWebpackConfig": {
  			   "path": "./custom-webpack.config.js",
  			   "mergeStrategies": { "resolve.mainFields": "prepend" }
  			},

        "outputPath": "dist/PureCloudAngularTest",
        "index": "src/index.html",
        "main": "src/main.ts",
        ...

The prepend of jsnext:main in resolve.mainFields is the magic trick that @tim.smith explained needs to be done for correct resolve.

3. Also add the custom-webpack to the serve section:

        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "PureCloudAngularTest:build"
          },

4. Create the file `custom-webpack.config.js` in your projects root folder (where angular.json is) with this content:

module.exports = {
	resolve: {
		mainFields: [ 'jsnext:main' ]
	}
}

5. The example code in `app.component.ts` should look like this:

import { Component, OnInit } from '@angular/core';
import platformClient from 'purecloud-platform-client-v2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'PureCloudAngularTest';

  pcApiClient: platformClient.ApiClientClass;

  ngOnInit(): void {

    this.pcApiClient = platformClient.ApiClient.instance;
    console.log(this.pcApiClient);
  }
}

And that's it.

Hopefully this will help others wanting to use the JS SDK and Angular together.

[Anders_Vejen]

I could not add the following links due to me being a new user (read: noob ) restrictions:

1. Add @angular-builders/custom-webpack to your project using

npm i -D @angular-builders/custom-webpack (see this article and/or this)