làm thế nào để tích hợp ứng dụng Web Angular 2 + Java Maven

Question

Tôi đã tạo ra một ứng dụng Frontular 2 của Angular 2 và tôi đã tạo ra một ứng dụng Java Back WS Back-end được kết nối với DB.

cấu trúc thư mục My cho góc 2 App là liệt kê dưới đây

• Angular2App
  • confg
  • quận
  • E2E
  • node_modules
  • công
  • src
    • ứng dụng
    • favicon.ico
    • index.html
    • main.ts
    • hệ thống config.ts
    • tsconfig.json
    • typings.d.ts
  • tmp
  • kiểu chữ
  • .editorconfig
  • .gitignore
  • góc-cli.json
  • góc-cli-build.js
  • package.json
  • README.md
  • tslint.json
  • typings .json

Và tôi Java Maven Web Application Cấu trúc là liệt kê dưới đây

• JerseyWebApp
  • src
    • chính
    • java
      • Tuỳ chỉnh Gói
      • lớp java
    • nguồn
    • webapp
      • WEB-INF
      • web.xml
      • chỉ mục.html
  • pom.xml

Tôi muốn biết làm thế nào để tích hợp hai ứng dụng này vào một ứng dụng mà sẽ tạo ra chỉ có một tập tin chiến tranh.

Answer 1

Tôi khuyên bạn nên để hai ứng dụng được tách riêng, theo cách này bạn có mô đun. Bằng cách này bạn có thể thay đổi Ứng dụng Góc mà không ảnh hưởng đến dịch vụ của bạn và ngược lại. Thứ hai, apache/nginx của bạn nhanh hơn để phân phối js và html của bạn từ Angular thay vì Tomcat (ví dụ). Nhưng nếu bạn vẫn muốn đưa ứng dụng Angular vào trong chiến tranh, thì pattern là tất cả các tài nguyên web đều nằm trong src/main/webapp.

Answer 2

Funnily đủ, tôi đã làm điều này tuần trước!

Sử dụng Netbeans 8.1 và một servlet Tomcat phiên bản 8.0.27

góc và tập tin dự án Java cấu trúc.

Dự án Java được gọi là Foo. Dự án góc là Bar

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 

Answer 3

Dưới đây là những gì tôi đã làm: -

• Install Nodejs v6.9 +
• Run NPM cài đặt @ góc/cli -g cho góc CLI
• Cài đặt Apache Maven hoặc sử dụng bất kỳ IDE nào Maven thân thiện
• Sử dụng cấu hình Maven yêu cầu của bạn, tôi đã sử dụng webapp đơn giản (WAR).

mục Stucture (Trừ ngapp thư mục còn lại là cấu trúc Maven tiêu chuẩn.)

ngfirst 
├── pom.xml 
├── src 
│   └── main 
│    ├── java 
│    ├── resources 
│    ├── webapp 
│    └── ngapp 

góc Phần

mở ngapp thư mục trong thiết bị đầu cuối và gõ ng init lệnh khởi tạo nút và cấu hình npm trên, kết quả sẽ là một ứng dụng ví dụ Angular2 đơn giản sẽ cấu trúc thư mục sau đây trong thư mục 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 

Cấu trúc này là góc tương đương với cấu trúc dự án Maven và src thư mục là góc nguồn của ứng dụng, giống như maven xây dựng lệnh tạo ra đầu ra của nó trong mục tiêu thư mục, ng xây dựng lệnh tạo ra đầu ra của nó trong dist thư mục.

Để gói ứng dụng kiễu góc được tạo ra trong Maven tạo WAR thay đổi cấu hình xây dựng để thay đổi thư mục đầu ra từ quận để webapp, mở góc-cli.json tập tin và sửa đổi outDir của nó như sau: -

"outDir": "../webapp/ng" 

Tại thời điểm này ng xây dựng lệnh sẽ tạo xây dựng ứng dụng góc bên ng thư mục của ngfirst/src/main/webapp thư mục.

Maven Phần

mở pom.xml và cấu hình sau ba plugin maven: -

1. biên dịch-plugin: Không Java công cụ để biên dịch trong/src/main/ngapp thư mục, loại trừ nó.
2. chiến tranh-plugin:/src/main/ngapp là góc thư mục dự án và nó không nên được đóng gói trong WAR, loại trừ nó.
3. exec-plugin: Thực thi cài đặt NPM và lệnh angular-CLI Build để tạo ứng dụng góc trong thư mục webapp để đóng gói lần cuối. Lưu ý đối số -base-href, bắt buộc phải tải tài nguyên Góc từ đường dẫn ngữ cảnh của webapp.

Sau đây là cách nó sẽ giống như thế: -

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

Building Maven Project (và App góc quá)

Mở Terminal trong thư mục gốc của dự án ngfirst và chạy mvn gói lệnh, điều này sẽ tạo ra một tệp WAR (ngfirst.war) trong mục tiêu thư mục.

Triển khai ngfirst.war trong vùng chứa, mở http://localhost:8080/ngfirst/ng/index.html trong Trình duyệt. (điều chỉnh tên máy chủ và cổng của bạn nếu cần)

Nếu mọi thứ diễn ra đúng, bạn sẽ thấy ứng dụng hoạt động! trong trình duyệt, đó là ứng dụng góc tại nơi làm việc !!

JSP Pre-Processing

Chúng ta có thể tận dụng cấu hình và trang khả năng dựng hình năng động của công nghệ JSP với ứng dụng kiễu góc, SPA góc được phục vụ bởi các container Java như trang HTML thông thường, index.html trong này trường hợp, nếu chúng ta cấu hình JSP Engine để xử lý trước các tệp html quá, thì tất cả các phép thuật JSP có thể được đưa vào bên trong Angular SPA Page, chỉ bao gồm các trang sau bên trong trang web .xml

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

Lưu, tạo lại dự án maven, triển khai WAR và voila !!

Answer 4

bên tôi Tôi có một mô-đun maven cho nguồn góc gọi prj-góc và anoter một cho ứng dụng chiến tranh gọi là prj chiến.

đầu tiên prj góc được xây dựng:

• nó sử dụng maven-exec-plugin để gọi npm install và ng build
• thay đổi thư mục mặc định tài nguyên để dist/
• bỏ qua (nhờ @J_Dev!) jar MANIFEST thế hệ
• kết quả mô-đun maven: một cái bình có góc được tạo ra dist/ chỉ nội dung!

sau đó, thứ hai prj_war là xây dựng:

• có prj góc như phụ thuộc
• sử dụng giai đoạn giải nén để giải nén jar trước vào đích ứng dụng web
• module này build bạn chiến tranh ứng dụng với góc cạnh tươi.

Thực hiện theo thuộc cấu hình Plugin tương ứng tôi đã sử dụng:

prj góc (pom.xml chiết xuất)

<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 chiến tranh (pom.xml chiết xuất)

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