# Web SDK with Angular Unexpected End of JSON input

**URL:** <https://devforum.zoom.us/t/web-sdk-with-angular-unexpected-end-of-json-input/24438>\
**Category:** Web\
**Created:** [July 17, 2020, 1:57pm UTC](https://devforum.zoom.us/t/web-sdk-with-angular-unexpected-end-of-json-input/24438 "2020-07-17T13:57:37Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![eleal](https://avatars.discourse-cdn.com/v4/letter/e/82dd89/32.png) [@eleal](https://devforum.zoom.us/u/eleal)\
**Post date:** [July 17, 2020, 1:57pm UTC](https://devforum.zoom.us/t/web-sdk-with-angular-unexpected-end-of-json-input/24438/1 "2020-07-17T13:57:37Z")

</div>

**Description**  
Web SDK version: 1.7.10  
Angular: 7

My application working fine on local, and all assets and everything was set up right as the documentation, however, after build and deploy on AWS, all the application gets blank and stops works with the error described below:

**Error**

 ![Screenshot from 2020-07-17 10-51-27](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/c/c05815213561f3d72e5c856fa7eae1a051c5a142.png)

**Smartphone:**

- Device: Desktop
- OS: Ubuntu
- Version: 14 lts
- Browser: All browers

I tried to found some solution on the forum, but nothing helps. I saw some related to “update react-scripts” but I didn’t use this one on the project, and the SDK didn’t have any dependence related to this on the package.json

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [July 21, 2020, 9:45pm UTC](https://devforum.zoom.us/t/web-sdk-with-angular-unexpected-end-of-json-input/24438/2 "2020-07-21T21:45:41Z")

</div>

Hey @eleal,

Can you send me a GitHub repo with this issue so I can reproduce locally.

Also if you haven’t already, you can reference the Angular Web SDK Sample App:

> **[zoom/websdk-sample-angular](https://github.com/zoom/websdk-sample-angular)**
>
> Use the Zoom Web SDK in an Angular App. Contribute to zoom/websdk-sample-angular development by creating an account on GitHub.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![jagathprasad0](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/jagathprasad0/32/9575_2.png) [@jagathprasad0](https://devforum.zoom.us/u/jagathprasad0)\
**Post date:** [July 22, 2020, 2:01pm UTC](https://devforum.zoom.us/t/web-sdk-with-angular-unexpected-end-of-json-input/24438/3 "2020-07-22T14:01:21Z")

</div>

I am also facing the same issue. it works fine on local environment, when I hosting in production of AWS it throws the JSON input error.

 ![prod issue](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/5/58f3d863266ddb29b980eca7a704b336725a008f.png)

Please verify and let me know.  
I have verified the same issue in Devforum, please find the below url.

> [@Unexpected end of JSON when source map disabled](https://devforum.zoom.us/t/unexpected-end-of-json-when-source-map-disabled/19264/14):
>
> Hey @prantikde, I was able to reproduce the issue using your repo, however, I was not able to solve it. This seems to be an issue with react or the way it optimizes it’s build. Like @grahaampeterson said, it works when enabling source maps. Maybe this Stack Overflow will help: I will talk to our Web SDK engineerings to see if this is the reason it is not working in a production build. (CS-1971) Thanks, Tommy

Please help me to fix this issue.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [July 27, 2020, 1:11am UTC](https://devforum.zoom.us/t/web-sdk-with-angular-unexpected-end-of-json-input/24438/5 "2020-07-27T01:11:26Z")

</div>

Hey @jagathprasad0, I was not able to reproduce this issue using [GitHub pages](https://pages.github.com/) and the Angular sample app here with the built version in /docs:

> **[tommygaessler/websdk-sample-angular-live](https://github.com/tommygaessler/websdk-sample-angular-live)**
>
> Live Example of Zoom Web SDK with Angular. Contribute to tommygaessler/websdk-sample-angular-live development by creating an account on GitHub.

I used `$ ng build --prod`

Deployed site:

[https://tommygaessler.com/websdk-sample-angular-live/](https://tommygaessler.com/websdk-sample-angular-live/)

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![jagathprasad0](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/jagathprasad0/32/9575_2.png) [@jagathprasad0](https://devforum.zoom.us/u/jagathprasad0)\
**Post date:** [July 29, 2020, 5:48am UTC](https://devforum.zoom.us/t/web-sdk-with-angular-unexpected-end-of-json-input/24438/7 "2020-07-29T05:48:33Z")

</div>

I have verified, and removed the --prod then its working fine.  
I have hosted my application into “shared hosting” while accessing zoom video call it shows below error.

 ![firewall issue](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/3/39fc01ec6eb2967f9fc500072a9a6414c590a083.png)

Please verify and let me know.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [July 30, 2020, 5:06pm UTC](https://devforum.zoom.us/t/web-sdk-with-angular-unexpected-end-of-json-input/24438/8 "2020-07-30T17:06:50Z")

</div>

Hey @jagathprasad0,

Are you able to access those files in your project url from the browser?

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![eleal](https://avatars.discourse-cdn.com/v4/letter/e/82dd89/32.png) [@eleal](https://devforum.zoom.us/u/eleal)\
**Post date:** [July 31, 2020, 3:01pm UTC](https://devforum.zoom.us/t/web-sdk-with-angular-unexpected-end-of-json-input/24438/10 "2020-07-31T15:01:34Z")

</div>

Hi @tommy, thx for answering. I fixed the issue… the codebuild on prod was using the Yarn instead the NPM to install the zoom SDK dependencies 😪

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 3, 2020, 7:33pm UTC](https://devforum.zoom.us/t/web-sdk-with-angular-unexpected-end-of-json-input/24438/11 "2020-08-03T19:33:41Z")

</div>

Happy to hear you got it working! 🙂

Thanks for sharing how you fixed it!

-Tommy

---

<div class="post-metadata">

**Author:** ![jagathprasad0](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/jagathprasad0/32/9575_2.png) [@jagathprasad0](https://devforum.zoom.us/u/jagathprasad0)\
**Post date:** [August 6, 2020, 2:50pm UTC](https://devforum.zoom.us/t/web-sdk-with-angular-unexpected-end-of-json-input/24438/12 "2020-08-06T14:50:40Z")

</div>

Thanks for your update.  
I have uploaded the @zoomus files from node\_modules,Its working fine,

I am using bootstrap 4.^ for my application, [https://prelinehealthcare.com/](https://prelinehealthcare.com/) while using zoom boostrap.css files, modal popup is not working in my application,

so I have removed the boostrap.css files from angular.json file, then zoom video call design got collapsed,

please can you guide me how to fix this.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/e/e68a7016af67040d254b90eae60059f3beecd6ba.png)

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 7, 2020, 6:25pm UTC](https://devforum.zoom.us/t/web-sdk-with-angular-unexpected-end-of-json-input/24438/13 "2020-08-07T18:25:28Z")

</div>

Hey @jagathprasad0,

Please see my post here on best practices for making sure the Web SDK styles are not overridden by your styles:

> [@ZoomMtg is overwriting all css in my entire ReactJS website](https://devforum.zoom.us/t/zoommtg-is-overwriting-all-css-in-my-entire-reactjs-website/16360/5):
>
> Hey @gabriel.rf0, @jude.niroshan11, This is currently how the Web SDK works. You can try adjusting the Web SDK CSS or host the Web SDK on a sub domain / path seperate from your app so it does not break your styling. We are working on a more customizable Web SDK in the future. Thanks, Tommy

Thanks,  
Tommy
