Jak skonfigurować angular 4 wewnątrz projektu java war opartego na mavenie
Staję się trochę szalony, ponieważ nie mogę znaleźć poradnika, Jak skonfigurować aplikację angular 4 wewnątrz projektu java war, który zostanie zbudowany z Mavena. To dlatego, że chcę uruchomić go na serwerze wildfly.
Jakaś pomoc?
Thanks
3 answers
Miałem podobny wymóg, aby mieć jeden projekt źródłowy, który ma java web-services project, jak również angular project (projekt oparty na angular-cli) i maven build powinien stworzyć wojnę ze wszystkimi plikami angular. Użyłem Maven-frontend-plugin z kilkoma zmianami konfiguracyjnymi dla base path.
Celem było stworzenie pliku war z całym kodem Javy w nim plus cały skompilowany kod kątowy AOT w głównym folderze wojny, wszystko to za pomocą jednego polecenia mvn clean package
.
Jeszcze jeden aby to wszystko działało, aby uniknąć konfliktu między adresami URL routera angular-app a adresami URL aplikacji java, musisz użyć HashLocationStrategy. w jeden sposób skonfiguruj go w aplikacji.moduł.ts jak poniżej
App.moduł.ts -
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
]
Struktura folderów dla aplikacji Angular jest poniżej -
Angular-project
- dist
- e2e
- node_modules
- public
- src
- Aplikacja
- aktywa
- środowiska
- favicon.ico
- indeks.html
- main.ts
- polyfills.ts
- styl.css
- tsconfig.json
- typowania.d. ts
- etc-etc
- tmp
- .angular-cli.json
- .gitignore
- karma.conf.js
- pakiet.json
- README.md
- tslint.json
- itd - etc
Maven Project-
- src
- główna
- java
- zasoby
- webapp
- WEB-INF
- www.xml
- główna
- angular-project (tutaj umieść swój angular project )
- node_installation
- pom.xml
Dodaj konfigurację Maven-frontend-plugin do pom.xml
<properties>
<angular.project.location>angular-project</angular.project.location>
<angular.project.nodeinstallation>node_installation</angular.project.nodeinstallation>
</properties>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.0</version>
<configuration>
<workingDirectory>${angular.project.location}</workingDirectory>
<installDirectory>${angular.project.nodeinstallation}</installDirectory>
</configuration>
<executions>
<!-- It will install nodejs and npm -->
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v6.10.0</nodeVersion>
<npmVersion>3.10.10</npmVersion>
</configuration>
</execution>
<!-- It will execute command "npm install" inside "/e2e-angular2" directory -->
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<!-- It will execute command "npm build" inside "/e2e-angular2" directory
to clean and create "/dist" directory -->
<execution>
<id>npm build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
</plugin>
<!-- Plugin to copy the content of /angular/dist/ directory to output
directory (ie/ /target/transactionManager-1.0/) -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>2.4.2</version>
<executions>
<execution>
<id>default-copy-resources</id>
<phase>process-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<overwrite>true</overwrite>
<!-- This folder is the folder where your angular files
will be copied to. It must match the resulting war-file name.
So if you have customized the name of war-file for ex. as "app.war"
then below value should be ${project.build.directory}/app/
Value given below is as per default war-file name -->
<outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory>
<resources>
<resource>
<directory>${project.basedir}/${angular.project.location}/dist</directory>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
Jak wyżej plugin wywołuje' npm run build ' wewnętrznie, make pewnie paczka.json powinien mieć polecenie build w skrypcie jak poniżej -
Pakiet.json
"scripts": {
-----//-----,
"build": "ng build --prod",
-----//------
}
Indeks.html powinien być zawsze ładowany, gdy ktoś naciśnie aplikację z przeglądarki, dlatego zrób z niego plik powitalny . Dla web services powiedzmy, że mamy path / rest-services / * wyjaśni to później.
Www.xml -
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet-mapping>
<servlet-name>restservices</servlet-name>
<url-pattern>/restservices/*</url-pattern>
</servlet-mapping>
Powyższa konfiguracja jest wystarczająca, jeśli aplikacja nie ma żadnej ścieżki kontekstowej i jest wdrożona na ścieżce głównej na serwerze. Ale jeśli twój wniosek ma dowolną ścieżkę kontekstową jak http://localhost:8080/myapplication / następnie wprowadź zmiany w indeksie.również plik html -
Angular-project / src / index.html-tutaj dokument.location will be application / (the context path of your app otherwise / if application has no context path)
Celem uczynienia ścieżki kontekstowej ścieżką bazową dla angular-app jest to, że za każdym razem, gdy wywołujesz ajax http z angular, będzie ona poprzedzać ścieżkę bazową do adresu url. na przykład, jeśli próbuję zadzwonić "restservices / persons" wtedy faktycznie będzie wykonywać połączenia do " http://localhost:8080/myapplication/restservices/persons "
Indeks.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>E2E</title>
<script>document.write('<base href="' + document.location + '" />'); </script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
Po wszystkich powyższych zmianach po uruchomieniu {[5] } spowoduje to utworzenie wymaganej wojny. Sprawdź, czy cała zawartość folderu angular 'dist' znajduje się w katalogu root of war.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-08 15:47:56
Mam podobny problem : mam moduł aplikacji internetowej Maven o nazwie Tourism-Services zawierający Usługi internetowe oraz projekt Maven zawierający projekt angular (projekt angular stworzyłem z CLI w folderze src/main/angular5/tourism)
W przeciwieństwie do tego postu i odpowiednio do poniższego linku (jak zintegrować Angular 2 + Java Maven Web Application), który został podany przez Parth Ghiya, myślę, że projekt angular powinien być umieszczony w folderze webapp projektu modułu Turystyka-Usługi. Biorąc to pod uwagę mam kolejne pytania:
Zwykle wszystkie wyniki kompilacji w folderze dist powinny być umieszczone w folderze webapp. Ale w folderze dist nie ma wszystkich zasobów projektu Angular (jako obrazów, css, które powinny być obecne w folderze Angular assets, mam rację ?)
Biorąc pod uwagę zależności kątowe, które są w node_modules, powinniśmy zintegrować je również w webapp teczka ? Jest jedna przeszkoda: najpierw są pliki Maszynopisowe i powinny być również kompilowane do interprecji przez serwer, ale może są kompilowane i dodawane, gdy są importowane w niestandardowych plikach aplikacji ? Jakie jest rozwiązanie ?
-
Czy powinniśmy uwzględnić inny rodzaj zasobów pochodzących z projektu angular w folderze webapp ? (jak w folderze typowania, jak sugerowano w powyższym poście z linkiem)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-12-20 20:28:30
Próbowałem tych instrukcji i innych artykułów. są świetne, ale to trochę niejednoznaczne. Więc ktoś, kto nie rozumie tego od razu .. sprawdź to.
Postępuj zgodnie z poniższymi instrukcjami..
2.otwórz aplikację.moduł.ts (w Twoim projekcie / src / app / app.moduł.ts) Dodaj import i dostawców
import { LocationStrategy, HashLocationStrategy } from '../../node_modules/@angular/common';
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
],
3.open paczka.json (angularproject / package.json) dodaj "build": "ng build --prod" jak poniżej
{
"name": "tdf",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
**"build": "ng build --prod",** //change like this
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
4.Zaktualizuj swój pom.xml - dodaj wtyczkę forntend maven -dodaj ng build directory
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>angular</groupId>
<artifactId>angular7java</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<name>angular7java</name>
<url>http://maven.apache.org</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
**<angular.project.location>tdf</angular.project.location>**
<!--your project name -->
<angular.project.nodeinstallation>node_installation</angular.project.nodeinstallation>
</properties>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.6</version>
<configuration>
<workingDirectory>${angular.project.location}</workingDirectory>
<installDirectory>${angular.project.nodeinstallation}</installDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v9.9.0</nodeVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<!-- Optional configuration which provides for running any npm command -->
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>npm build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
</plugin>
<!-- Plugin to copy the content of /angular/dist/ directory to output
directory (ie/ /target/transactionManager-1.0/) -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>2.4.2</version>
<executions>
<execution>
<id>default-copy-resources</id>
<phase>process-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<overwrite>true</overwrite>
<!-- This folder is the folder where your angular files
will be copied to. It must match the resulting war-file name.
So if you have customized the name of war-file for ex. as "app.war"
then below value should be ${project.build.directory}/app/
Value given below is as per default war-file name -->
<outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory>
<resources>
<resource>
<directory>${project.basedir}/${angular.project.location}/dist</directory>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
<!-- <attachClasses>true</attachClasses>
<webXml>target/web.xml</webXml>
<webResources>
<resource>
<directory>src/main/webapp</directory>
<filtering>true</filtering>
</resource>
</webResources> -->
</configuration>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<fork>true</fork>
<executable>C:\Program Files\Java\jdk1.8.0_181\bin\javac.exe</executable>
<!--make sure above directory is correct (make it same as your local javac.exe-->
</configuration>
</plugin>
</plugins>
</build>
</project>
5. kliknij prawym przyciskiem myszy swój projekt maven Maven-Maven install lub terminal: mvn clean install
I poczekaj, aż się zatrzyma. po zainstalowaniu można zobaczyć node-folder instalacyjny i plik war są tworzone
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-02-11 12:38:38