How to use Javascript with Angular 10

[TomM]

Hi all,

I'm trying to use the PureCloud Platform API in an Angular 10 application but I'm not able to import the library. I've tried the steps as specified in the article: https://developer.mypurecloud.com/forum/t/how-to-use-javascript-with-angular-8/5937 but it doesn't seem to make a difference.
Any idea how to get load the library in Angular 10?

Regards,
Tom

[John_Carnell]

Hi Tom,

Can you post the error message you are getting? Is it the same error message you are getting as described in the [https://developer.mypurecloud.com/forum/t/how-to-use-javascript-with-angular-8/5937](http://How to use Javascript in Angular 8)?

Thanks,
John

[TomM]

Hi John,

I just found the solution. I'll write an article on this forum how to use the library in Angular 10.

[John_Carnell]

Awesome. Thank you.

[Aurelien_Plancque]

Hi TomM
Would you be able to share your findings, I am struggling to do the exact same thing.

Cheers,

Aurelien

[Aurelien_Plancque]

Actually nevermind.

For interested people:

packages.json

{
  "name": "<project-name>",
  "version": "0.0.0",
  "scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
"@angular/animations": "~10.0.9",
"@angular/common": "~10.0.9",
"@angular/compiler": "~10.0.9",
"@angular/core": "~10.0.9",
"@angular/forms": "~10.0.9",
"@angular/platform-browser": "~10.0.9",
"@angular/platform-browser-dynamic": "~10.0.9",
"@angular/router": "~10.0.9",
"purecloud-platform-client-v2": "88.0.0",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
  },
  "devDependencies": {
"@angular-builders/custom-webpack": "^10.0.0",
"@angular-devkit/build-angular": "~0.1000.6",
"@angular/cli": "~10.0.6",
"@angular/compiler-cli": "~10.0.9",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
  }
}

angular.json (excerpt)
{

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",

  "version": 1,

  "newProjectRoot": "projects",

  "projects": {

    "<project-name>": {

...

      "architect": {

        "build": {

          "builder": "@angular-builders/custom-webpack:browser",

          "options": {

            "customWebpackConfig":{

              "path": "./extra-webpack.config.js",

              "mergeStrategies": { "externals": "prepend" }

            },

            ...

            "scripts": [

              "node_modules/purecloud-platform-client-v2/dist/web-cjs/purecloud-platform-client-v2.js"

            ]

        ...

        "serve": {

          "builder": "@angular-builders/custom-webpack:dev-server",

          "options": {

            "browserTarget": "<project-name>:build"

          },

          "configurations": {

            "production": {

              "browserTarget": "<project-name>:build:production"

            }

          }

        },

And extra-webpack.config.js:

module.exports = {

  externals: {

    platformClient: "require('platformClient')"

  }

};

Finally when you want to import in your ts:

import * as platformClient from 'platformClient';

[TomM]

Hi,

Thanks for your response and solution!
I had a different solution but yours seems better.

I was wasting too much time on the project and started to use the REST API instead. So getting the API to work with Angular wasn't a priority anymore and was more a personal struggle.