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!.

[ryanOhh]

@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