Legacy Dev Forum Posts

Anders_Vejen | 2019-09-02 20:05:50 UTC | #1

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 :ok_hand::+1:.

It started with reading the troubles of other users here:

Unable to use JS SDK in Angular 7 web app

<br> 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

<br>

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. <br>

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

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

<br>

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' ]
	}
}

<br>

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 | 2019-09-02 19:59:32 UTC | #2

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

system | 2019-10-03 19:59:33 UTC | #3

This topic was automatically closed 31 days after the last reply. New replies are no longer allowed.

This post was migrated from the old Developer Forum.

ref: 5937