Deployment Angular: Unterschied zwischen den Versionen

Aus Tutorials
Zur Navigation springen Zur Suche springen
Zeile 18: Zeile 18:
== base-href ==
== base-href ==


{{note|TODO Description}}
Da sich durch das Integrieren des Angular-Front-End in der WAR-Datei der Pfad ändert (z.B. 'http://10.0.0.100:8080/video-archive/archive-client') muss auch der Basispfad in Angular geändert werden.


Im <code><head></code>-Abschnitt vom ''index.html'' <code><base href="/"></code> folgendermaßen anpassen:
 
Dazu im <code><head></code>-Abschnitt vom ''index.html'' <code><base href="/"></code> folgendermaßen anpassen:


<pre>
<pre>
Zeile 31: Zeile 32:
   window['base-href'] = window.location.pathname;
   window['base-href'] = window.location.pathname;
</script>
</script>
</pre>
Und in Basis-Modul (z.B. 'app.module.ts') gehört ''APP_BASE_HREF'' angepasst:
<pre>
import { APP_BASE_HREF } from '@angular/common';
...
@NgModule({
...
  providers: [
    { provide: APP_BASE_HREF, useValue: window['base-href'] }
  ]
})
...
</pre>
</pre>



Version vom 12. Mai 2019, 14:47 Uhr

Noch in Bearbeitung


Als Multimodule Maven Project

Siehe dazu Multimodule Maven Project

Links

https://www.devglan.com/spring-boot/spring-boot-angular-deployment

webpack

Aktuell nicht verwendet

webpack

base-href

Da sich durch das Integrieren des Angular-Front-End in der WAR-Datei der Pfad ändert (z.B. 'http://10.0.0.100:8080/video-archive/archive-client') muss auch der Basispfad in Angular geändert werden.


Dazu im <head>-Abschnitt vom index.html <base href="/"> folgendermaßen anpassen:

<script>
  if (window.location.port == 4200) {
    document.write('<base href="/">');
  } else {
    document.write('<base href="/video-archive/archive-client/">');
  }
  window['base-href'] = window.location.pathname;
</script>

Und in Basis-Modul (z.B. 'app.module.ts') gehört APP_BASE_HREF angepasst:

import { APP_BASE_HREF } from '@angular/common';
...
@NgModule({
...
  providers: [
    { provide: APP_BASE_HREF, useValue: window['base-href'] }
  ]
})
...

Links

https://medium.com/@anandshende1994/setting-base-href-dynamically-in-angular-6-b7fe824848cf


Zurück zu Angular