未加星标

Integrate Angular 2 Google Maps into Ionic 2

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

Angular2 Google Maps (AGM) is a great component for integrating Google Maps into Angular 2 apps. There were several ways you could do this with Angular 1.x apps, but Angular2 Google Maps is the best way I've seen of doing with with Angular 2 apps. There is minimal code required and it is super easy to get started, in large part due to solid documentation on its Getting Started page .

I've previously incorporated this into regular Angular 2 web apps running in a browser, as well as Ionic 2 mobile apps. However, in the course of recording my latest Pluralsight course , Ionic 2 (which had been in the final beta) dropped the Ionic 2 Release Candidate . This was a significant release as Ionic 2 was updated to take a dependency on Angular 2 final. When this happened, not only did the previous implementation with AGM break, but even following the instructions on the AGM Getting Started page don't exactly work for an Ionic 2 app. This blog post will document how you can get up and running quickly with AGM in an Ionic 2 app.

First thing's first, let's generate our initial Ionic 2 app. If you haven't already, make sure the Ionic CLI is installed:

npm install -g ionic

Make sure you're on version 2:

ionic -v 2.1.0

Let's create our Ionic 2 project in the usual way:

ionic start ionic2-google-maps-test blank --ts --v2

Now let's follow the instructions on the AGM Getting Started page by installing AGM into our project:

npm install angular2-google-maps --save

The Ionic 2 RC now uses the NgModule approach, which allows you to declare your dependencies up front.

Per the AGM guide, we import AgmCoreModule into app.module.ts and add it to our imports list shown on line numbers 6 and 15:

import { NgModule } from [email protected]/core'; import { IonicApp, IonicModule } from 'ionic-angular'; import { MyApp } from './app.component'; import { HomePage } from '../pages/pages'; import { AgmCoreModule } from 'angular2-google-maps/core'; @NgModule({ declarations: [ MyApp, HomePage ], imports: [ IonicModule.forRoot(MyApp), AgmCoreModule.forRoot({ apiKey: '{your-api-key-here}'}) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage, ], providers: [] }) export class AppModule {}

And of course we'll also put the appropriate mark-up on our desired page per the Getting Started instructions:

<sebm-google-map [latitude]="lat" [longitude]="lng"> <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker> </sebm-google-map>

Let's run our Ionic app:

ionic serve

However, when we do this, we get the following error:

[14:36:28] bundle dev started ... [14:36:34] bundle dev failed: Module c:\dev\ionic2-google-maps-test\node_modules\angular2-google-maps\core\index.js does not export AgmCoreModule (imported by c:\dev\ionic2-google-maps-test\.tmp\app\app.module.js) [14:36:34] bundle dev failed: Module c:\dev\ionic2-google-maps-test\node_modules\angular2-google-maps\core\index.js does not export AgmCoreModule (imported by c:\dev\ionic2-google-maps-test\.tmp\app\app.module.js) [14:36:34] Error: Module c:\dev\ionic2-google-maps-test\node_modules\angular2-google-maps\core\index.js does not export AgmCoreModule (imported by c:\dev\ionic2-google-maps-test\.tmp\app\app.module.js)

"\angular2-google-maps\core\index.js does not export AgmCoreModule"? We followed the instructions perfectly so why is this happening? Our intellisense at design time seemed to have no problem with it - why is Ionic having a problem when it tries to actually run?

It turns out, the answer can be found in the Bundle section in the Ionic App Build Scripts documentation page. For the RC release, Ionic 2 moved from a gulp-based build process to one that uses rollup.js for bundling. Most of the time third-party libraries "just work", but in some cases, additional information needs to be provided to Rollup so that it knows what is being exported. This is the problem happening with AGM.

The get around this, we need to create our own rollup.config.js file in our project. The best way to do that is to find the existing rollup.config.js file in the [email protected]/app-scripts/config directory local to your project - copy that file - then create a directory called scripts right in the root of your project and paste that file there. In your file, find the plugins() section and add a namedExports property to commonjs() as shown here:

plugins: [ builtins(), commonjs({ namedExports: { 'node_modules/angular2-google-maps/core/index.js': ['AgmCoreModule'] } }), nodeResolve({ module: true, jsnext: true, main: true, browser: true, extensions: ['.js'] }), globals(), json() ]

This tells Rollup that yes, angular2-google-maps does in fact export AgmCoreModule . We now need Ionic to know about our custom rollup.config.js file so let's open package.json in our project root. Add a config section that points to your custom file:

"config": { "ionic_rollup": "./scripts/rollup.config.js" },

Now when you run the ionic serve command, everything should work just fine!

Here is a Github repo with the complete working code . My (upcoming) Ionic 2 course on Pluralsight was created with the final beta so a different approach is shown in that video. But for Ionic 2 RC and beyond, this should enable everyone to easily integrate AGM with Ionic 2.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: GMGit
分页:12
转载请注明
本文标题:Integrate Angular 2 Google Maps into Ionic 2
本站链接:http://www.codesec.net/view/480883.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(81)