Deployment Angular: Unterschied zwischen den Versionen

Aus Tutorials
Zur Navigation springen Zur Suche springen
Zeile 83: Zeile 83:


[https://medium.com/@anandshende1994/setting-base-href-dynamically-in-angular-6-b7fe824848cf https://medium.com/@anandshende1994/setting-base-href-dynamically-in-angular-6-b7fe824848cf]
[https://medium.com/@anandshende1994/setting-base-href-dynamically-in-angular-6-b7fe824848cf https://medium.com/@anandshende1994/setting-base-href-dynamically-in-angular-6-b7fe824848cf]
== Reloading ==
<pre>
<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>
</pre>
=== Links ===
[https://stackoverflow.com/questions/47366792/404-error-on-refresh-for-angularv4-deployed-on-tomcat-server https://stackoverflow.com/questions/47366792/404-error-on-refresh-for-angularv4-deployed-on-tomcat-server]


== Apache HTTP ==
== Apache HTTP ==

Version vom 26. Mai 2019, 15:16 Uhr

Noch in Bearbeitung


Als Multimodule Maven Project

Siehe dazu Multimodule Maven Project

Links

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

Als Maven Dependency

<plugin>
  <!-- copy the latest angularJS client from the repository into the war file -->
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-dependency-plugin</artifactId>
  <executions>
    <execution>
      <id>unpack-web-client</id>
      <phase>process-resources</phase>
      <goals>
        <goal>unpack</goal>
      </goals>
  
      <configuration>
        <artifactItems>
          <artifactItem>
            <groupId>at.or.kirner.archive</groupId>
            <artifactId>angular-client</artifactId>
            <version>${ui.version}</version>
            <type>zip</type>
            <overWrite>true</overWrite>
            <outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}</outputDirectory>
          </artifactItem>
        </artifactItems>
      </configuration>
    </execution>
  </executions>
</plugin> 

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 im 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

Reloading

<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>

Links

https://stackoverflow.com/questions/47366792/404-error-on-refresh-for-angularv4-deployed-on-tomcat-server

Apache HTTP

<VirtualHost *:80>
        ServerName video.kirner.or.at

        RewriteEngine On

#               # If an existing asset or directory is requested go to it as it is
#               RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
#               RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
#               RewriteRule ^ - [L]
#
#               # If the requested resource doesn't exist, use index.html
#       RewriteRule ^ /index.html

        RewriteOptions          InheritDownBefore

        RewriteRule             ^/(.*)$   %{REQUEST_SCHEME}://10.2.0.99:8080/video-archive/archive-client/$1 [L]


        ErrorLog ${APACHE_LOG_DIR}/video.kirner.or.at-error.log
        CustomLog ${APACHE_LOG_DIR}/video.kirner.or.at-access.log combined
</VirtualHost>
<VirtualHost *:80>
	ServerName video.kirner.or.at

	RewriteEngine On


	RewriteOptions          InheritDownBefore

	RewriteCond		%{HTTP_HOST}	!^video.kirner.or.at
	RewriteRule             ^/(.*)$   %{REQUEST_SCHEME}://10.2.0.99:8080/video-archive/archive-client/$1 [L]



	# If an existing asset or directory is requested go to it as it is
	RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-f
	RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-d
	RewriteRule ^ %{REQUEST_SCHEME}://10.2.0.99:8080/video-archive/archive-client/ [L]

	# If the requested resource doesn't exist, use index.html
#	RewriteRule ^ /index.html [L]






	ErrorLog ${APACHE_LOG_DIR}/video.kirner.or.at-error.log
	CustomLog ${APACHE_LOG_DIR}/video.kirner.or.at-access.log combined
</VirtualHost>
<VirtualHost *:80>
        ServerName video.kirner.or.at

        RewriteEngine On

        RewriteOptions          InheritDownBefore

        RewriteRule             "/(.*)$"   "%{REQUEST_SCHEME}://10.2.0.99:8080/video-archive/archive-client/$1" [P]

        ErrorLog ${APACHE_LOG_DIR}/video.kirner.or.at-error.log
        CustomLog ${APACHE_LOG_DIR}/video.kirner.or.at-access.log combined
</VirtualHost>

https://httpd.apache.org/docs/trunk/rewrite/flags.html#flag_p

Workarounds

https://stackoverflow.com/questions/47366792/404-error-on-refresh-for-angularv4-deployed-on-tomcat-server

Links

https://angular.io/guide/deployment

https://www.netnea.com/cms/apache-tutorial-9-reverse-proxy-einrichten/

https://httpd.apache.org/docs/trunk/rewrite/


Zurück zu Angular