comment intégrer Angulaire 2 + Java Maven Application Web

J'ai créé un Angulaires 2 avant la fin de l'Application.et j'ai créé un Java Reste WS Application de Back-end qui est relié à la DB.

Mon Dossier structure Angulaire 2 App est au-dessous de

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

Et Mon Java Maven Web Structure de la Demande est au-dessous de

JerseyWebApp
  src
   main
     java
       Custom Package
       java classes
     resources
     webapp
       WEB-INF
         web.xml
       index.html
  pom.xml

Je veux savoir comment intégrer ces deux applications en une seule application, qui permettra de produire un seul fichier war.

InformationsquelleAutor RAJESHPODDER007 | 2016-07-22
  1. 51

    Voici ce que j'ai fait:-

    • Installer Nodejs v6.9+
    • Exécuter npm install @angulaire/cli –g Angulaire de la CLI
    • Installer Apache Maven ou d'utiliser toute Maven environnement de développement
    • Utiliser votre nécessaire de configuration de Maven, j'ai utilisé de simples webapp (la GUERRE).

    Répertoire Stucture (Sauf pour ngapp dossier reste est Maven standard de la structure.)

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

    Partie Angulaire

    Ouvrir ngapp dossier dans le terminal et tapez ng init de commande pour initialiser nœud et npm configuration, le résultat sera une simple Angular2 exemple d'application sera la structure de répertoire suivante à l'intérieur de ngapp dossier:-

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

    Cette structure est Angulaire équivalent de projet Maven de la structure et src répertoire est Angulaire de l'Application source, tout comme maven build commande génère sa sortie en cible dossier, ng construire commande génère sa sortie en dist dossier.

    Pour le paquet généré Angulaire de la demande dans un délai de Maven généré GUERRE de modifier la configuration de build pour modifier le dossier de sortie de dist à webapp, ouvrez angulaires-cli.json fichier et de modifier son outDir comme ci-dessous:-

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

    À ce point ng construire commande va générer construit Angulaire de l'Application à l'intérieur de ng répertoire de ngfirst/src/main/webapp dossier.

    Maven Partie

    Ouvrir pom.xml et de configurer à la suite de trois plugins maven:-

    1. compiler-plugin: Pas de Java choses à compiler dans /src/main/ngapp dossier, l'exclure.
    2. guerre-plugin: /src/main/ngapp est Angulaire dossier de projet et ne doivent pas être emballés dans de la GUERRE, de l'exclure.
    3. exec-plugin: Exécuter NPM Install et Angulaire-CLI Construire commandes pour générer Angulaire de l'Application en webapp pour l'emballage final. Note --base-href argument, il est nécessaire de charger Angulaire des ressources à partir d'une webapp du chemin de contexte.

    Voici comment il devrait ressembler à:-

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

    Bâtiment Projet Maven (et Angulaire Application trop)

    Ouvrir un Terminal dans le dossier racine du projet ngfirst et exécuter mvn package de commande, cela va générer un fichier WAR (ngfirst.la guerre) dans cible dossier.

    Déployer ngfirst.la guerre dans un récipient, ouvrez http://localhost:8080/ngfirst/ng/index.html dans le Navigateur. (ajustez votre nom d'hôte et le port si nécessaire)

    Si tout s'est bien passé, vous devriez voir application fonctionne! dans le navigateur, qui est Angulaire de l'Application au travail!!!

    JSP de Pré-Traitement

    Nous pouvons tirer parti de la configuration dynamique et le rendu de la page capacités de la technologie JSP Angulaire de l'application, Angulaire SPA est servi par le Java conteneur en tant que page HTML ordinaire, index.html dans ce cas, si nous configurer le Moteur de JSP pour pré-traiter les fichiers html, puis tous les JSP de la magie peut être inclus à l'intérieur Angulaire de la SPA de la Page, il suffit d'inclure le texte suivant à l'intérieur web.xml

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

    Enregistrer, de reconstruire projet maven, de déployer la GUERRE et le tour est joué!!

    • Je vous recommande d'utiliser <warSourceExcludes>ngapp/**</warSourceExcludes>à exclure ngapp dossier ou packagingExcludes>
    • cela fonctionne très bien.le problème est jar comprend Nœud modules aussi.comment puis-je ne comprend ng serve --prod ou ng build de sortie ?
    • Pouvez-vous expliquer pourquoi êtes-vous à l'exclusion de ngapp de la guerre. Je pensais que cette question est au sujet de l'intégration/regroupement angulaire 2 application et du code java dans la même guerre. Si vous êtes à l'exclusion puis comment le angulaires du code déployer?
    • n'avez-vous pas besoin de réécriture d'url angulaire routeurs?
    InformationsquelleAutor J_Dev
  2. 11

    Mon côté j'ai un maven module angulaire sources ont appelé prj-angulaire, et anoter un pour la guerre application appelée prj-guerre.

    première prj angulaire est construit:

    • il utilise maven-exec-plugin pour appeler npm install et ng build (merci à @J_Dev!)
    • changement de ressource répertoire par défaut pour dist/
    • sauter pot MANIFESTE de la génération
    • maven module résultat: un pot avec générés angulaire dist/ contenu seulement!

    puis, en seconde prj_war est de construire:

    • a prj angulaire que la dépendance
    • utilisation déballez la phase de décompression de la précédente pot sur le web à l'application de destination
    • ce module vous mettre en application la guerre avec des produits frais angulaire dist.

    Suivre dans la configuration du plugin, j'ai utilisé:

    prj angulaire (pom.xml extrait)

    <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 guerre (pom.xml extrait)

            <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>
    InformationsquelleAutor boly38
  3. 8

    Curieusement, je l'a fait la semaine dernière!

    À l'aide de Netbeans 8.1 et une servlet Tomcat version 8.0.27

    Angulaire et Java structure des fichiers du projet.

    Projet Java est appelé Foo. Angulaire du Projet de 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
    InformationsquelleAutor Scrambo
  4. 3

    Je recommande de laisser les deux applications séparées, de cette façon, vous avez de la modularité.
    De cette façon, vous pouvez changer l'angle d'Application sans nuire à votre service, et vice versa. Pour le second, votre apache/nginx sont plus rapides pour livrer votre js et html à partir Angulaire au lieu de Tomcat (par exemple). Mais si vous voulez toujours mettre de l'angle d'application à l'intérieur de la guerre, le motif est que toutes les ressources web sont dans src/main/webapp.

    • De cette façon, j'ai essayé effectivement de mettre toutes les ressources sur le web sous src/main/webapp, mais ici je suis face à un problème comme angular2 est construit sur la machine,de sorte que tomcat server n'est pas en mesure de compiler ces fichiers.Et l'application coincé.
    • c'est bon.. peut-être cela peut vous aider alors: stackoverflow.com/a/37398298/2285259
    InformationsquelleAutor Caio Leonhardt
  5. 0

    Je veux partager comment configurer mon Angulaire des projets Java. Certaines choses importantes:

    1. Il n'y a qu'un seul projet Maven et cela me permet de construire l'ensemble du projet. Cela ne signifie pas que je peux toujours construire le front-end et le back-end séparément.

    2. Mon projet est basé sur Spring Boot cadre. Cependant, vous pouvez facilement adapter ma solution à votre situation. Je crée les output code Angulaire du projet est placé sous la "META-INF" dossier. Vous pouvez bien sûr le modifier si vous n'utilisez pas le Printemps de Démarrage.

    3. Dans mon projet, je souhaite publier l'angle de projet dans le public dossier.

    4. Quand je développe, je lance l'angle de projet et le backend projet séparément: Anguleuse avec ng serve et le backend de projet (Java partie) dans l'IDE (Eclipse).

    Ok, nous allons commencer. L'ensemble de la structure du projet est représenté dans l'image ci-dessous.

    comment intégrer Angulaire 2 + Java Maven Application Web

    Comme vous pouvez le voir, j'ai mis de l'angle de projet dans le 'src\main\ngapp' dossier. Pour le projet Java (le backend), j'ai utilisé Eclipse IDE, pour l'angle de projet, j'ai utilisé Webstorm. Vous pouvez choisir votre IDE préféré pour gérer le projet. La chose la plus importante: vous aurez besoin de deux IDE pour gérer l'ensemble du projet.

    Pour construire l'angle de projet avec Maven, j'ai utilisé le suivant maven définition de profil.

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

    Comme vous pouvez le voir, j'ai utilisé le com.github.eirslett:frontend-maven-plugin plugin à installer nœud et d'exécuter des mnp pour construire l'angle de projet. De cette façon, lorsque je lance le profil maven build-client Le plugin est utilisé pour:

    • De vérification et d'installation, si elle est nécessaire, le nœud de la version v10.13.0 dans l'angle de dossier de projet src/main/ngapp/

    • Exécutez la commande npm run build. Dans l'angle de projet est la construction d'alias dans le 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"
}

    Angulaire client doit être en place dans public dossier de l'application web. Pour ce faire, l'angle de projet est configuré pour avoir le baseHref=/public. En outre, le valencien, le projet doit être en place dans src/main/resources/META-INF/resources/public. Dans angular.json vous trouverez:

    "build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"baseHref":"/public/",
"outputPath": "../resources/META-INF/resources/public",
...

    Dans une zone de non-Printemps de Démarrage de projet, vous aurez probablement besoin de mettre le bâti angulaire du projet directement dans src/main/webapp/public dossier. Pour ce faire, il suffit de modifier le angular.json fichier que vous en avez besoin.

    Vous pouvez trouver le code du projet dans mon projet github. Le plugin projet est ici.

    InformationsquelleAutor xcesco
  6. 0
    <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>
    • vous pouvez ajouter des plugins à la place de profils de balise
    • Bienvenue sur S/O., Veuillez inclure une brève explication de ce que vous êtes en train de faire au moment de donner une réponse.
    InformationsquelleAutor Prashanth