angular-google-maps: AOT Compilation is not worked.

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

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 12
Comments: 31 (3 by maintainers)

Most upvoted comments

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

+21

sebholstein on Oct 12, 2016

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

Thanks a lot!

modularcoder on Oct 6, 2016

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

sebholstein on Sep 12, 2016

@SebastianM Great! Your effort is really appreciated 👍

basvdijk on Oct 12, 2016

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

DoyeonOhTravelHow on Sep 12, 2016

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

basvdijk on Oct 27, 2016

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

doyeonOh on Oct 27, 2016

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.

isaacplmann on Sep 29, 2016

@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

modularcoder on Oct 6, 2016

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

Koslun on Sep 28, 2016

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

doyeonOh on Sep 12, 2016