javascript - Angular - Uncaught TypeError: Cannot read property 'create' of undefined | Autocomplete -

i'm trying implement places auto-complete. chose google places. initially, integrating api angular. got following error on console.

xmlhttprequest cannot load https://maps.googleapis.com/maps/api/place/autocomplete/json‌?.... no 'access-control-allow-origin' header present on requested resource. origin 'http://localhost:4200' therefore not allowed access. core.es5.js:1020 error response {_body: progressevent, status: 0, ok: false, statustext: "", headers: headers…}  

i found, experts had suggestions make request backend. wrote backend.

and found angular documentation.

angular developers may encounter cross-origin resource sharing error when making service request (typically data service request). server other application's own host server. browsers forbid such requests unless server permits them explicitly.

there isn't client application can these errors. server must configured accept application's requests. read how enable cors specific servers @ enable-cors.org.

so google.service.ts

import { injectable } '@angular/core'; import { httpmodule, jsonpmodule, response, headers, http, requestoptions } '@angular/http';  import 'rxjs/rx';  @injectable() export class googleplaces {    constructor(private http: http, protected _defaultoptions: requestoptions) {}    getplaces(place)   {           return this.http.get("http://backendurl/api/places/"+place, {headers: this.jsonheaders()}).map(res => res.json());   }    jsonheaders()   {         let headers: headers = new headers();         headers.append("content-type", "application/json; charset=utf-8");         headers.append("access-control-allow-origin", "*");         headers.append("accept", "application/json");         headers.append("access-control-allow-methods", "get");         headers.append("access-control-allow-headers", "content-type");          return headers;   }   } 

and app.component.ts

import { component } '@angular/core'; import { formcontrol } '@angular/forms'; import { googleplaces } './google.service'; import { place } './place';  import 'rxjs/add/operator/startwith'; import 'rxjs/add/operator/map';  @component({   selector: 'search-form',   templateurl: './app.component.html',   styleurls: ['./app.component.css'] }) export class appcomponent {         statectrl: formcontrol;         filteredstates: any;         places: place[] = [];          constructor(private googleplaces:googleplaces) {         this.statectrl = new formcontrol();         this.filteredstates = this.statectrl.valuechanges          .startwith(null)          .map(name => this.filterplaces(name));         }          ngoninit() {}          filterplaces(val: string)         {                 var returnplace = [];                 if(val !== null && val !== undefined)                 {                         const responseplaces = this.googleplaces.getplaces(val);                         responseplaces.subscribe(                           places => this.places = places                         );                          return this.places;                 }                 else                 {                         return returnplace;                 }            }  } 

if use ng serve --prod or upload production build of application. i'm got following error on browser console.

uncaught typeerror: cannot read property 'create' of undefined

i cannot identify error. know not easy check production build js file. entire form not visible.

it working on localhost if use ng serve command. problem production build.

please me solve issue. if have suggestions or if found bad practices on code please mention it, because i'm new angular. helpful. in advance.