Angular 2+ - Définir dynamiquement la balise de base <base>

Question

Nous avons une application d'entreprise qui utilise Angular 2 pour le client. Chacun de nos clients a leur propre URL unique, par exemple : https://our.app.com/customer-one et https://our.app.com/customer-two. Actuellement, nous sommes en mesure de définir dynamiquement le en utilisant document.location. Donc, l'utilisateur accède à https://our.app.com/customer-two et est défini sur /customer-two...parfait !

Le problème survient lorsque l'utilisateur est par exemple sur https://our.app.com/customer-two/another-page et qu'il actualise la page ou essaie d'accéder directement à cette URL, le est défini sur /customer-two/another-page et les ressources ne peuvent pas être trouvées.

Nous avons essayé ce qui suit sans succès :

    var base = document.location.pathname.split('/')[1];
    document.write('<base href="http://stackoverflow.com/' + base + '" />');

...

Malheureusement, nous sommes à court d'idées. Toute aide serait incroyable.

Answer 1

La réponse marquée ici n'a pas résolu mon problème, peut-être en raison de différentes versions d'angular. J'ai pu obtenir le résultat souhaité avec la commande angular cli suivante dans le terminal / shell :

ng build --base-href /myUrl/

ng build --bh /myUrl/ ou ng build --prod --bh /myUrl/

Cela modifie le en dans la version construite uniquement ce qui était parfait pour notre changement d'environnement entre le développement et la production. Le meilleur était qu'aucune base de code ne nécessite de modification en utilisant cette méthode.

---

Pour résumer, laissez le href de base de votre index.html tel que : puis exécutez ng build --bh ./ avec angular cli pour en faire un chemin relatif, ou remplacez le ./ par ce que vous voulez.

---

Mise à jour :

Comme l'exemple ci-dessus montre comment le faire à partir de la ligne de commande, voici comment l'ajouter à votre fichier de configuration angular.json

Ceci sera utilisé pour tous les ng serving pour le développement local

"architecte": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "baseHref": "/testurl/",

Ceci est la configuration spécifique pour les constructions de configuration telles que prod :

"configurations": {
   "Prod": {
     "fileReplacements": [
        {
          "remplacer": src/environments/environment.ts",
          "avec": src/environments/environment.prod.ts"
        }
      ],
      "baseHref": "./productionurl/",

La documentation officielle de angular-cli faisant référence à l'utilisation.

Answer 2

Voici ce que nous avons finalement fait.

Ajoutez ceci à index.html. Cela devrait être la première chose dans la section

  (function() {
    window['_app_base'] = '/' + window.location.pathname.split('/')[1];
  })();

Ensuite, dans le fichier app.module.ts, ajoutez { provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' } à la liste des fournisseurs, comme ceci :

import { NgModule, enableProdMode, provide } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, Location } from '@angular/common';

import { AppComponent, routing, appRoutingProviders, environment } from './';

if (environment.production) {
  enableProdMode();
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpModule,
    routing],
  bootstrap: [AppComponent],
  providers: [
    appRoutingProviders,
    { provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' },
  ]
})
export class AppModule { }

Answer 3

Sur la base de votre réponse (@sharpmachine), j'ai pu le refactoriser un peu plus, de sorte que nous n'ayons pas à pirater une fonction dans index.html.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, Location } from '@angular/common';

import { AppComponent } from './';
import { getBaseLocation } from './shared/common-functions.util';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpModule,
  ],
  bootstrap: [AppComponent],
  providers: [
    appRoutingProviders,
    {
        provide: APP_BASE_HREF,
        useFactory: getBaseLocation
    },
  ]
})
export class AppModule { }

Et, ./shared/common-functions.util.ts contient:

export function getBaseLocation() {
    let paths: string[] = location.pathname.split('/').splice(1, 1);
    let basePath: string = (paths && paths[0]) || 'my-account'; // Default: my-account
    return '/' + basePath;
}

Answer 4

J'utilise le répertoire de travail actuel ./ lors de la construction de plusieurs applications sur le même domaine :

À noter, j'utilise .htaccess pour faciliter le routage lors du rechargement de la page :

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* index.html [L]

Answer 5

Simplification de la réponse existante par @sharpmachine.

import { APP_BASE_HREF } from '@angular/common';
import { NgModule } from '@angular/core';

@NgModule({
    providers: [
        {
            provide: APP_BASE_HREF,
            useValue: '/' + (window.location.pathname.split('/')[1] || '')
        }
    ]
})

export class AppModule { }

Vous n'avez pas à spécifier une balise de base dans votre index.html, si vous fournissez une valeur pour le jeton opaque APP_BASE_HREF.