Angular2-google-maps in ionic 2

modularcoder · October 4, 2016, 1:28pm

Hi all!

I’m trying to setup angular2-google-maps component for ionic2 app, but getting error on build.

ngc error: Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in E:/node/hotby.me/ionic2-angular2-google-maps-example/.tmp/app/app.module.ts, resolving symbol AppModule in E:/node/hotby.me/ionic2-angular2-google-maps-example/.tmp/app/app.module.ts

Can someone help me please?

Here is the module definition file

github.com

modularcoder/ionic2-angular2-google-maps-example/blob/master/src/app/app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { AgmCoreModule } from 'angular2-google-maps/esm/core/index.js';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    AgmCoreModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage

This file has been truncated. show original

And here is full project repo, which is just ionic2 blank template with modified app.module.ts fil

modularcoder · October 6, 2016, 10:37am

Ok, I’ve finally managed to run the angular2-google-maps in my app.

The issue was is caused by Angular2 ahead of time compiler and angular2-google maps incompatibility.
If anyone will have same issue, here are the steps I’ve done, to make it work in dev environment without AoT

I’ve updated ionic build scripts lib, so now it doesn’t make AoT compiling for dev build
You need to import angular2-google-maps by following method, otherwise it doesn’t work after rollup

import { AgmCoreModule } from ‘angular2-google-maps/esm/core/index.js’;
Add the AgmCoreModule to imports field in your app module

AgmCoreModule.forRoot({
apiKey: ‘YOUR-GOOGLE-API-KEY’
})

Now you’ll to be able to use the
This works only for build in dev environment yet, untill angular2-google-maps plugin will add AoT support.

Regards
Gevorg

DeeM52 · October 6, 2016, 8:09pm

Isn’t there a way to configure rollup so that AoT compiling is not applied on modules which don’t have support for AoT?

modularcoder · October 6, 2016, 9:26pm

That’s an interesting question. I don’t know, but I think that rollup has nothing to do with AoT, and the error is given during ngc task, which is AoT compilation task, and rollup comes after in bundle task

github.com

ionic-team/ionic-app-scripts/blob/master/src/build.ts

import { join } from 'path';

import {
  readVersionOfDependencies,
  scanSrcTsFiles,
  validateRequiredFilesExist,
  validateTsConfigSettings
} from './build/util';


import { bundle, bundleUpdate } from './bundle';
import { clean } from './clean';
import { copy } from './copy';
import { deepLinking, deepLinkingUpdate } from './deep-linking';
import { lint, lintUpdate } from './lint';
import { Logger } from './logger/logger';
import { minifyCss, minifyJs } from './minify';
import { ngc } from './ngc';
import { getTsConfigAsync, TsConfig } from './transpile';
import { postprocess } from './postprocess';

This file has been truncated. show original

I may be wrong though.

osi · October 6, 2016, 9:43pm

There is a actually an issue open for AoT support at: https://github.com/SebastianM/angular2-google-maps/issues/629 on which you might want to keep an eye on.

Topic		Replies	Views
Ionic 2 + Typescript + Google Maps ionic-v3	27	18820	January 2, 2017
Ionic 2 - angular2-google-maps - UNMET PEER DEPENDENCY ionic-v3	4	1262	January 27, 2017
Ionic rc2 build fails ionic-v3	0	664	November 10, 2016
Errors building apk when using angular-calendar ionic-v3	0	446	December 5, 2016
Working Google Map Example - Ionic 2 demo	2	1461	May 30, 2017

Angular2-google-maps in ionic 2

Related topics