Angular-google-maps: La compilación AOT no funciona.

@DoyeonOhTravel¿Cómo puedes compartir tu código app.module.ts? ¡Gracias!

Estoy viendo lo mismo, posiblemente algo relacionado con un archivo ngc generado por .metadata.json falta. Ver https://github.com/angular/angular/issues/11262

@SebastianM en realidad, el equipo de Angular sugiere que los proveedores de bibliotecas también deberían enviar archivos .metadata.json . Estos archivos son producidos automáticamente por ngc.

Es posible que encuentres útiles los comentarios a continuación:

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

Conversación completa (https://github.com/angular/angular/issues/11262)

@SebastianM este es mi código app.module.ts. gracias tu respuesta !.

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 dices, parece que requieren metadata.json . ¡Gracias!.

@SebastianM Y esta rama es un código de muestra con el uso de googleMap.

@DoyeonOhTravelHow @doyeonOh @ naveedahmed1 ¡ Gracias chicos! Lo comprobaré esta noche.

No estoy seguro del estado de esta solución, pero sería bueno verificar también el

En él, destacaría una publicación de blog que describe cómo resolver esto en general y algunos enlaces a ejemplos de repositorios de bibliotecas que resuelven esto

Escribí la publicación de blog que mencionaste. Me alegra que te guste. Creo que el error con el que se está encontrando no está directamente relacionado con los archivos metadata.json , aunque también los necesitará. Supongo que en algún lugar de su código tiene export const blah = () => something que debe cambiarse a export function blah() { return something; } .

Escribí otro artículo que analiza las soluciones a algunos de los errores (incluido el error Function calls are not supported ). Me encontré con la actualización de bibliotecas para que sean compatibles con AoT.

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

+1 para soporte AoT
Ayer estaba luchando para integrar angular2-google-maps con Ionic2 RC0

¡Muchas gracias!

@modularcoder ¿De verdad lo hiciste funcionar? Intenté cambiar la lambda como se sugirió en las dos publicaciones anteriores en una función de patrón de fábrica y exportar, pero aún fallaba.

@lazarljubenovic solo sin AoT en compilación para dev env.

He descrito los pasos aquí
https://forum.ionicframework.com/t/angular2-google-maps-in-ionic-2/65736

Asegúrese de tener instalada la última versión de @ ionic / app-scripts, que no realiza la compilación de AoT durante la compilación del desarrollador.
https://github.com/driftyco/ionic-app-scripts

@modularcoder Qué hacer cuando tienes que crear la aplicación para Android, el error está ahí ... ¿Encontraste alguna solución para eso? Probablemente no deberíamos usar Ionic 2 para aplicaciones en este punto, nada realmente funciona ...

@allurco sí, me las arreglé para construir la aplicación sin compilación de AoT agregando el indicador "--dev" para construir la tarea en package.json.

He creado un repositorio de ejemplo
https://github.com/modularcoder/ionic2-angular2-google-maps-example/blob/master/README.md

Consulte el archivo Léame para obtener más información.

PD: Asegúrate de tener instalada la última versión del paquete @ ionic / app-scripts.

@SebastianM ¿ alguna actualización sobre cuándo se podría solucionar este error? ¡Gracias!

@basvdijk Lo siento chicos, actualmente estoy reescribiendo el proceso de compilación para poder admitir AOT. Espere actualizaciones en los próximos días.

@SebastianM ¡Genial! Su esfuerzo es realmente apreciado 👍

¡Es genial ver que esto está arreglado! ¿Alguna idea sobre cuándo lanzará esta actualización?

¿Esta arreglado? El uso de angular2-google-maps con AoT arroja el error "Se encontró un error al resolver los valores de símbolo de forma estática. No se admiten las llamadas a funciones. Considere reemplazar la función o lambda con una referencia a una función exportada, resolviendo el símbolo" ¿Alguien puede orientar sobre esto?

Creo que ese error se ha solucionado y el problema se agregó en el hito 0.16

@ naveedahmed1 El hito para 0.16.0 es del 55% ver https://github.com/SebastianM/angular2-google-maps/milestone/12

Tal vez sea yo, pero instalé la biblioteca desde el repositorio de GitHub y obtuve más 2 errores:
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,

Nadie más ?

@ tchinou1 como se mencionó anteriormente, el hito para 0.16.0 con soporte AoT es del 55% ver https://github.com/SebastianM/angular2-google-maps/milestone/12 Hasta donde yo sé, la última versión lanzada lo hace todavía no es compatible con AoT.

@basvdijk Al ejecutar npm install git+https://[email protected]/SebastianM/angular2-google-maps.git ¿no instalaría la versión con las modificaciones?

@staticint, ese podría ser el caso. Quizás @SebastianM pueda describir cómo puede instalar la última versión de git con soporte AoT.

Editar: lo siento, estoy equivocado, la instalación de npm ya debería compilarse para usted.

Al extraer el repositorio directamente con npm, solo obtiene la fuente, no los activos compilados.

En teoría, podría clonar este repositorio, compilarlo localmente y luego npm vincularlo con su proyecto, pero probablemente solo sea práctico para el desarrollo local. O puede cargar el tarball de la compilación en algún lugar y extraerlo con npm .

¿Alguien sabe cómo instalarlo desde el repositorio de GitHub?

Gracias

@ tchinou1 Está en los documentos de npm .

Una pregunta. Acabo de bifurcar, clonar, construir y vincular npm la rama maestra y en mi proyecto existente obtengo Uncaught Error: Can't resolve all parameters for LazyMapsAPILoader: (?, WindowRef, DocumentRef). . Estoy importando esta biblioteca en un módulo cargado de forma diferida con el siguiente código en el imports mi módulo:

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

Intenté crear un nuevo proyecto negro e intenté reproducir mínimamente la situación, pero funciona en el otro repositorio, así que no tengo idea de dónde empezar a buscar. Es como si no recibiera el objeto pasado a través del método forRoot .

¿Alguien tuvo una situación similar o este mensaje de error? Sé que es una posibilidad remota sin ningún código y un error no reproducible, pero me estoy quedando sin ideas.

¿Cómo puedo actualizar mis mapas angulares de Google para que AOT funcione? ¿Está disponible la versión AOT ahora?

Para que AOT funcione, agregue "angular2-google-maps": "^0.16.0", a su archivo package.json

Luego, en el componente de su aplicación, importe el módulo:

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

y agréguelo a sus importaciones (reemplace el xxxx con su clave api)

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

Ahora en su plantilla puede usar el 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> 

Estoy usando el hito 0.17.0 y el siguiente error continúa.
"No se puede encontrar el nombre 'google'.
"No se puede encontrar el espacio de nombres 'google'

¿Este error ya se ha corregido?