Angular-google-maps: AOT-Kompilierung funktioniert nicht.

Erstellt am 8. Sept. 2016  ·  31Kommentare  ·  Quelle: SebastianM/angular-google-maps

Fehlerbeschreibung
angle2-google-maps funktioniert in der AOT-Kompilierung nicht.

Schritte zur Reproduktion und eine minimale Demo des Problems

Schritt 1. Klonen Sie das Angular2-Seed- Projekt. (
Schritt 2. Installieren Sie das Paket angular2-google-maps .
Schritt 3. Konfigurieren Sie SYSTEM_CONFIG_DEV und 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' };
}

Schritt 4 den Code auf Ihrer Website schreiben Erste Schritte
Schritt 5. npm start (Es hat gut funktioniert)
Schritt 6. npm run serve.prod (Es hat auch gut funktioniert).
Schritt 6. npm run build.prod.exp ( Fehler tritt auf . Dieser Build verfügt über eine AOT-Kompilierung.)

Aktuelles Verhalten

AOT-Kompilierung hat nicht funktioniert. (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
...

Erwartetes / gewünschtes Verhalten
Ich wünschte, es hätte gut funktioniert. Hilf mir.

angular2 & angular2-google-maps version

Winkel2: RC6
angle2-google-maps: "0.14.0",

Andere Informationen

danke fürs lesen

urgent bug

Hilfreichster Kommentar

@basvdijk Sorry Leute, ich schreibe gerade den Build-Prozess um, um AOT unterstützen zu können. Erwarten Sie Updates in den nächsten Tagen.

Alle 31 Kommentare

@DoyeonOhTravelWie können Sie Ihren app.module.ts-Code freigeben? Vielen Dank!

Ich sehe das Gleiche - möglicherweise etwas, das mit einer fehlenden ngc -generierten .metadata.json -Datei zu tun hat. Siehe https://github.com/angular/angular/issues/11262

@SebastianM Eigentlich schlägt das Angular-Team vor, dass Bibliotheksanbieter auch .metadata.json- Dateien

Ihre folgenden Kommentare könnten hilfreich sein:

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

Vollständiges Gespräch (https://github.com/angular/angular/issues/11262)

@SebastianM das ist mein app.module.ts Code. Vielen Dank für Ihre Antwort!.

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 Wie Sie sagen, scheint es, dass metadata.json erforderlich sind. Vielen Dank!.

@SebastianM Und dieser Zweig ist ein Beispielcode für die Verwendung von googleMap.

@DoyeonOhTravelHow @doyeonOh @ naveedahmed1 Danke Jungs! Ich werde es heute Abend überprüfen.

Ich bin mir nicht sicher über den Status dieses Fixes, aber es könnte gleiche Problem auch bei ng2-translate zu überprüfen .

Darin möchte ich einen Blog-Beitrag hervorheben, der beschreibt, wie dies allgemein gelöst werden kann, und einige Links zu Beispiel-Repos von Bibliotheken, die dies lösen

Ich habe den Blog-Beitrag geschrieben, den Sie erwähnt haben. Ich bin froh, dass es dir gefällt. Ich denke, der Fehler, auf den Sie stoßen, hängt nicht direkt mit metadata.json -Dateien zusammen, obwohl Sie diese auch benötigen werden. Ich vermute, dass Sie irgendwo in Ihrem Code export const blah = () => something das in export function blah() { return something; } geändert werden muss.

Ich habe einen weiteren Artikel geschrieben , in dem Lösungen für einige der Fehler beschrieben werden (einschließlich des Fehlers Function calls are not supported ). Ich habe Bibliotheken aktualisiert, um AoT-kompatibel zu sein.

+1 für AoT-Unterstützung
Hatte gestern Probleme, Angular2-Google-Maps in Ionic2 RC0 zu integrieren

Vielen Dank!

@modularcoder Hast du es tatsächlich zum

@lazarljubenovic nur ohne AoT im Build für dev env.

Ich habe die Schritte hier beschrieben
https://forum.ionicframework.com/t/angular2-google-maps-in-ionic-2/65736

Stellen Sie sicher, dass Sie die neueste Version von @ ionic / app-scripts installiert haben, die keine AoT-Kompilierung während der Entwicklererstellung durchführt.
https://github.com/driftyco/ionic-app-scripts

@modularcoder Was tun, wenn Sie die App für Android

@allurco Ja, ich habe es geschafft, die App ohne AoT-Kompilierung zu erstellen, indem ich das Flag "--dev" hinzugefügt habe, um die Aufgabe in package.json zu erstellen.

Ich habe ein Beispiel-Repo erstellt
https://github.com/modularcoder/ionic2-angular2-google-maps-example/blob/master/README.md

Weitere Informationen finden Sie in der Readme-Datei.

PS Stellen Sie sicher, dass Sie die neueste Version des @ ionic / app-scripts-Pakets installiert haben.

@SebastianM Gibt es ein Update, wann dieser Fehler behoben sein könnte? Vielen Dank!

@basvdijk Sorry Leute, ich schreibe gerade den Build-Prozess um, um AOT unterstützen zu können. Erwarten Sie Updates in den nächsten Tagen.

@SebastianM Großartig! Ihre Bemühungen werden sehr geschätzt 👍

Schön zu sehen, dass dies behoben ist! Hast du irgendwelche Gedanken darüber, wann du dieses Update veröffentlichen wirst?

Ist es behoben? Die Verwendung von angle2-google-maps mit AoT löst den Fehler "Fehler beim statischen Auflösen von Symbolwerten aufgetreten. Funktionsaufrufe werden nicht unterstützt. Ersetzen Sie die Funktion oder das Lambda durch einen Verweis auf eine exportierte Funktion, das Auflösen des Symbols" Kann jemand diesbezüglich eine Anleitung geben?

Ich denke, dass der Fehler behoben wurde und das Problem in 0.16 Meilenstein hinzugefügt wurde

@ naveedahmed1 Der Meilenstein für 0.16.0 liegt bei 55%, siehe https://github.com/SebastianM/angular2-google-maps/milestone/12

Vielleicht bin ich es, aber ich habe die Bibliothek aus dem GitHub-Repository installiert und weitere 2 Fehler erhalten:
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,

Irgendwer anders ?

@ tchinou1 Wie bereits erwähnt, liegt der Meilenstein für 0.16.0 mit AoT-Unterstützung bei 55% (siehe https://github.com/SebastianM/angular2-google-maps/milestone/12). Soweit mir bekannt ist, ist dies die neueste veröffentlichte Version AoT noch nicht unterstützen.

@basvdijk Wenn Sie npm install git+https://[email protected]/SebastianM/angular2-google-maps.git ausführen, wird die Version mit den Änderungen nicht installiert?

@staticint das könnte tatsächlich der Fall sein. Vielleicht kann @SebastianM beschreiben, wie Sie die neueste Git-Version mit AoT-Unterstützung installieren können.

Bearbeiten: Entschuldigung, ich liege falsch - die npm-Installation sollte bereits für Sie erstellt werden.

Wenn Sie das Repo direkt mit npm abrufen, erhalten Sie nur die Quelle, nicht die erstellten Assets.

Theoretisch könnten Sie dieses Repo klonen, lokal erstellen und dann mit Ihrem Projekt verknüpfen , aber das ist wahrscheinlich nur für die lokale Entwicklung praktisch. Oder Sie könnten irgendwo einen Tarball des Builds hochladen und diesen mit npm abrufen .

Weiß jemand, wie man es aus dem GitHub-Repository installiert?

Vielen Dank

@ tchinou1 Es ist in den npm-Dokumenten .

Eine Frage. Ich habe gerade den Hauptzweig gegabelt, geklont, gebaut und npm-verknüpft, und bei meinem bestehenden Projekt bekomme ich Uncaught Error: Can't resolve all parameters for LazyMapsAPILoader: (?, WindowRef, DocumentRef). . Ich importiere diese Bibliothek in ein faul geladenes Modul mit dem folgenden Code in imports meines Moduls:

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

Ich habe versucht, ein schwarzes neues Projekt zu erstellen und die Situation nur minimal zu reproduzieren, aber es funktioniert im anderen Repo, sodass ich keine Ahnung habe, wo ich anfangen soll. Es ist, als würde das Objekt, das über die Methode forRoot nicht empfangen.

Hat jemand eine ähnliche Situation oder diese Fehlermeldung? Ich weiß, dass es ein langer Weg ohne Code und ohne reproduzierbaren Fehler ist, aber ich habe keine Ideen mehr.

Wie kann ich meine eckigen Google Maps aktualisieren, damit AOT funktioniert? ist die AOT-Version jetzt verfügbar?

Damit AOT funktioniert, fügen Sie "angular2-google-maps": "^0.16.0", zu Ihrer package.json -Datei hinzu

Importieren Sie dann in Ihre App-Komponente das Modul:

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

und füge es deinen Importen hinzu (ersetze das xxxx durch deinen API-Schlüssel)

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

Jetzt können Sie in Ihrer Vorlage die Komponente wie folgt verwenden:

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

Ich verwende den Meilenstein von 0,17,0 und der folgende Fehler bleibt bestehen.
"Der Name 'google' wurde nicht gefunden.
"Namespace 'google' kann nicht gefunden werden

Dieser Fehler wurde bereits behoben?

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen