it-swarm.com.de

So richten Sie Winkel 4 in einem Maven-basierten Java-Kriegsprojekt ein

Ich werde ein bisschen verrückt, weil ich keine Anleitung zum Einrichten einer eckigen 4-App in einem Java-Kriegsprojekt finden kann, das mit maven erstellt wird. Dies liegt daran, dass ich es auf einem Wildfly-Server ausführen möchte.

Irgendeine Hilfe?

Vielen Dank

15
Giamma

Ich hatte eine ähnliche Anforderung, ein Quellprojekt zu haben, das sowohl ein Java-Web-Services-Projekt als auch ein Winkelprojekt (ein Projekt, das auf einem Cli-Cli basiert) hat, und Maven Build sollte einen Krieg mit allen Winkeldateien darin erstellen. Ich habe maven-frontend-plugin mit ein paar Konfigurationsänderungen für den Basispfad verwendet.

Das Ziel war, eine Kriegsdatei mit dem gesamten Java-Code sowie dem gesamten aot-kompilierten Winkelcode im Root-Ordner von War zu erstellen, und zwar mit dem einzigen Befehl mvn clean package

Eine weitere Sache für all dies ist das Vermeiden von Konflikten zwischen den URLs der Winkel-App-Router und den URLs Ihrer Java-Anwendung. Sie müssen HashLocationStrategy verwenden. Richten Sie es wie folgt in app.module.ts ein

app.module.ts - 

providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy },

]

Ordnerstruktur für Angular App ist unter-

winkelprojekt

  • dist
  • e2e
  • knotenmodule
  • Öffentlichkeit
  • src
    • app
    • vermögenswerte
    • umgebungen
    • favicon.ico
    • index.html
    • main.ts
    • polyfills.ts
    • style.css
    • tsconfig.json
    • typings.d.ts
    • etc-etc
  • tmp
  • .angular-cli.json
  • .gitignore
  • karma.conf.js
  • package.json
  • README.md
  • tslint.json
  • etc - etc

Maven-Projekt -

  • src
    • main
      • Java
      • ressourcen
      • web-App
        • WEB-INF
        • web.xml
  • winkelprojekt (Platziere dein Winkelprojekt hier)
  • node_installation
  • pom.xml

Fügen Sie die Konfiguration von maven-frontend-plugin zu pom.xml hinzu

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

Da das Plugin intern über 'npm run build' aufgerufen wird, vergewissern Sie sich, dass package.json über den Build-Befehl im Skript verfügen sollte.

package.json

"scripts": {
    -----//-----,
    "build": "ng build --prod",
   -----//------
}

index.html sollte immer geladen werden, wenn jemand die Anwendung über den Browser anschlägt, weshalb es sich um eine Willkommensdatei handelt. Für Webservices können wir sagen, dass Pfad/Rest-Services/* dies später erklären wird.

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

Die obige Konfiguration reicht aus, wenn Ihre Anwendung über keinen Kontextpfad verfügt und im Stammpfad auf dem Server bereitgestellt wird. Wenn Ihre Anwendung jedoch über einen Kontextpfad wie http: // localhost: 8080/myapplication/ verfügt, nehmen Sie auch Änderungen an der Datei index.html vor - 

angle-project/src/index.html - Hier ist document.location meine Anwendung/(der Kontextpfad Ihrer App sonst/wenn die Anwendung keinen Kontextpfad hat)

Das Erstellen eines Kontextpfads als Basispfad für die Winkel-App hat den Zweck, dass bei jedem Aufruf eines ajax http-Aufrufs von Winkel der Basispfad der URL vorangestellt wird. Wenn ich zum Beispiel versuche, "restservices/persons" anzurufen, dann werden tatsächlich Anrufe an " http: // localhost: 8080/myapplication/restservices/persons " getätigt.

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

Nach allen obigen Änderungen wird nach dem Ausführen von mvn clean package der erforderliche Krieg erstellt. Prüfen Sie, ob sich der gesamte Inhalt des 'dist'-Ordners im Stammverzeichnis der War-Datei befindet.

21
TimeTraveler

Ich habe ein ähnliches Problem: Ich habe ein Maven-Webanwendungsmodul namens Tourism-Services, das die Webservices enthält, und ein Mavenprojekt, das das Winkelprojekt enthält (Ich habe das Winkelprojekt mit CLI im Ordner src/main/angle5/tourism erstellt).

 enter image description here

im Gegensatz zu diesem Beitrag und entsprechend dem folgenden Link ( wie man Angular 2 + Java Maven Web Application integriert), der von Parth Ghiya gegeben wurde, denke ich, dass das Winkelprojekt im webapp-Ordner von Tourism-Services platziert werden sollte Modulprojekt. In Anbetracht dessen habe ich weitere Fragen:

  1. Normalerweise sollten alle Kompilierungsergebnisse im Ordner dist unter webapp abgelegt werden. Aber in dist Ordner gibt es nicht alle Angular-Projektressourcen (wie Images, css, die in Angular Assets Ordner sein sollten, oder?)

  2. Angesichts der Winkelabhängigkeiten in node_modules, sollten wir sie auch in den webapp-Ordner integrieren? Es gibt ein Hindernis: Zunächst gibt es TypeScript-Dateien, die auch vom Server interpretiert werden müssen, aber möglicherweise werden sie kompiliert und hinzugefügt, wenn sie in die Winkeldateien der benutzerdefinierten Anwendung importiert werden. Was ist die Lösung ?

  3. Sollten wir andere Arten von Ressourcen aus dem Winkelprojekt in den Webapp-Ordner aufnehmen? (wie Tipp-Ordner wie Scrambo im obigen Link-Beitrag vorgeschlagen)

0
flamant

Ich habe diese Anweisungen und andere Artikel ausprobiert ... die sind großartig, aber es ist ein bisschen mehrdeutig. Also, jemand, der es nicht sofort bekommt ... überprüft dies. 

GitHub

Befolgen Sie die folgenden Anweisungen. 

  1. Fügen Sie Ihr Winkelprojekt unter Java-Projekt hinzu. Mein Winkelprojektname ist tdf project structure

2.open app.module.ts (in Ihrem Winkelprojekt/src/app/app.module.ts) Fügen Sie import und provider hinzu

import { LocationStrategy, HashLocationStrategy } from '../../node_modules/@angular/common';

      providers: [
        { provide: LocationStrategy, useClass: HashLocationStrategy },
      ],

3.open package.json (angleproject/package.json) Add "build": "ng build - prod" wie unten

{
  "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.update pom.xml - add forntend maven plugin - add ng build-verzeichnis

      <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 . Klicken Sie mit der rechten Maustaste auf Ihr Maven-Projekt. Maven - Maven Install Oder Terminal: mvn clean install

und warten Sie, bis es zum Stillstand gekommen ist . Sobald es installiert ist, können Sie sehen, wie der Knoteninstallationsordner und die WAR-Datei erstellt werden  enter image description here

0
Energy