2017-12-18 3 views
0

Ich brauche das nächste Skript meine Winkel Appangular5 Last externes Skript mit params

<script src="https://maps.googleapis.com/maps/api/js?key={{google_key}}&libraries=places&language=DE_de"></script> 

zu laden, wie ich weiß, dass ich globale js setzen können .angular-cli.json (funktioniert nicht für externe Skripte) oder index.html, aber wie kann ich params (google_key) hinzufügen?

+0

ändert sich Ihr Google Key während der gesamten Lebensdauer Ihrer App? Ich denke, Params sind gut für dynamische Inhalte, Dinge, die sich oft ändern oder unbekannt sind, bevor der Benutzer das Frontend rendert. Im Fall eines Google API-Schlüssels würde ich vorschlagen, dass es besser ist, einen solchen Schlüssel während des Build-Prozesses anstelle der Laufzeit zu ersetzen (z. B. in index.html platzieren und den Schlüssel vor dem Erstellen der App durch a ersetzen Skript) –

+0

@BenediktSchmidt es ist nicht dynamisch - richtig. Schlägst du etwas wie Schluck-/Grunzel-Lösung vor? –

+1

bauen Sie durch angular-cli? Ich mache gerade etwas Ähnliches und ich führe ein Skript nach angular-cli build, das meine 'index.html' aktualisiert. Ich kombiniere den Aufruf in einem npm-Job, es könnte etwa so aussehen: 'ng build && node _yourHtmlUpdateFile_' –

Antwort

1

Eine schnellere Lösung für ein dynamisches Skript in index.html ist es von Kenn und das src-Attribute von app.component.ts Einstellung:

googleApi = `https://maps.googleapis.com/maps/api/js?key= 
${environment.google_key}&libraries=places&language=DE_de` 

constructor(@Inject(DOCUMENT) private document: any) {} 

ngOnInit() { 
    this.document.getElementById('theId').setAttribute('src', this.googleApi) 
} 

Aber, wie in den Kommentaren vorgeschlagen, in diesem Fall es ist wahrscheinlich eine bessere Lösung, um es als Teil des Build-Prozesses zu haben.

+0

danke, es würde auch funktionieren, aber ich denke, es sollte eine Lösung aus der Box ohne Hacks sein –