Angular 2/4/5 – Fixe dynamicment la base href

Nous avons une application d’entreprise qui utilise Angular 2 pour le client. Chacun de nos clients possède sa propre https://our.app.com/customer-one URL, à savoir: https://our.app.com/customer-one et https://our.app.com/customer-two . Actuellement, nous sums en mesure de définir dynamicment la utilisant document.location . Donc, l’utilisateur frappe https://our.app.com/customer-two et est réglé sur /customer-two … parfait!

Le problème est que si l’utilisateur est par exemple à 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. vers /customer-two/another-page et les ressources ne peuvent pas être trouvées.

Nous avons essayé les suivants en vain:

     var base = document.location.pathname.split('/')[1]; document.write('');  ... 

Malheureusement, nous sums sortis des idées. Toute aide serait incroyable.

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

ng build --base-href /myUrl/

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

Cela change le en dans la version construite uniquement, ce qui était parfait pour notre changement d’environnement entre le développement et la production. La meilleure partie sans base de code nécessite de changer en utilisant cette méthode.


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

La documentation officielle angular-cli référant à l’utilisation.

Voici ce que nous avons fini par faire.

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

   

Puis, dans le fichier app.module.ts , ajoutez { provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' } { 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 { } 

Sur la base de votre réponse (@sharpmachine), j’ai été en mesure de le réorganiser un peu plus, afin de ne pas avoir à 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: ssortingng[] = location.pathname.split('/').splice(1, 1); let basePath: ssortingng = (paths && paths[0]) || 'my-account'; // Default: my-account return '/' + basePath; } 

J’utilise le répertoire de travail actuel ./ lors de la création de plusieurs applications du même domaine:

  

Sur une note parallèle, j’utilise .htaccess pour aider à mon routage lors du rechargement de la page:

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

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 besoin de spécifier une balise de base dans votre index.html, si vous fournissez une valeur pour le jeton opaque APP_BASE_HREF.

Dans angular4, vous pouvez également configurer la baseHref dans les applications .angular-cli.json.

dans .angular-cli.json

 { .... "apps": [ { "name": "myapp1" "baseHref" : "MY_APP_BASE_HREF_1" }, { "name": "myapp2" "baseHref" : "MY_APP_BASE_HREF_2" }, ], } 

Cela mettra à jour la base href dans index.html à MY_APP_BASE_HREF_1

 ng build --app myapp1 

Ce travail est parfait pour moi dans l’environnement de production

   

Si vous utilisez Angular CLI 6, vous pouvez utiliser les options deployUrl / baseHref dans angular.json (projects> xxx> architect> build> configurations> production). De cette façon, vous pouvez facilement spécifier la baseUrl par projet.

Vérifiez que vos parameters sont corrects en consultant le fichier index.html de l’application intégrée.