Angular2, wie Sie festlegen, app-root-Pfad unabhängig vom html-Basis-url

Baue ich ein angular2 Anwendung/widget, das eingebettet wird in TYPO3 als plugin eingefügt werden kann, die auf einer content-Seite. Das bedeutet, dass es könnte am Ende auf verschiedenen root-Pfade, z.B.:

/page1/app
/page/subpage/subpage/whatever

Dem globalen Basis-url (base-href=..) ist bereits von TYPO3 und können nicht geändert werden. Wie kann ich einen Winkel, eine Art von Wurzel, Präfix, so dass es aufbauen kann seine Routen richtig?

Bin ich mit dem neuen router wie hier beschrieben: https://angular.io/docs/ts/latest/guide/router.html

InformationsquelleAutor jdachtera | 2016-10-12

  1. 13

    Tatsächlich gibt es eine Lösung in den Winkel-docs, aber es ist ziemlich schwer zu finden. Es ist möglich, die Basis-url in eckigen ohne die Verwendung eines <base> tag.

    So müssen Sie nur noch die Basis-url zu einer globalen JavaScript-Variablen, die mit Flüssigkeit und dann geben Sie es zu eckig in die app-Modul.

    Fluid:

    <script>
   var app_base_url = '<f:uri.page pageUid="{currentPageUid}" />';
</script>

    Winkel:

    declare var app_base_url;

import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';
@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue:app_base_url}]
})
class AppModule {}

    https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html

    Vielen Dank für dieses posting Antworten
    Auch ist es cloud besser geeignet ist, zu verwenden Schlüssel --base-href beim bauen, Beispiel: ng build --base-href=/myapp

    InformationsquelleAutor jdachtera

  2. 1

    Der Grund dafür ist, dass Ihre web-server ist der Umgang mit der URL schon und so ist es nicht delegiert, die Angular2 routing. Um dies zu überwinden, haben Sie, um eine andere LocationStrategy im Winkel.

    Was du suchst heißt HashLocationStrategy Routen erstellen, wie /page1/app/#/angular-controller/ wo /page1/app/ serviert wird von dem web-server und /angular-controller/ ist das erste argument für Ihre Angular2 Anwendungslogik.

    Passen Sie Ihre Modul-Deklaration (z.B. app.module.ts)

    import {Component, NgModule} from '@angular/core';
import {
  LocationStrategy,
  HashLocationStrategy
} from '@angular/common';
@NgModule({
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})
class AppModule {}

    Weitere details finden Sie im Angular2 Dokumentation über, (das Beispiel stammt auch von dort).

    Die Beispiele basieren auf Angular 2.0, wenn man noch einige RC-Ebene, sollten Sie die Aktualisierung auf Letzte ersten. Viel geändert zwischen RC4 und Finale zum Beispiel.
    Vielen Dank für deine Antwort, aber ich möchte wirklich, um die "echten" urls. Eigentlich habe ich eine Lösung gefunden, die funktioniert mit der Standard-Strategie und werde es hier posten.

    InformationsquelleAutor Oliver Hader

  3. 1

    Ich würde Ratschläge nicht zu verwenden, die baseURL config-Attribut. Es ist ein bisschen veraltet und führt zu einige Probleme, wie deins.

    Können Sie festlegen,

    config.absRefPrefix = /

    Alle links werden vorangestellt, mit /jetzt und wird auch funktionieren.

    Seit TYPO3 7.6 es ist möglich config.absRefPrefix = auto die Konfiguration der entsprechende Pfad automatisch. Aber dies allein löst das problem nicht, mit Angular2 routing.
    Danke, aber ich glaube nicht, dass würde mein problem lösen. Auch diese TYPO3-installation ist schon ziemlich alt und ich kann es nicht ändern, dieses setup.

    InformationsquelleAutor Dimitri L.

  4. 1

    In den aktuellen Versionen von angular ich erhalte eine Fehlermeldung über die variable, so dass ich mit einem data-Attribut statt 

    <body data-base-url="whatever/"> ...

    Winkel:

    import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';
@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue:documnent.body.dataset.baseUrl}]
})
class AppModule {}

    InformationsquelleAutor Simsteve7

  5. 0

    Blick auf APP_BASE_HREF in diesem Fall, im Grunde in Angular2 und oben, können Sie überschreiben die Anbieter, wie diesem, dies ist im Beispiel in Eckige.io zeigt dieser Fall: 

    import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';
@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
})
class AppModule {}

    So, in diesem Fall die APP_BASE_HREF wird ersetzt durch /my/app, so dass Sie es tun können für jedes Modul separat...Diese gelten nur innerhalb von Eckigen Anwendung...

    Für mehr info, Suche auf diesen Seiten auf die Winkel-doc:

    https://angular.io/docs/ts/latest/api/common/index/PathLocationStrategy-class.html

    https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html

    InformationsquelleAutor Alireza

Schreibe einen Kommentar