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
@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.
Vielleicht das useFactory-Lambda in https://github.com/SebastianM/angular2-google-maps/blob/master/src/core/services/maps-api-loader/lazy-maps-api-loader.ts#L188
+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?
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.