0

I am trying to include an angular web component inside of an angular application. But I am getting this error.

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.o (https://ordexstorageaccounttst.blob.core.windows.net/offer-form/elements/offer-request-form.js:3:295463)
    at e.invokeTask (https://ordexstorageaccounttst.blob.core.windows.net/offer-form/elements/offer-request-form.js:2:8043)
    at Object.onInvokeTask (https://ordexstorageaccounttst.blob.core.windows.net/offer-form/elements/offer-request-form.js:3:186798)
    at e.invokeTask (https://ordexstorageaccounttst.blob.core.windows.net/offer-form/elements/offer-request-form.js:2:7964)
    at t.runTask (https://ordexstorageaccounttst.blob.core.windows.net/offer-form/elements/offer-request-form.js:2:3122)
    at t.invokeTask [as invoke] (https://ordexstorageaccounttst.blob.core.windows.net/offer-form/elements/offer-request-form.js:2:9175)
    at g (https://ordexstorageaccounttst.blob.core.windows.net/offer-form/elements/offer-request-form.js:2:21786)
    at XMLHttpRequest.y (https://ordexstorageaccounttst.blob.core.windows.net/offer-form/elements/offer-request-form.js:2:22092)

When including the web component inside a normal static HTML file it works but when I try to do so in an angular application it won't work.

Also when including the web component like this

const offerFormElement = document.createElement('offer-request-form');

it also seems to be working. But I am trying to include it like this

<offer-request-form></offer-request-form>

Any help would be appreciated.

Edit: Could it be the webpack config? I read some things online saying I should rename the JSON function name in the webpack config but I am not getting it to work.

Simone Lungarella
  • 301
  • 1
  • 4
  • 15
Beatbox
  • 77
  • 1
  • 4
  • 1
    The error seems to be pointing out an issue with a request that the component is performing. It's expecting JSON and it's getting back HTML somehow. That's why the SyntaxError. Can you please check the network tab in your browser's console and see what's going on there? – Octavian Mărculescu Sep 10 '21 at 06:49
  • @OctavianMărculescu It isn't actually sending any requests. Thats what is weirding me out because with the create element it does work but just placing it inside the template doesn't. – Beatbox Sep 10 '21 at 06:57
  • Did you also add `schemas: [CUSTOM_ELEMENTS_SCHEMA]` in your `AppModule`? – Octavian Mărculescu Sep 10 '21 at 07:01
  • Yes i did. I read somewhere that it could be a compatibility thing with webpack. I read that i should rename the jsonpfunction name in the webpack config but it is not allowing me to do so because it is saying jsonpfunction is not a valid property of webpack.output – Beatbox Sep 10 '21 at 07:03
  • On what browser are you debugging? You might need poliyfills. I was looking at this article here: https://vaadin.com/learn/tutorials/using-web-components-in-angular – Octavian Mărculescu Sep 10 '21 at 07:05
  • I am using chrome. I tried the link you sent but it doesnt seem to be working. – Beatbox Sep 10 '21 at 07:15

0 Answers0