Polymer 3.0 in visual studio to make rest call with iron-ajax

Question

Hi I use visual studio 2017 with polymer 3.0.I try to use iron-ajax to rest call.But I take error 'Uncaught SyntaxError: Unexpected string iron-ajax line 11'.I copy same example at iron-ajax site but error is same.What I am missing about?

https://www.webcomponents.org/element/@polymer/iron-ajax

> <script src="node_modules/@polymer/iron-ajax/iron-ajax.js"></script>
>     <script type="module">
>         import { PolymerElement, html } from './node_modules/@polymer/polymer/polymer-element.js';
>         //import './node_modules/@polymer/iron-ajax/iron-ajax.js';
>         class SampleElement extends PolymerElement {
>             static get template() {
>                 return html`
>       <iron-ajax
>           auto
>           url="http://localhost:8033/api/City/All"   
>           hande-as="json"
>           on-response="handleResponse"
>           debounce-duration="300">
>       </iron-ajax>
>     `;
>             }
>         }
> 
>             customElements.define('sample-element', SampleElement);
>     </script>

Answer 1

I tried to find out from your codes, but I could not find. Maybe problems comes out from something else over there. Here a working example: (I just changed the URL to retrieve some data:

DEMO

import {PolymerElement, html} from '@polymer/polymer';

import '@polymer/iron-ajax/iron-ajax.js';
import '@polymer/iron-list/iron-list.js';
import '@polymer/iron-image/iron-image.js';

class SampleElement extends PolymerElement {
            static get properties() { return { 
                  response: { type: Object }
             }
            }
             static get template() {
                 return html`
               <iron-ajax 
                 auto id="ajax"
                 url="https://randomuser.me/api?results=10"
                 last-response="{{response}}"
                  on-response="handleResponse"
              > </iron-ajax>

                 <iron-list items="[[response.results]]" as="item" id="itemlist" scroll-target="document" selected-item="{{selectedItem}}" selection-enabled grid>
                 <template>
                       <div class = "flexchild" style="width:50%"> 
                        <iron-image   style ="width: 40px;height:40px; border-radius:30px;" src='[[item.picture.large]]'></iron-image> 
                        <span>[[item.name.first]] [[item.name.last]]</span>  </div><br/>
                  </template>
                  </iron-list>


                  `;
             }

     handleResponse(r) {
       console.log(r)
     }
  }
 customElements.define('sample-element', SampleElement);