How to Add PureCloud SDK to Angular (12)

Platform API JavaScript SDK
1

For those who are attempting to import the SDK into their Angular project, you've probably run into issues where things aren't working correctly.

This is due to the fact that Webpack looks at the package.json of purecloud-platform-client-v2, and uses the value in the browser field, which points at dist/web-cjs/purecloud-platform-client-v2.min.js. However, what is actually needed is the ES6 entry point in src/purecloud-platform-client-v2.

So, we need to tell WebPack to handle the module resolution differently than indicated in purecloud-platform-client-v2 package.json.

This can be accomplished via a custom webpack configuration. That will require three things to be done in order to accomplish the module resolution we want:

  1. Add @angular-builders/custom-webpack to your devDependencies. You'll need to use the version appropriate for your version of Angular. For Angular 12, I used version 12.1.3.
  2. Create a webpack.config.js file in the root of your project
  3. Modify your angular.json file to use webpack.config.js

Once those tasks have been accomplished, you can import as usual:
import PlatformClient, {
AnalyticsApi,
ApiClientClass,
ConversationsApi,
Models,
.....
} from 'purecloud-platform-client-v2';

In angular json, we tell it to use custom-webpack for browser and server builds:

    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.js"
         }
     .......
    "serve": {
      "builder": "@angular-builders/custom-webpack:dev-server",
    .........

In webpack.config.js, add the following:

const path = require('path');
module.exports = {
  resolve: {
    alias: {
      "purecloud-platform-client-v2": [
        path.resolve(__dirname, 'node_modules/purecloud-platform-client-v2/src/purecloud-platform-client-v2'),
      ]
    },
    fallback: {
      path: false,
      crypto: false,
      util: false,
      os: false,
      fs: false,
      zlib: false,
      http: false,
      https: false
    } 
  }
}

For those folks familiar with WebPack, it would seem this could also be accomplished with resolve.mainfields. However, I found that it doesn't appear to work under WebPack 4/5. So I ended up having to use resolve.alias in order force the resolution we need.

Although these instructions were for Angular 12, the basic concepts should be applicable to other Angular versions as well, and I expect also for anything else that needs ES6 and uses WebPack.

2

Hi David,

Thanks for the post. We also have a blueprint app that shows how to build a Angular app with Genesys Cloud. It is located here.

Thanks,
John Carnell
Manager, Developer Engagement

3

John, that's great. Thanks for that link.

4

Hi David,

Thanks for reaching out to us. I am closing this topic. Please free to open another topic if you have any other questions or concerns.

Thanks,
John

5