web-dev-qa-db-fra.com

Angular2 comment définir le chemin racine de l'application indépendamment de l'URL de base html

Je construis une application/widget angular2 qui sera intégré à TYPO3 en tant que plug-in pouvant être inséré dans n'importe quelle page de contenu. Cela signifie qu’il pourrait aboutir à différents chemins racine, par exemple:

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

L'URL de base globale (base href = ..) est déjà définie par TYPO3 et ne peut pas être modifiée. Comment puis-je donner à angular une sorte de préfixe de racine afin qu’il puisse construire correctement ses routes?

J'utilise le nouveau routeur comme indiqué ici: https://angular.io/docs/ts/latest/guide/router.html

angulartypo3angular2-router3
7
jdachtera

En fait, il existe une solution dans la documentation angulaire mais c'est assez difficile à trouver. Il est possible de définir l'URL de base en angulaire sans utiliser une balise <base>.
Il vous suffit donc de définir l'URL de base sur une variable JavaScript globale à l'aide de fluid, puis de l'indiquer sous forme angulaire dans le module d'application.

Fluide:

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

Angulaire:

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

13
jdachtera

Dans les dernières versions de angular, une erreur concernant la variable est générée. J'utilise donc un attribut data 

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

Angulaire:

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 {}
1
Simsteve7

Je conseillerais de ne pas utiliser l'attribut baseURL config. Il est un peu désuet et pose certains problèmes, comme le vôtre.

Vous pouvez définir

config.absRefPrefix = /

Tous les liens seront précédés de/maintenant et fonctionneront également.

1
Dimitri L.

La raison en est que votre serveur Web gère déjà l'URL et qu'il n'est donc pas délégué au routage Angular2. Pour résoudre ce problème, vous devez utiliser une variable LocationStrategy différente dans Angular.

Ce que vous recherchez s'appelle HashLocationStrategy pour créer des itinéraires tels que /page1/app/#/angular-controller/, où /page1/app/ est fourni par le serveur Web et /angular-controller/ est le premier argument de votre logique d'application Angular2.

Ajustez votre déclaration de module (par exemple, app.module.ts)

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

Vous trouverez plus de détails dans la documentation Angular2 à ce sujet (l’exemple en a été tiré également).

1
Oliver Hader

Regardez APP_BASE_HREF dans ce cas. Essentiellement dans Angular2 et les versions ultérieures, vous pouvez remplacer le fournisseur de la manière suivante. Voici l'exemple de Angular.io: 

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

Donc, dans ce cas, APP_BASE_HREF sera remplacé par/my/app, de sorte que vous pouvez le faire pour chaque module séparément ... Ceci s'applique uniquement dans l'application Angular ...

Pour plus d'informations, consultez ces pages sur la documentation angulaire:

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

0
Alireza