AOT Compilation is not worked.

[DoyeonOhTravelHow]

Issue description
angular2-google-maps does not work in the AOT compile.

Steps to reproduce and a minimal demo of the problem

step 1. Clone angular2-seed project.(
step 2. Install angular2-google-maps package.
step 3. Configure SYSTEM_CONFIG_DEV and SYSTEM_BUILDER_CONFIG

tools/config/project.config.ts

export class ProjectConfig extends SeedConfig {
    ...
    // angular2 google maps SYSTEM_CONFIG_DEV
    this.SYSTEM_CONFIG_DEV.paths['angular2-google-maps/core'] = `node_modules/angular2-google-maps/core/index.js`;
    this.SYSTEM_CONFIG_DEV.packages['angular2-google-maps/core'] = {  main: 'index.js', defaultExtension: 'js' };

    // angular2 google maps SYSTEM_BUILDER_CONFIG
    this.SYSTEM_BUILDER_CONFIG.paths['angular2-google-maps/core'] = `node_modules/angular2-google-maps/core/index.js`;
    this.SYSTEM_BUILDER_CONFIG.packages['angular2-google-maps/core'] = {  main: 'index.js', defaultExtension: 'js' };
}

step 4. Write the code on your site Getting Started
step 5. npm start (It worked well)
step 6. npm run serve.prod(It worked well too).
step 6. npm run build.prod.exp (Error occurs. This build has AOT compilation.)

Current behavior

AOT compile was not worked.(compile.ahead.prod)

...
[17:41:20] Starting 'build.prod.exp'...
[17:41:20] Starting 'clean.prod'...
[17:41:21] Deleted dist/prod
[17:41:21] Deleted dist/tmp
[17:41:21] Finished 'clean.prod' after 1.37 s
[17:41:21] Starting 'tslint'...
[17:41:26] Finished 'tslint' after 5.02 s
[17:41:26] Starting 'css-lint'...
[17:41:31] Finished 'css-lint' after 4.59 s
[17:41:31] Starting 'build.assets.prod'...
[17:41:31] Finished 'build.assets.prod' after 100 ms
[17:41:31] Starting 'build.html_css'...
[17:41:32] Finished 'build.html_css' after 1.25 s
[17:41:32] Starting 'copy.prod'...
[17:41:32] Finished 'copy.prod' after 54 ms
[17:41:32] Starting 'compile.ahead.prod'...
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 /home/ody12/workspace-mine/angular2-seed/dist/tmp/app/app.module.ts, resolving symbol AppModule in /home/ody12/workspace-mine/angular2-seed/dist/tmp/app/app.module.ts
    at simplifyInContext (/Users/iminar/Dev/angular/modules/@angular/compiler-cli/src/static_reflector.ts:540:15)
    at StaticReflector.simplify (/Users/iminar/Dev/angular/modules/@angular/compiler-cli/src/static_reflector.ts:544:18)
    at StaticReflector.annotations (/Users/iminar/Dev/angular/modules/@angular/compiler-cli/src/static_reflector.ts:92:28)
    at _loop_1 (/Users/iminar/Dev/angular/modules/@angular/compiler-cli/src/codegen.ts:63:48)
    at CodeGenerator.readFileMetadata (/Users/iminar/Dev/angular/modules/@angular/compiler-cli/src/codegen.ts:57:22)
    at /Users/iminar/Dev/angular/modules/@angular/compiler-cli/src/codegen.ts:105:56
    at Array.map (native)
    at CodeGenerator.codegen (/Users/iminar/Dev/angular/modules/@angular/compiler-cli/src/codegen.ts:105:33)
    at codegen (/home/ody12/workspace-mine/angular2-seed/tools/tasks/seed/compile.ahead.prod.ts:14:69)
    at Object.main (/home/ody12/workspace-mine/tools/@angular/tsc-wrapped/src/main.ts:44:12)
Compilation failed
...

Expected/desired behavior
I wish worked fine. help me.

angular2 & angular2-google-maps version

angular2: RC6
angular2-google-maps: "0.14.0",

Other information

thanks for read

[sebholstein]

@DoyeonOhTravelHow can you share your app.module.ts code? thanks!

[robhogan]

I'm seeing the same thing - possibly something to do with a missing ngc-generated .metadata.json file. See angular/angular#11262

[naveedahmed1]

@SebastianM actually the Angular team suggests that library vendors should also ship .metadata.json files. These files are produced automatically by ngc.

Your might find below comments useful:

angular/angular#11262 (comment)

angular/angular#11262 (comment)

angular/angular#11262 (comment)

Complete conversation (angular/angular#11262)

[DoyeonOhTravelHow]

@SebastianM this is my app.module.ts code. thanks your reply!.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { routes } from './app.routes';

import { AboutModule } from './about/about.module';
import { HomeModule } from './home/home.module';
import { SharedModule } from './shared/shared.module';
import { AgmCoreModule } from 'angular2-google-maps/core/index.js';
import { provideLazyMapsAPILoaderConfig } from 'angular2-google-maps/core';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    RouterModule.forRoot(routes),
    AboutModule,
    HomeModule,
    SharedModule.forRoot(),
    AgmCoreModule.forRoot()
  ],
  declarations: [AppComponent],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },
    provideLazyMapsAPILoaderConfig({
      apiKey: 'key',
      clientId: ''
    })
  ],
  bootstrap: [AppComponent]

})

export class AppModule { }

@rh389 @naveedahmed1 As you say, it seems that require metadata.json. thanks!.

[doyeonOh]

@SebastianM And this branch is sample code with using googleMap.

[sebholstein]

@DoyeonOhTravelHow @doyeonOh @naveedahmed1 thank you guys! I will check it this evening.

[Koslun]

Not sure of the status of this fix, but might be nice to also checkout the same issue at ng2-translate.

In it I would highlight a blog post describing how to solve this in general and some links to example repos of libraries solving this

[isaacplmann]

I wrote the blog post you mentioned. I'm glad you liked it. I think the error you're running into isn't directly related to metadata.json files, although you will need those too. My guess is that somewhere in your code you have export const blah = () => something which needs to be changed to export function blah() { return something; }.

I've written another article that goes through solutions to some of the errors (including the Function calls are not supported error) I've run into updating libraries to be AoT compatible.

[soyersoyer]

maybe the useFactory lambda in https://github.com/SebastianM/angular2-google-maps/blob/master/src/core/services/maps-api-loader/lazy-maps-api-loader.ts#L188

[modularcoder]

+1 for AoT support
Was struggling yesterday to integrate angular2-google-maps with Ionic2 RC0

Thanks a lot!

[lazarljubenovic]

@modularcoder Did you actually get it working? I tried changing the lambda as suggested two posts above into a factory-pattern function and export, but it was still failing.

[modularcoder]

@lazarljubenovic only without AoT in build for dev env.

I've described the steps here
https://forum.ionicframework.com/t/angular2-google-maps-in-ionic-2/65736

Make sure you have the latest version of @ionic/app-scripts installed which doesn't make AoT compilation during dev build.
https://github.com/driftyco/ionic-app-scripts

[allurco]

@modularcoder What to do when you have to build the app for android, the error is there... Did you find any solution for that? Probably we should not be using Ionic 2 for apps at this point, nothing really woks...

[modularcoder]

@allurco yes, I've managed to build the app without AoT compilation by adding "--dev" flag to build task in package.json.

I've created an example repo
https://github.com/modularcoder/ionic2-angular2-google-maps-example/blob/master/README.md

Refer readme for more info.

P.S. Make sure you have the latest version of @ionic/app-scripts package installed.

[basvdijk]

@SebastianM any update on when this bug might be fixed? Thanks!

[sebholstein]

@basvdijk Sorry guys, I'm currently rewriting the build procress to be able to support AOT. Expect updates in the following days.

[basvdijk]

@SebastianM Great! Your effort is really appreciated 👍

[basvdijk]

Great to see this is fixed! Any thoughts on when you are going to release this update?

[naveedahmed1]

Is it fixed? Using angular2-google-maps with AoT throws 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" Can anyone please guide on this?

[doyeonOh]

I think that bug has fixed and the issue was added in 0.16 milestone

[basvdijk]

@naveedahmed1 The milestone for 0.16.0 is at 55% see https://github.com/SebastianM/angular2-google-maps/milestone/12

[simetin]

Maybe it's me, but I installed the library from the GitHub repository and I got more 2 errors:
Consider replacing the function or lambda with a reference to an exported function, resolving symbol LAZY_MAPS_API_CONFIG in /Users/william/Ionic/mapOnDevice1/node_modules/angular2-google-maps/src/core/services/maps-api-loader/lazy-maps-api-loader.ts, resolving symbol AgmCoreModule in /Users/william/Ionic/mapOnDevice1/node_modules/angular2-google-maps/src/core/core-module.ts,

Anybody else ?

[basvdijk]

@tchinou1 as mentioned earlier the milestone for 0.16.0 with AoT support is at 55% see https://github.com/SebastianM/angular2-google-maps/milestone/12 As far as I'm aware the latest released version does not support AoT yet.

[simetin]

@basvdijk By running npm install git+https://[email protected]/SebastianM/angular2-google-maps.git wouldn't it install the version with the modifications ?

[basvdijk]

@staticint that could be the case indeed. Perhaps @SebastianM can describe how you can install the latest git version with AoT support.

[robhogan]

Edit: sorry, I'm wrong - npm installing should already build for you.

By pulling the repo directly with npm you're only getting the source, not the built assets.

In theory you could clone this repo, build it locally, and then npm link with your project, but that's probably only practical for local development. Or you could upload tarball of the build somewhere and pull that with npm.

[simetin]

Does anybody know how to install it from the GitHub repository ?

Thanks

[lazarljubenovic]

@tchinou1 It's in the npm docs.

A question. I just forked, cloned, built and npm-link'd the master branch and on my existing project I get Uncaught Error: Can't resolve all parameters for LazyMapsAPILoader: (?, WindowRef, DocumentRef).. I'm importing this lib in a lazy loaded module with the following code in my module's imports:

AgmCoreModule.forRoot({
    apiKey: 'xxx',
}),

I tried creating a black new project and tried minimally reproducing the situation, but it works in the other repo so I have no idea where to start looking. It's like it doesn't receive the object passed through forRoot method.

Anyone had a similar situation or this error message? I know it's a long shot without any code and a non-reproducible error, but I'm getting out of ideas.

[markoddi]

How can I update my angular google maps so that AOT works? is the AOT version available now?

[basvdijk]

To make AOT work, add "angular2-google-maps": "^0.16.0", to your package.json file

Then in your app component import the module:

import { AgmCoreModule } from 'angular2-google-maps/core';

and add it to your imports (replace the xxxx with your api key)

NgModule({
  declarations: [],
  imports: [
    AgmCoreModule.forRoot({
      apiKey: 'xxxxxxxxxxxxxxxxxxxxx'
    })
  ],

Now in your template you can use the component like:

        <sebm-google-map disableDefaultUI="true" [zoom]="zoom" [latitude]="location.latitude" [longitude]="location.longitude">

            <sebm-google-map-marker [latitude]="location.latitude" [longitude]="location.longitude"></sebm-google-map-marker>

        </sebm-google-map> 

[fopnet]

I am using the 0.17.0 milestone, and the error below keeps going.
"Cannot find name 'google'.
" Cannot find namespace 'google'

This error has already corrected?