Winkel-CLI erstellen mit dem base-href-und deploy-url-Zugriff auf assets auf CDN

Hintergrund

Ich bin mit Winkel-CLI, um ein Projekt erstellen (mit verschiedenen apps). Ich möchte zum veröffentlichen von apps, die auf separaten sub-Pfade an meine domain, wie example.com/apps/app1/.

Wenn ich die --base-href parameter /apps/app1/ es löst alle Fragen bezüglich des Routers, und es wird das laden der assets (js, css und Bilder etc) einfach nur gut.

Nutzen, wenn ich die Location service, den ich verwenden kann,

this.location.prepareExternalUrl('/assets/data/data.json')

beheben dynamisch belasteten Vermögenswerte (Sie wird aufgelöst /apps/app1/assets/data/data.json).

So weit So gut. Aber ich will jetzt dienen die app-assets über ein CDN wie cdn.example.com, während hosting der app selbst auf die original-url example.com/apps/app1/. So, jetzt Baue ich die app mit:

 ng build -prod --app app1 --base-href "/apps/app1/" --deploy-url "http://cdn.example.com/app-assets/apps/app1/"

Dieser Zeit habe ich sowohl die --base-href und --deploy-url Parameter. Es funktioniert großartig, weil es verwendet die base-href zu helfen, die Router lösen, die URL und lädt die js und css Dateien aus dem CDN. Es behebt auch die Bild-url-Referenzen in den CSS-Dateien über das CDN-url.

Das problem

Beim laden von Bildern oder Daten aus dem Ordner "assets" dynamisch (in einem service-oder template), ich kann nicht finden, eine gute Möglichkeit, es zu beheben, die URLs mit der deploy-url Konfiguration.

Nutzen, wenn ich die Location service, es verwendet immer noch die base-href zum auflösen von urls, so

this.location.prepareExternalUrl('/assets/data/data.json')

wird noch beheben zu /apps/app1/assets/data/data.json statt http://cdn.example.com/app-assets/apps/app1/assets/data/data.json.

Hätte ich erwartet, dass die deploy-url Wert, wenn man definiert ist, vor allem, da, dass wäre eine Allgemeine Lösung, die funktionieren würde, wenn das hosting der Dateien auf der gleichen Domäne und beim hosting der Dateien auf eine externe Domäne.

Die Frage

Gibt es eine Möglichkeit zur Behebung des asset-URLs mit der Berücksichtigung der base-href und die deploy-url Parameter?

Idealerweise eine offizielle Winkel-Funktion wie Location.prepareExternalUrl, aber wenn ich die base-href-und deploy-url-Parameter von Winkel, in gewisser Weise konnte ich meine eigenen bauen service für Sie.

Ich würde nicht wollen, definieren Sie die URLs, die in der Umwelt config seit:

Es würde erfordern, dass bestimmte Umwelt-configs per app
Es schafft einen potenziellen Konflikt mit den Werten, die bereitgestellt wird, wenn Aufbau der app.

Ich werde versuchen, entfernen oder komplett base-tag oder Ersetzen < base href="/" > mit < script >Dokument.write('<base href="' + document.location + '" />');< /script >
der base-href ist nötig, um die router arbeiten in einen Unterordner, und es sieht nicht wie es stört hier. Es ist vielmehr der offensichtliche Mangel an Zugang zu den deploy-url-Wert, der die Mühe. Nach einem Blick auf die Quelle der Location.prepareExternalUrl - Funktion, ist es klar, dass es nur so aussieht an der base-href. Entfernen Sie den base-tag wird mir nicht helfen, fürchte ich...
Und ersetzen mit dem script? Ich denke, man muss zu nutzen hashtag-Strategien
Hash-Strategien nicht helfen, da alles funktioniert, außer immer ein zuverlässiger Weg, um die externen Quellen, die beim laden in Vorlagen oder Dienstleistungen. Die js und css Dateien in die index.html Datei verwiesen wird, richtig (und ich bin derzeit mit einem hässlichen hack Auslesen der url von diesen script-tags).
hast u jemals herausfinden, was zu tun ist?
Soweit ich das gerafft habe, ist es derzeit nicht unterstützt. Als temporären workaround, ich bin auf der Suche nach der main.bundle.js script-tag in das Dokument ein und extrahieren der Weg von dort. Ich werde ersetzen Sie den code in einem Augenblick, sobald wir einen angemessenen Umgang mit diesem.
haben Sie versucht https://angular.io/api/common/APP_BASE_HREF
wenn ich verstehe deine Frage richtig, können Sie nicht verwenden window.location.origin + /app-asset + this.location.prepareExternalUrl('/assets/data/data.json') ?
Die Frage betrifft den Fall, wenn das deploy-url auf eine externe domain, also einen anderen Ursprung als den Ort der Herkunft. In meinem Fall, die Website gehostet wird und verteilt Sie über ein CDN, während die index.html Seite Proxy über einen server auf eine andere url. Um die Vorteile der Eigenschaften des CDN, will ich nicht, die proxy-alle Vermögenswerte, sondern vielmehr Verweis auf die assets ist direkt aus dem CDN.

InformationsquelleAutor david.emilsson | 2017-12-19

angular angular-cli

2

Zugang --deploy-url Wert auf die Anwendung Laufzeit erstellen deploy-url.ts mit:
```
export const DEPLOY_URL = new InjectionToken<string>('deployUrl');
```
Und verwenden Sie dieses snippet in Eure main.ts-Datei:
```
const deployUrl = (function() {
  const scripts = document.getElementsByTagName('script');
  const index = scripts.length - 1;
  const mainScript = scripts[index];
  return mainScript.src.replace(/main.*?\.js$/, '');
})();

const DEPLOY_URL_PROVIDER = {
  provide: DEPLOY_URL,
  useValue: deployUrl,
};

platformBrowserDynamic([DEPLOY_URL_PROVIDER])
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));
```
Die Idee ist to get die url der aktuell ausgeführten Javascript-Datei, die main.js (oder main.hash.js wenn outputHashing aktiviert ist) und Streifen mit dem Namen von ihm. Dann in Ihre Dienste zu injizieren --deploy-url Wert mit @Inject(DEPLOY_URL) deployUrl: string als Konstruktor-parameter.
- Dirty, aber funktioniert, dieses Problem ist bekannt und verfolgt in github.com/angular/angular-cli/issues/6666
InformationsquelleAutor Marcin Majkowski
0

Lief ich in diese genau die gleiche situation, und wie Sie in der beschriebenen Hintergrund, Gebäude mit den beiden base-href und deploy-url - set arbeiten, dass wir in der Lage zu dienen bis unsere css-und js-Dateien von einem CDN, während hosting der Anwendung auf einem anderen server.

Als eine Lösung, die dynamisch geladen werden Vermögenswerte, die in unseren Vorlagen, schrieb uns eine API liefert, dass die Umgebungsvariablen für diese Zwecke liefert die entsprechenden URLs benötigt werden pro Einsatz.

InformationsquelleAutor DevMike
-1

Ist hier, wie ich getan habe für einige Projekte.

Legen Sie die APP_BASE_HREF mit einem dynamischen Wert von server E. g.
Cookie-und SPA-liest es auf init. getBaseUrl Funktion einfach Lesen
cookie-Wert.
```
{ provide: APP_BASE_HREF, useFactory: () => getBaseUrl() }
```
Legen Sie die deployUrl als Teil der CI-Prozess. Sie müssen die BUILD-VERSION und dynamisch. Diese kann getan werden, indem mit einem einfachen shell-Skript.
```
https://my-cloud.cloudfront.net/my-app/{BUILD}/{VERSION}/
```
InformationsquelleAutor fernando

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.