Angolare 2/4/5 – Imposta la base href in modo dinamico

Abbiamo un’applicazione aziendale che utilizza Angular 2 per il client. Ciascuno dei nostri clienti ha il proprio URL univoco, ad esempio: https://our.app.com/customer-one e https://our.app.com/customer-two . Attualmente siamo in grado di impostare modo dinamico usando document.location . Quindi l’utente fa clic su https://our.app.com/customer-two e viene impostato su /customer-two … perfetto!

Il problema è se l’utente è ad esempio su https://our.app.com/customer-two/another-page e aggiorna la pagina o prova a premere direttamente su quell’URL, il viene impostato a /customer-two/another-page e le risorse non possono essere trovate.

Abbiamo provato il seguente senza alcun risultato:

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

Sfortunatamente siamo freschi di idee. Qualsiasi aiuto sarebbe fantastico.

La risposta contrassegnata qui non ha risolto il mio problema, possibilmente diverse versioni angolari. Sono stato in grado di ottenere il risultato desiderato con il seguente comando angular cli in terminal / shell:

ng build --base-href /myUrl/

ng build --bh /myUrl/ o ng build --prod --bh /myUrl/

Ciò cambia in nella versione costruita che era perfetta per il nostro cambiamento di ambiente tra sviluppo e produzione. La parte migliore non era che la base di codice richiedesse di cambiare usando questo metodo.


Per riassumere, lascia il tuo index.html base href come: quindi esegui ng build --bh ./ con ng build --bh ./ cli per renderlo un percorso relativo, o sostituisci il file ./ con qualunque cosa tu richieda.

La documentazione ufficiale angular-cli relativa all’uso.

Ecco cosa abbiamo finito per fare.

Aggiungi questo a index.html. Dovrebbe essere la prima cosa nella sezione

   

Quindi, nel file app.module.ts , aggiungi { provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' } { provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' } all’elenco dei provider, in questo modo:

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

In base alla risposta (@sharpmachine), sono stato in grado di ridefinirlo ulteriormente, in modo da non dover eseguire una funzione in 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 { } 

E, ./shared/common-functions.util.ts contiene:

 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; } 

Uso la directory di lavoro corrente ./ quando ./ diverse app dallo stesso dominio:

  

Una nota a .htaccess , io uso .htaccess per aiutare con il mio routing sulla ricarica della pagina:

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

Semplificazione della risposta esistente con @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 { } 

Non devi specificare un tag base nel tuo index.html, se stai fornendo il valore per il token opaco APP_BASE_HREF.

In angular4, puoi anche configurare baseHref nelle app .angular-cli.json.

in .angular-cli.json

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

questo aggiornerà base href in index.html a MY_APP_BASE_HREF_1

 ng build --app myapp1 

Questo funziona bene per me in ambiente di produzione

   

Se si utilizza la CLI 6 di Angular, è ansible utilizzare le opzioni deployUrl / baseHref in angular.json (progetti> xxx> architetto> build> configurazioni> produzione). In questo modo, puoi facilmente specificare baseUrl per progetto.

Verifica che le tue impostazioni siano corrette osservando index.html dell’app sviluppata.