Angular-google-maps: A compilação AOT não funciona.

Criado em 8 set. 2016  ·  31Comentários  ·  Fonte: SebastianM/angular-google-maps

Descrição do problema
angular2-google-maps não funciona na compilação AOT.

Etapas para reproduzir e uma demonstração mínima do problema

etapa 1. Projeto de semente angular2 do clone. (
etapa 2. Instale o pacote angular2-google-maps .
etapa 3. Configure SYSTEM_CONFIG_DEV e 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' };
}

etapa 4. Escreva o código em seu site Introdução
etapa 5. npm start (funcionou bem)
etapa 6. npm run serve.prod (Funcionou bem também).
etapa 6. npm run build.prod.exp ( ocorre um erro . Esta compilação tem compilação AOT.)

Comportamento atual

A compilação AOT não funcionou. (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
...

Comportamento esperado / desejado
Eu gostaria que funcionasse bem. me ajude.

versão angular2 e angular2-google-maps

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

Outra informação

obrigado pela leitura

urgent bug

Comentários muito úteis

@basvdijk Desculpe, pessoal, no momento estou reescrevendo o processo de construção para poder suportar AOT. Espere atualizações nos próximos dias.

Todos 31 comentários

@DoyeonOhTravelComo você pode compartilhar seu código app.module.ts? obrigado!

Estou vendo a mesma coisa - possivelmente algo a ver com um arquivo ngc -gerado ausente .metadata.json . Veja https://github.com/angular/angular/issues/11262

@SebastianM, na verdade, a equipe do Angular sugere que os fornecedores de bibliotecas também enviem arquivos .metadata.json . Esses arquivos são produzidos automaticamente pelo ngc.

Os comentários abaixo podem ser úteis:

https://github.com/angular/angular/issues/11262#issuecomment -244449696

https://github.com/angular/angular/issues/11262#issuecomment -244472000

https://github.com/angular/angular/issues/11262#issuecomment -244489405

Conversa completa (https://github.com/angular/angular/issues/11262)

@SebastianM este é o meu código app.module.ts. obrigado sua resposta !.

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 Como você disse, parece que requerem metadata.json . obrigado!.

@SebastianM E este branch é um código de amostra com o uso do googleMap.

@DoyeonOhTravelHow @doyeonOh @ naveedahmed1 obrigado pessoal! Vou verificar esta noite.

Não tenho certeza do status desta correção, mas pode ser bom verificar o mesmo problema em ng2-translate .

Nele, eu destacaria uma postagem de blog que descreve como resolver isso em geral e alguns links para exemplos de repositórios de bibliotecas que resolvem isso

Eu escrevi a postagem do blog que você mencionou. Estou feliz que você gostou. Acho que o erro que você encontrou não está diretamente relacionado a metadata.json arquivos, embora você também precise deles. Meu palpite é que em algum lugar do seu código você tem export const blah = () => something que precisa ser alterado para export function blah() { return something; } .

Escrevi outro artigo que apresenta soluções para alguns dos erros (incluindo o erro Function calls are not supported ). Corri para atualizar bibliotecas para serem compatíveis com AoT.

+1 para suporte AoT
Teve dificuldade ontem para integrar angular2-google-maps com Ionic2 RC0

Muito obrigado!

@modularcoder Você realmente o fez funcionar? Eu tentei mudar o lambda conforme sugerido nos dois posts acima em uma função padrão de fábrica e exportar, mas ainda estava falhando.

@lazarljubenovic apenas sem AoT na construção para dev env.

Eu descrevi as etapas aqui
https://forum.ionicframework.com/t/angular2-google-maps-in-ionic-2/65736

Certifique-se de ter a versão mais recente de @ ionic / app-scripts instalada, que não faz a compilação AoT durante a compilação do dev.
https://github.com/driftyco/ionic-app-scripts

@modularcoder O que fazer quando tiver que construir o aplicativo para android, o erro está aí ... Você encontrou alguma solução para isso? Provavelmente não deveríamos estar usando Ionic 2 para aplicativos neste momento, nada realmente funciona ...

@allurco sim, consegui construir o aplicativo sem compilação AoT adicionando a sinalização "--dev" para construir a tarefa em package.json.

Eu criei um repositório de exemplo
https://github.com/modularcoder/ionic2-angular2-google-maps-example/blob/master/README.md

Consulte o leia-me para obter mais informações.

PS Certifique-se de ter a versão mais recente do pacote @ ionic / app-scripts instalada.

@SebastianM alguma atualização sobre quando esse bug pode ser corrigido? Obrigado!

@basvdijk Desculpe, pessoal, no momento estou reescrevendo o processo de construção para poder suportar AOT. Espere atualizações nos próximos dias.

@SebastianM Ótimo! Seu esforço é muito apreciado 👍

Ótimo ver que isso foi corrigido! Alguma ideia de quando você vai lançar esta atualização?

Está consertado? Usar angular2-google-maps com AoT gera um erro "Erro encontrado ao resolver valores de símbolo estaticamente. Chamadas de função não são suportadas. Considere substituir a função ou lambda por uma referência a uma função exportada, resolvendo o símbolo" Alguém pode orientar sobre isso?

Acho que o bug foi corrigido e o problema foi adicionado no marco 0,16

@ naveedahmed1 O marco para 0.16.0 é de 55%, consulte https://github.com/SebastianM/angular2-google-maps/milestone/12

Talvez seja eu, mas instalei a biblioteca do repositório GitHub e encontrei mais 2 erros:
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,

Alguém mais ?

@ tchinou1 conforme mencionado anteriormente, o marco para 0.16.0 com suporte ao AoT é de 55%, consulte https://github.com/SebastianM/angular2-google-maps/milestone/12. Pelo que sei, a última versão lançada sim ainda não é compatível com AoT.

@basvdijk Executando npm install git+https://[email protected]/SebastianM/angular2-google-maps.git não instalaria a versão com as modificações?

@staticint esse poderia ser o caso. Talvez @SebastianM possa descrever como você pode instalar a versão mais recente do git com suporte ao AoT.

Edit: desculpe, estou errado - a instalação do npm já deve ser construída para você.

Ao obter o repo diretamente com o npm, você está obtendo apenas a origem, não os ativos criados.

Em teoria, você poderia clonar este repositório, compilá-lo localmente e, em seguida, vincular o npm ao seu projeto, mas isso provavelmente só é prático para desenvolvimento local. Ou você pode fazer o upload do tarball da construção em algum lugar e puxá-lo com o npm .

Alguém sabe como instalá-lo a partir do repositório GitHub?

Obrigado

@ tchinou1 está na documentação do

Uma pergunta. Acabei de fazer o fork, clonar, construir e npm-link'd o branch master e no meu projeto existente recebo Uncaught Error: Can't resolve all parameters for LazyMapsAPILoader: (?, WindowRef, DocumentRef). . Estou importando esta lib em um módulo de carregamento lento com o seguinte código no imports meu módulo:

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

Tentei criar um novo projeto preto e tentei reproduzir minimamente a situação, mas funciona no outro repo, então não tenho ideia de por onde começar a procurar. É como se ele não recebesse o objeto passado pelo método forRoot .

Alguém teve uma situação semelhante ou esta mensagem de erro? Eu sei que é um tiro longo sem qualquer código e um erro não reproduzível, mas estou ficando sem ideias.

Como posso atualizar meu Google Maps angular para que o AOT funcione? a versão AOT está disponível agora?

Para fazer o AOT funcionar, adicione "angular2-google-maps": "^0.16.0", ao seu arquivo package.json

Em seguida, no componente do aplicativo, importe o módulo:

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

e adicione-o às suas importações (substitua o xxxx pela sua chave de API)

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

Agora, em seu modelo, você pode usar o componente como:

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

Estou usando o marco 0.17.0 e o erro abaixo continua.
"Não é possível encontrar o nome 'google'.
"Não é possível encontrar o namespace 'google'

Este erro já foi corrigido?

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

n1t3w0lf picture n1t3w0lf  ·  3Comentários

dineshkumar20 picture dineshkumar20  ·  3Comentários

matishw picture matishw  ·  3Comentários

Halynsky picture Halynsky  ·  3Comentários

ostapch picture ostapch  ·  4Comentários