jak zintegrować aplikację internetową Angular 2 + Java Maven


Stworzyłem aplikację front-end Angular 2 i jedną aplikację Java Rest WS Back-end, która jest połączona z DB.
Moja struktura folderów dla aplikacji Angular 2 jest podana poniżej- 
Angular2App

 confg

 dist

 e2e

 node_modules

 public

 src

 app

 favicon.ico

 index.html

 main.ts

 system-config.ts

 tsconfig.json

 typings.d.ts

 tmp

 typings

 .editorconfig

 .gitignore

 angular-cli.json

 angular-cli-build.js

 package.json

 README.md

 tslint.json

 typings.json

Struktura mojej aplikacji internetowej Java Maven jest podana poniżej: 
JerseyWebApp

 src

 main

 java

 Custom Package

 java classes

 resources

 webapp

 WEB-INF

 web.xml

 index.html

 pom.xml

Chcę wiedzieć, jak zintegrować te dwie aplikacje w jedną aplikację, która będzie generować tylko jeden plik wojenny.
2021-03-02 Dodaj komentarz
Udostępnij to

Nie znaleziono powiązanych wyników

    Zaproszony:
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    Oto co zrobiłem: -
    • Instalowanie Nodejs v6.9 +
    • Biegać npm install @ angular/cli –g dla Angular CLI
    • Zainstaluj Apache Maven lub użyj dowolnego środowiska IDE przyjaznego dla Maven
    • Użyj swojej konfiguracji wymaganej przez Maven, jestem prostą aplikacją internetową (WAR).


    Struktura katalogów

    (za

    wyjątek

    Pozostałe foldery ngapp mają standardową strukturę Maven.) 
    ngfirst
    
├── pom.xml
    
├── src
    
│   └── main
    
│   ├── java
    
│   ├── resources
    
│   ├── webapp
    
│   └── ngapp


    Część kątowa

    Odkryć


    ngapp w terminalu i wprowadź polecenie

    ng init

    dla inicjalizacji węzła i konfiguracji npm, wynikiem będzie prosta przykładowa aplikacja Angular2 z następującą strukturą katalogów wewnątrz folderu ngapp: - 
    ├── angular-cli.json
    
 ├── e2e
    
 ├── karma.conf.js
    
 ├── node_modules
    
 ├── package.json
    
 ├── protractor.conf.js
    
 ├── README.md
    
 ├── tslint.json
    
 ├── src
    
 ├── app
    
 ├── assets
    
 ├── environments
    
 ├── favicon.ico
    
 ├── index.html
    
 ├── main.ts
    
 ├── polyfills.ts
    
 ├── styles.css
    
 ├── test.ts
    
 └── tsconfig.json

    Ta struktura jest odpowiednikiem Angulara struktury projektu Maven i katalogu

    src

    jest źródłem aplikacji Angular, podobnie jak

    polecenie budowania

    maven generuje swoje wyjście w

    cel

    folder, polecenie

    ng assemblies

    generuje dane wyjściowe w folderze

    dist

    .
    Aby spakować wygenerowaną aplikację Angular do pliku WAR wygenerowanego przez Maven, zmień konfigurację kompilacji, aby zmienić folder wyjściowy z

    dist

    na

    webapp
    , otwarty


    angular-cli.json i zmień jego outDir, jak pokazano poniżej: - 
    "outDir": "../webapp/ng"

    W tej chwili komenda

    ng build

    utworzy osadzoną aplikację Angular w katalogu

    ng

    ngfirst/src/main/folders

    webapp

    .

    Część Maven

    Otwórz pom.xml i skonfiguruj następujące trzy wtyczki maven: -
    • wtyczka kompilatora : brak elementów Javy do kompilacji folder/src/main/ngapp, wyklucz go.
    • war-plugin :/src/main/ ngapp -To jest folder projektu Angular i nie powinien być pakowany w WAR, wyklucz go.
    • exec-plugin : Uruchom polecenia NPM Install i Angular-CLI Build, aby zbudować aplikację Angular w folderze aplikacji internetowej w celu ostatecznego pakowania. Argument Note-base-href, jest potrzebny do załadowania zasobów Angular z kontekstu aplikacji internetowej i ścieżki oprogramowania.

    Tak to powinno wyglądać: - 
    <plugins>
    
 <plugin>
    
 <groupId>org.apache.maven.plugins</groupId>
    
 <artifactId>maven-compiler-plugin</artifactId>
    
 <version>3.3</version>
    
 <configuration>
    
 <excludes>
    
 <exclude>ngapp/**</exclude>
    
 </excludes>
    
 </configuration>
    
 </plugin>
    
 <plugin>
    
 <groupId>org.apache.maven.plugins</groupId>
    
 <artifactId>maven-war-plugin</artifactId>
    
 <version>3.0.0</version>
    
 <configuration>
    
 <excludes>
    
 <exclude>ngapp/**</exclude>
    
 </excludes>
    
 </configuration>
    
 </plugin>
    
 <plugin>
    
 <groupId>org.codehaus.mojo</groupId>
    
 <artifactId>exec-maven-plugin</artifactId>
    
 <version>1.5.0</version>
    
 <executions>
    
 <execution>
    
 <id>exec-npm-install</id>
    
 <phase>generate-sources</phase>
    
 <configuration>
    
 <workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
    
 <executable>npm</executable>
    
 <arguments>
    
 <argument>install</argument>
    
 </arguments>
    
 </configuration>
    
 <goals>
    
 <goal>exec</goal>
    
 </goals>
    
 </execution>
    
 <execution>
    
 <id>exec-npm-ng-build</id>
    
 <phase>generate-sources</phase>
    
 <configuration>
    
 <workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
    
 <executable>ng</executable>
    
 <arguments>
    
 <argument>build</argument>
    
 <argument>--base-href=/ngfirst/ng/</argument>
    
 </arguments>
    
 </configuration>
    
 <goals>
    
 <goal>exec</goal>
    
 </goals>
    
 </execution>
    
 </executions>
    
 </plugin>
    
</plugins>


    Budowa projektu

    Maven (a także aplikacje Angular)
    Otwórz Terminal w folderze głównym

    projekt

    ngfirst i uruchom polecenie

    mvn package
    , spowoduje to utworzenie pliku WAR (ngfirst.war) pod adresem

    cel

    teczka.
    Rozszerzać

    ngfirst.war

    w pojemniku, otwarty

    http://localhost:8080/ngfirst/ng/index.html
    http://localhost:8080/ngfirst/ng/index.html
    w przeglądarce. (w razie potrzeby zmień nazwę hosta i port)
    Jeśli wszystko poszło dobrze, powinieneś zobaczyć, jak

    aplikacja działa!

    w przeglądarce jest to aplikacja Angular w działaniu !!

    Wstępne przetwarzanie JSP

    Możemy wykorzystać możliwości dynamicznej konfiguracji i renderowania stron technologii JSP z aplikacją Angular, Angular SPA jest obsługiwany przez kontener Java jako zwykła strona HTML,

    index.html

    w tym przypadku, jeśli skonfigurujemy silnik JSP tak, aby wstępnie przetwarzał również pliki html, wtedy całą magię JSP można włączyć na stronie Angular SPA, po prostu umieść następujące elementy wewnątrz strony

    web.xml

    <servlet-mapping>
    
 <servlet-name>jsp</servlet-name>
    
 <url-pattern>*.html</url-pattern>
    
</servlet-mapping>

    Zapisz, odbuduj projekt Maven, wdróż WOJNĘ i voila !!
    2021-03-02 0 0
    Udostępnij to
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    Po swojej stronie mam moduł Mavena dla źródeł kątowych o nazwie

    prj-angular

    i anoter dla aplikacji wojskowej o nazwie

    prj-war

    .
    pierwszy

    prj angular

    wybudowany:
    • używa wtyczki maven-exec-plugin do wywołania
      npm install
      i
      ng build
      (dzięki @J_Dev!)
    • domyślny katalog zasobów dla
      dist/
    • pomiń generację MANIFESTU jar
    • Wynik modułu Maven: jar tylko z wygenerowanym zawartość odległości kątowej/!

    potem drugi

    prj_war

    budować:
    • To ma prj kątowe w jakość uzależnienia
    • użyj fazy rozpakowywania, aby rozpakować poprzedni plik jar do miejsca docelowego aplikacji internetowej
    • ten moduł, aby zbudować aplikację w stanie wojny ze świeżymi dzielnicami kątowymi.

    Postępuj zgodnie z odpowiednią konfiguracją wtyczki, której użyłem:

    prj kątowy (wyciąg z pom.xml

    )
    <build>
    
 <resources>
    
 <resource>
    
 <directory>dist</directory>
    
 </resource>
    
 </resources>
    
 <plugins>
    
 <!-- skip compile -->
    
 <plugin>
    
 <groupId>org.apache.maven.plugins</groupId>
    
 <artifactId>maven-compiler-plugin</artifactId>
    
 <executions>
    
 <execution>
    
 <id>default-compile</id>
    
 <phase/>
    
 </execution>
    
 </executions>
    
 </plugin>
    
 <plugin>
    
 <groupId>org.codehaus.mojo</groupId>
    
 <artifactId>exec-maven-plugin</artifactId>
    
 <executions>
    
 <execution>
    
 <id>exec-npm-install</id>
    
 <phase>generate-sources</phase>
    
 <configuration>
    
 <workingDirectory>${project.basedir}</workingDirectory>
    
 <executable>npm.cmd</executable>
    
 <arguments>
    
 <argument>install</argument>
    
 </arguments>
    
 </configuration>
    
 <goals>
    
 <goal>exec</goal>
    
 </goals>
    
 </execution>
    
 <execution>
    
 <id>exec-npm-ng-build</id>
    
 <phase>generate-sources</phase>
    
 <configuration>
    
 <workingDirectory>${project.basedir}/src</workingDirectory>
    
 <executable>ng.cmd</executable>
    
 <arguments>
    
 <argument>build</argument>
    
 <argument>--no-progress</argument>
    
 <argument>--base-href=/app/ng/</argument> <== to update
    
 </arguments>
    
 </configuration>
    
 <goals>
    
 <goal>exec</goal>
    
 </goals>
    
 </execution>
    
 </executions>
    
 </plugin>
    
 <plugin>
    
 <groupId>org.apache.maven.plugins</groupId>
    
 <artifactId>maven-jar-plugin</artifactId>
    
 <configuration>
    
 <archive>
    
 <addMavenDescriptor>false</addMavenDescriptor>
    
 <manifest>
    
 <addClasspath>false</addClasspath>
    
 </manifest>
    
 </archive>
    
 </configuration>
    
 </plugin>
    
 <plugin>
    
 <groupId>org.apache.maven.plugins</groupId>
    
 <artifactId>maven-shade-plugin</artifactId>
    
 <executions>
    
 <execution>
    
 <phase>package</phase>
    
 <goals>
    
 <goal>shade</goal>
    
 </goals>
    
 <configuration>
    
 <filters>
    
 <filter>
    
 <artifact>*:*</artifact>
    
 <excludes>
    
 <exclude>META-INF/</exclude>
    
 </excludes>
    
 </filter>
    
 </filters>
    
 </configuration>
    
 </execution>
    
 </executions>
    
 </plugin>
    
 </plugins>
    
</build>


    PRJ from War (wyciąg pom.xml

    )
    <plugin>
    
 <groupId>org.apache.maven.plugins</groupId>
    
 <artifactId>maven-dependency-plugin</artifactId>
    
 <executions>
    
 <execution>
    
 <id>unpack angular distribution</id>
    
 <phase>generate-resources</phase>
    
 <goals>
    
 <goal>unpack</goal>
    
 </goals>
    
 <configuration>
    
 <artifactItems>
    
 <artifactItem>
    
 <groupId>com.myapp</groupId> <== to update
    
 <artifactId>prj-angular</artifactId> <== to update
    
 <overWrite>true</overWrite>
    
 <includes>**/*</includes>
    
 </artifactItem>
    
 </artifactItems>
    
 <outputDirectory>${project.build.directory}/prjwar/ng</outputDirectory> <== to update
    
 <overWriteReleases>true</overWriteReleases>
    
 <overWriteSnapshots>true</overWriteSnapshots>
    
 </configuration>
    
 </execution>
    
 </executions>
    
 </plugin>
    2021-03-02 0 0
    Udostępnij to
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    Co dziwne, zrobiłem to dopiero w zeszłym tygodniu!

    Korzystanie z Netbeans 8.1 i Tomcat Servlet 8.0.27

    Struktura plików projektów Angular i Java.
    Projekt Java nazywa się Foo. Projekt pręta kątowego 
    Foo (Java Maven Project)
    
|__ src
    
| |__ main
    
| | |__ webapp (This folder contains the entire Angular Project)
    
| | | |__ META-INF
    
| | | | \__ context.xml 
    
| | | |__ WEB-INF
    
| | | | \__ web.xml
    
| | | |__ includes
    
| | | | |__ css
    
| | | | |__ images
    
| | | | \__ js
    
| | | |
    
| | | | ## Bar project files are located here ##
    
| | | |
    
| | | |__ app
    
| | | | \__ All .ts and compiled .js files are located here
    
| | | |__ node_modules
    
| | | | \__ any dependencies used for Bar are located here
    
| | | |__ typings
    
| | | | \__ typings for Typescript located here
    
| | | |
    
| | | |__ README.txt
    
| | | |__ index.jsp
    
| | | |__ package.json
    
| | | |__ systemjs.config.js
    
| | | |__ tsconfig.json
    
| | | |__ typings.json
    
| | | \ ## Bar project files end here
    
| | | 
    
| | |__ resources
    
| | | |__META-INF
    
| | | | \__ persistence.xml
    
| | |__ java
    
| | | |__ hibernate.cfg.xml
    
| | | |__ com
    
| | | | |__ orgName
    
| | | | | |__ packageName
    
| | | | | | \__ .java files are here
    
|__ pom.xml
    
\__ nb-configuration.xml
    2021-03-02 0 0
    Udostępnij to
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    Zalecam oddzielenie tych dwóch aplikacji, aby uzyskać modułowość.
    W ten sposób możesz zmienić swoją aplikację Angular bez wpływu na usługę i odwrotnie. Po drugie, twój apache/nginx dostarczy twoje js i html szybciej z Angular zamiast Tomcat (na przykład). Ale jeśli nadal chcesz umieścić swoją aplikację Angular w wojnie, obraz jest taki, że wszystkie zasoby internetowe znajdują się w src/main/webapp.
    2021-03-02 0 0
    Udostępnij to
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    Chcę się podzielić, jak instaluję moje projekty Angular/Java. Kilka ważnych rzeczy:
    • Jest tylko jeden projekt Mavena i pozwala mi zbudować cały projekt. W ten sposób mogę zbudować cały projekt lub osobno zbudować klienta i serwer.
    • Mój projekt oparty jest na frameworku Spring Boot. Możesz jednak łatwo dostosować moje rozwiązanie do swojej sytuacji. Generuję kod
      output
      projektu Angular, który jest umieszczony w folderze `META-INF '. Oczywiście możesz to zmienić, jeśli nie używasz Spring Boot.
    • W moim projekcie chcę opublikować projekt kątowy w folderze
      public
      .
    • Kiedy programuję, uruchamiam projekt Angular i projekt zaplecza osobno: Angular z
      ng serve
      i projekt zaplecza (część Java) w IDE (Eclipse).

    Dobrze, zacznijmy. Cała struktura projektu została przedstawiona na poniższym rysunku.
    https://i.stack.imgur.com/guCQs.png
    Jak widać, umieściłem projekt Angular w folderze „src \ main \ ngapp”. Do projektu Java (backend) użyłem Eclipse IDE, do projektu Angular użyłem Webstorm. Możesz wybrać preferowane IDE do zarządzania projektami. Co najważniejsze, potrzebujesz dwóch IDE do zarządzania całym projektem.
    Aby zbudować projekt Angular za pomocą Mavena, użyłem następującej definicji profilu Mavena.
    <pre class="lang-xml prettyprint-override">
    <profile>
    
 <id>build-client</id> <build>
    
 <plugins>
    
 <plugin>
    
 <groupId>com.github.eirslett</groupId>
    
 <artifactId>frontend-maven-plugin</artifactId>
    
 <version>1.3</version>
    
 <configuration>
    
 <nodeVersion>v10.13.0</nodeVersion>
    
 <npmVersion>6.4.1</npmVersion>
    
 <workingDirectory>src/main/ngapp/</workingDirectory>
    
 </configuration>
    
 <executions>
    
 <execution>
    
 <id>install node and npm</id>
    
 <goals>
    
 <goal>install-node-and-npm</goal>
    
 </goals>
    
 </execution>
    
 <execution>
    
 <id>npm install</id>
    
 <goals>
    
 <goal>npm</goal>
    
 </goals>
    
 </execution>
    
 <execution>
    
 <id>npm run build-prod</id>
    
 <goals>
    
 <goal>npm</goal>
    
 </goals>
    
 <configuration>
    
 <arguments>run build</arguments>
    
 </configuration>
    
 </execution>
    
 <execution>
    
 <id>prod</id>
    
 <goals>
    
 <goal>npm</goal>
    
 </goals>
    
 <configuration>
    
 <arguments>run-script build</arguments>
    
 </configuration>
    
 <phase>generate-resources</phase>
    
 </execution>
    
 </executions>
    
 </plugin>
    
 </plugins>
    
 </build>
    
</profile>

    Jak widać, użyłem wtyczki
    com.github.eirslett: frontend-maven-plugin
    , aby zainstalować węzeł i uruchomić npm, aby zbudować projekt Angular. Tak więc, kiedy uruchamiam profil maven
    build-client
    , wtyczka jest używana do:
    • Sprawdź i zainstaluj, jeśli to konieczne, wersję węzła
      v10.13.0
      w folderze projektu Angular
      src/main/ngapp/
    • Uruchom polecenie
      npm run build
      . Projekt Angular ma alias kompilacji zdefiniowany w projekcie
      package.json

    "scripts": {
    
 "ng": "ng",
    
 "start": "ng serve --proxy-config proxy.conf.json",
    
 "build": "ng build --configuration=production",
    
 "test": "ng test",
    
 "lint": "ng lint",
    
 "e2e": "ng e2e"
    
}

    Klient Angular należy umieścić w folderze
    public
    aplikacji internetowej. W tym celu projekt Angular jest skonfigurowany tak, aby mieć
    baseHref =/public
    . Skompilowany projekt należy również umieścić w
    src/main/resources/META-INF/resources/public
    . W
    angular.json
    znajdziesz: 
    "build": {
    
 "builder": "@angular-devkit/build-angular:browser",
    
 "options": {
    
 "baseHref":"/public/",
    
 "outputPath": "../resources/META-INF/resources/public",
    
 ...

    W projekcie bez Spring Boot prawdopodobnie będziesz musiał umieścić zbudowany projekt kątowy bezpośrednio w folderze
    src/main/webapp/public
    . Aby to zrobić, po prostu zmodyfikuj plik
    angular.json
    , aby odpowiadał swoim potrzebom.
    Cały kod projektu można znaleźć pod adresem

    mój projekt
    https://github.com/xcesco/files-on-cloud
    github. Projekt wtyczki jest zlokalizowany

    tutaj
    https://github.com/eirslett/frontend-maven-plugin
    .
    2021-03-02 0 0
    Udostępnij to
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od: 

    <plugin>
    
 <groupId>com.github.eirslett</groupId>
    
 <artifactId>frontend-maven-plugin</artifactId>
    
 <version>1.3</version>
    
 <configuration>
    
 <nodeVersion>v10.13.0</nodeVersion>
    
 <npmVersion>6.4.1</npmVersion>
    
 <workingDirectory>src/main/ngapp/</workingDirectory>
    
 </configuration>
    
 <executions>
    
 <execution>
    
 <id>install node and npm</id>
    
 <goals>
    
 <goal>install-node-and-npm</goal>
    
 </goals>
    
 </execution>
    
 <execution>
    
 <id>npm install</id>
    
 <goals>
    
 <goal>npm</goal>
    
 </goals>
    
 </execution>
    
 <execution>
    
 <id>npm run build-prod</id>
    
 <goals>
    
 <goal>npm</goal>
    
 </goals>
    
 <configuration>
    
 <arguments>run build</arguments>
    
 </configuration>
    
 </execution>
    
 <execution>
    
 <id>prod</id>
    
 <goals>
    
 <goal>npm</goal>
    
 </goals>
    
 <configuration>
    
 <arguments>run-script build</arguments>
    
 </configuration>
    
 <phase>generate-resources</phase>
    
 </execution>
    
 </executions>
    
 </plugin>
    2021-03-02 0 0
    Udostępnij to
    Dlaczego jest złożony? 0 odpowiedzi zostało zwiniętych

    Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się

    Polityka prywatności: https://zweryfikowac.pl/Polityka-prywatnosci.pdf
    Copyright © 2023, All Rights Reserved