Angular-google-maps: La compilation AOT ne fonctionne pas.

Créé le 8 sept. 2016  ·  31Commentaires  ·  Source: SebastianM/angular-google-maps

Description du problème
angular2-google-maps ne fonctionne pas dans la compilation AOT.

Étapes à suivre pour reproduire et une démo minimale du problème

étape 1. Cloner le projet
étape 2. Installez le package angular2-google-maps .
étape 3. Configurez SYSTEM_CONFIG_DEV et 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' };
}

étape 4. Écrivez le code sur votre site Mise en route
étape 5. npm start (Cela a bien fonctionné)
étape 6. npm run serve.prod (Cela a bien fonctionné aussi).
étape 6. npm run build.prod.exp (Une erreur se produit . Cette compilation a une compilation AOT.)

Comportement actuel

La compilation AOT n'a pas fonctionné. (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
...

Comportement attendu / souhaité
Je souhaite bien travaillé. aide-moi.

version angular2 et angular2-google-maps

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

Les autres informations

merci d'avoir lu

urgent bug

Commentaire le plus utile

@basvdijk Désolé les gars, je

Tous les 31 commentaires

@DoyeonOhTravelComment pouvez-vous partager votre code app.module.ts? Merci!

Je vois la même chose - peut-être quelque chose à voir avec un fichier ngc généré par .metadata.json manquant. Voir https://github.com/angular/angular/issues/11262

@SebastianM en fait, l'équipe Angular suggère que les fournisseurs de bibliothèques devraient également envoyer des fichiers

Vous pourriez trouver les commentaires ci-dessous utiles:

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

Conversation complète (https://github.com/angular/angular/issues/11262)

@SebastianM c'est mon code app.module.ts. merci votre réponse !.

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 Comme vous le dites, il semble que cela nécessite metadata.json . Merci!.

@SebastianM Et cette branche est un exemple de code avec l'utilisation de googleMap.

@DoyeonOhTravelHow @doyeonOh @ naveedahmed1 merci les gars! Je vais le vérifier ce soir.

Je ne suis pas sûr de l'état de ce correctif, mais il serait peut-être intéressant de vérifier également le

Dans ce document, je soulignerais un article de blog décrivant comment résoudre ce problème en général et des liens vers des exemples de dépôts de bibliothèques résolvant ce problème.

J'ai écrit le billet de blog que vous avez mentionné. Je suis heureux que vous ayez aimé. Je pense que l'erreur que vous rencontrez n'est pas directement liée aux fichiers metadata.json , même si vous en aurez également besoin. Je suppose que quelque part dans votre code, vous avez export const blah = () => something qui doit être changé en export function blah() { return something; } .

J'ai écrit un autre article qui présente des solutions à certaines des erreurs (y compris l'erreur Function calls are not supported ) que j'ai rencontrées pour mettre à jour les bibliothèques pour qu'elles soient compatibles AoT.

+1 pour le support AoT
A eu du mal hier à intégrer angular2-google-maps avec Ionic2 RC0

Merci beaucoup!

@modularcoder L' avez-vous réellement fait fonctionner? J'ai essayé de changer le lambda comme suggéré deux messages ci-dessus en une fonction de modèle d'usine et d'exporter, mais cela échouait toujours.

@lazarljubenovic uniquement sans AoT dans la construction pour dev env.

J'ai décrit les étapes ici
https://forum.ionicframework.com/t/angular2-google-maps-in-ionic-2/65736

Assurez-vous que vous avez la dernière version de @ ionic / app-scripts installée qui ne fait pas la compilation AoT lors de la construction du développement.
https://github.com/driftyco/ionic-app-scripts

@modularcoder Que faire lorsque vous devez créer l'application pour Android, l'erreur est là ... Avez-vous trouvé une solution pour cela? Nous ne devrions probablement pas utiliser Ionic 2 pour les applications à ce stade, rien ne fonctionne vraiment ...

@allurco oui, j'ai réussi à construire l'application sans compilation AoT en ajoutant le drapeau "--dev" pour construire la tâche dans package.json.

J'ai créé un exemple de repo
https://github.com/modularcoder/ionic2-angular2-google-maps-example/blob/master/README.md

Reportez-vous au fichier Lisez-moi pour plus d'informations.

PS Assurez-vous que la dernière version du package @ ionic / app-scripts est installée.

@SebastianM une mise à jour sur le moment où ce bogue pourrait être corrigé? Merci!

@basvdijk Désolé les gars, je

@SebastianM Super! Votre effort est vraiment apprécié 👍

C'est génial de voir que c'est corrigé! Avez-vous une idée de la date de sortie de cette mise à jour?

Est-ce corrigé? L'utilisation d'angular2-google-maps avec AoT génère une erreur "Une erreur s'est produite lors de la résolution statique des valeurs de symbole. Les appels de fonction ne sont pas pris en charge. Pensez à remplacer la fonction ou lambda par une référence à une fonction exportée, en résolvant le symbole" Quelqu'un peut-il vous guider à ce sujet?

Je pense que ce bogue a été corrigé et que le problème a été ajouté au jalon 0.16

@ naveedahmed1 Le jalon pour 0.16.0 est à 55% voir https://github.com/SebastianM/angular2-google-maps/milestone/12

C'est peut-être moi, mais j'ai installé la bibliothèque à partir du référentiel GitHub et j'ai eu plus de 2 erreurs:
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,

Quelqu'un d'autre ?

@ tchinou1 comme mentionné précédemment, le jalon pour la 0.16.0 avec le support AoT est à 55% voir https://github.com/SebastianM/angular2-google-maps/milestone/12 Pour autant que je sache, la dernière version publiée le fait ne prend pas encore en charge AoT.

@basvdijk En exécutant npm install git+https://[email protected]/SebastianM/angular2-google-maps.git , n'installerait-il pas la version avec les modifications?

@staticint qui pourrait être le cas en effet. Peut-être que @SebastianM peut décrire comment installer la dernière version de git avec le support AoT.

Edit: désolé, je me trompe - l'installation de npm devrait déjà se construire pour vous.

En extrayant le dépôt directement avec npm, vous n'obtenez que la source, pas les actifs créés.

En théorie, vous pouvez cloner ce dépôt, le créer localement, puis npm relier votre projet, mais ce n'est probablement pratique que pour le développement local. Ou vous pouvez télécharger l'archive tar de la construction quelque part et la récupérer avec npm .

Quelqu'un sait-il comment l'installer à partir du référentiel GitHub?

Merci

@ tchinou1 C'est dans la documentation npm .

Une question. Je viens de bifurquer, cloner, construire et npm-lier la branche principale et sur mon projet existant, j'obtiens Uncaught Error: Can't resolve all parameters for LazyMapsAPILoader: (?, WindowRef, DocumentRef). . J'importe cette bibliothèque dans un module chargé paresseusement avec le code suivant dans le imports mon module:

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

J'ai essayé de créer un nouveau projet noir et essayé de reproduire au minimum la situation, mais cela fonctionne dans l'autre dépôt, donc je ne sais pas par où commencer. C'est comme s'il ne recevait pas l'objet passé par la méthode forRoot .

Quelqu'un a eu une situation similaire ou ce message d'erreur? Je sais que c'est un long plan sans aucun code et une erreur non reproductible, mais je suis à court d'idées.

Comment puis-je mettre à jour mes google maps angulaires pour qu'AOT fonctionne? la version AOT est-elle disponible maintenant?

Pour faire fonctionner AOT, ajoutez "angular2-google-maps": "^0.16.0", à votre fichier package.json

Ensuite, dans votre composant d'application, importez le module:

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

et ajoutez-le à vos importations (remplacez le xxxx par votre clé api)

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

Maintenant, dans votre modèle, vous pouvez utiliser le composant comme:

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

J'utilise le jalon 0.17.0 et l'erreur ci-dessous continue.
"Impossible de trouver le nom" google ".
"Impossible de trouver l'espace de noms" google "

Cette erreur a déjà été corrigée?

Cette page vous a été utile?
0 / 5 - 0 notes