通过 import 语句将 angular-google-maps 集成到 AngularJS 和 ES6 项目的最佳方法答案

【问题标题】：Best way to integrate angular-google-maps to an AngularJS and ES6 project through import statement通过 import 语句将 angular-google-maps 集成到 AngularJS 和 ES6 项目的最佳方法
【发布时间】：2017-01-08 21:31:13
【问题描述】：

我正在开发一个项目的前端，并在这个项目中使用 Angular v-1.5 和 ES6。我正在尝试将 gMaps API 集成到项目中。

由于目前 google 没有 ES6 的官方文档，我正在使用 angular-google-maps (link) by angular-ui(link) 来做同样的事情.

但是，问题是我找不到任何示例或可靠的材料来做同样的事情。我尝试通过显而易见的方式来完成，我们在 ES6 中完成，即 npm install 然后将其导入我们的应用程序。但这行不通。原来我无法导入lodash。

查看 lodash 的问题：

a)https://github.com/lodash/lodash/issues/1457

b)https://github.com/lodash/lodash/issues/1704

我尝试了 lodash 的一位贡献者在 cmets 中提到的这些解决方案：

a)https://github.com/lodash/lodash/issues/1704#issuecomment-164379884

b)https://github.com/lodash/lodash/issues/1704#issuecomment-164524426

但它们不工作。

我仍然无法在互联网上找到解决此问题的任何内容。我收到错误消息：

未捕获的引用错误：_ 未定义

这显然是由于缺少 lodash 常量 (_)

如果没有成功，很遗憾，我不得不回滚到 ES5，这将再次消耗大量时间，因为我将不得不更改项目的结构并将整个语法更改为 ES5。

我正面临同样的问题。见here：

我的 app.js 文件：

import angular from 'angular';

// Import our app config files
import constants  from './config/app.constants';
import appConfig  from './config/app.config';
import appRun     from './config/app.run';

import 'angular-ui-router';

import 'angular-ui-bootstrap';

import 'angular-google-maps';

import fp from 'lodash/fp';
const _ = fp();

// Import our templates file (generated by Gulp)
import './config/app.templates';
// Import our app functionaity
import './layout';
import './components';
import './home';
import './profile';
import './services';
import './auth';
import './settings';
import './dashboard';
import './maps';


// Create and bootstrap application
const requires = [
  'ui.router',
  'ui.bootstrap',
  'uiGmapgoogle-maps',
  '_',
  'templates',
  'app.layout',
  'app.components',
  'app.home',
  'app.profile',
  'app.article',
  'app.services',
  'app.auth',
  'app.settings',
  'app.dashboard',
  'app.map'
];

// Mount on window for testing
window.app = angular.module('app', requires);

angular.module('app').constant('AppConstants', constants);

angular.module('app').config(appConfig);

angular.module('app').run(appRun);

angular.bootstrap(document, ['app'], {
  strictDi: true
});

【问题讨论】：

标签： javascript angularjs google-maps ecmascript-6 lodash

【解决方案1】：

您需要包含/加载（通过 webpack）lodash：最快的方法是将其包含在您的 html 中：

<script src='https://cdn.jsdelivr.net/lodash/4.15.0/lodash.min.js'> </script>

我也有一些问题让它与 ES6 一起正常工作，在 github 上发布了一个问题：https://github.com/angular-ui/angular-google-maps/issues/1929

【讨论】：