Angular - Uncaught TypeError：无法读取undefined |的属性'create'自动填充

Question

我正在尝试实施地方自动完成。所以我选择谷歌的地方。最初，我正在将API与Angular集成。但是在控制台上出现了以下错误。

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/autocomplete/json‌?.... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. core.es5.js:1020 ERROR Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers…} 

我发现，有些experts有一些建议可以从后端提出请求。所以我是从后端写的。

从Angular文档中找到了一些东西。

  

Angular开发人员可能会遇到跨源资源共享错误   在提出服务请求时（通常是数据服务请求）。到了   服务器自己的主机服务器以外的服务器。浏览器禁止   此类请求除非服务器明确允许它们。

     

客户端应用程序无法对这些错误执行任何操作。   必须将服务器配置为接受应用程序的请求。   请阅读enable-cors.org，了解如何为特定服务器启用CORS。

所以这是我的google.service.ts

import { Injectable } from '@angular/core';
import { HttpModule, JsonpModule, Response, Headers, Http, RequestOptions } from '@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;
  }


}

我的app.component.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { GooglePlaces } from './google.service';
import { Place } from './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;
                }

          }

}

如果我使用ng serve --prod或上传应用程序的生产版本。我在浏览器控制台上遇到以下错误。

  

未捕获的TypeError：无法读取未定义的属性“create”

我无法识别错误。我知道检查生成构建js文件并不容易。现在整个表格都不可见。

它正在我的localhost上工作如果我使用ng serve命令。但问题仅在于生产构建。

请帮我解决这个问题。如果您有任何建议或者您在我的代码中发现任何不良做法，请提及它，因为我是Angular的新手。那会非常有帮助。提前致谢。