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

Author: TimeTraveler, 2017-08-28

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

 37
Author: TimeTraveler,
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)

Tutaj wpisz opis obrazka

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:

  1. 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ę ?)

  2. 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 ?

  3. 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)

 0
Author: flamant,
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.

GitHub

Postępuj zgodnie z poniższymi instrukcjami..

  1. Dodaj swój projekt angular pod java project. Moja nazwa projektu to tdf struktura projektu

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 Tutaj wpisz opis obrazka

 0
Author: Energy,
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