comment intégrer L'application web Angular 2 + Java Maven

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 amical IDE
• utilisez votre configuration Maven requise, j'ai utilisé webapp simple (WAR).

Structure Du Répertoire (à l'Exception de ngapp le reste du dossier est une structure Maven standard.)

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

angulaires La partie

Ouvrir ngapp dossier dans le terminal et tapez ng init commande pour initialiser la configuration de noeud et npm, le résultat sera un simple Angular2 exemple application sera la structure de répertoire suivante à l'intérieur du dossier 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

cette structure est L'équivalent angulaire de la structure du projet Maven et src directory est la source de L'application angulaire, tout comme Maven build commande génère sa sortie en cible dossier ng construire la commande génère sa sortie en dist dossier.

pour empaqueter L'application angulaire générée dans la guerre générée par Maven, Modifiez la configuration de construction pour changer le dossier de sortie de distwebapp, ouvrir angulaires-cli.json le fichier et de modifier son outDir comme ci-dessous:-

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

À ce point ng construire la commande générera l'application angulaire construite à l'intérieur de ng répertoire de ngfirst/src/main/webapp dossier.

Maven Part

ouvrez pom.xml et configurer les trois plugins maven suivants: -

1. compiler-plugin: pas de contenu Java à compiler dans/src/main/ ngapp dossier, l'exclure.
2. guerre-plugin: / src/main/ ngapp est dossier de projet angulaire et il ne doit pas être emballé en guerre, l'exclure.
3. exec-plugin: exécuter les commandes npm Install et Angular-CLI Build pour générer une application angulaire dans le dossier webapp pour le packaging final. Note --argument base-href, il est nécessaire de charger des ressources angulaires à partir du chemin de contexte de webapp.

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 L'application angulaire trop)

ouvrir le Terminal dans le dossier racine du projet ngfirst et run mvn package commande, cela va générer un fichier WAR (ngfirst.guerre)cible dossier.

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

Si tout s'est bien passé, vous devriez voir application fonctionne! dans navigateur, qui est application angulaire au travail!!

prétraitement JSP

nous pouvons tirer parti de la configuration dynamique et des capacités de rendu de page de la technologie JSP avec une application angulaire, Angular SPA est servi par le conteneur Java comme page HTML régulière, index.html dans ce cas, si nous configurons le moteur JSP pour pré-traiter les fichiers html aussi, alors toute la magie JSP peut être incluse à L'intérieur D'Angular SPA Page, il suffit d'inclure ce qui suit à l'intérieur web.xml

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

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

mon côté j'ai un module maven pour les sources angulaires appelé prj-angulaire, et une autre pour une application de guerre appelée prj-guerre.

premier prj angulaire:

• il utilise maven-exec-plugin pour appeler npm install et ng build (merci à @J_Dev!)
• changer de ressources par défaut vers le répertoire dist/
• passez pot MANIFESTE de la génération
• résultat du module maven: un pot avec généré anguleux dist/ contenu seulement!

puis, en seconde prj_war c'est créer:

• a prj angulaire en tant que dépendance
• utilisez la phase unpack pour décompresser le jar précédent dans la destination de l'application web
• ce module vous construira une app war avec un nouveau dist angulaire.

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>

assez curieusement, je l'ai 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.

Le projet Java s'appelle Foo. Le projet angulaire est 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

je recommande de séparer les deux applications, de cette façon vous avez la modularité. De cette façon, vous pouvez changer L'application angulaire sans affecter votre service, et vice versa. En second lieu, Votre apache/nginx est plus rapide pour livrer vos js et html à partir D'Angular à la place de Tomcat (par exemple). Mais si vous voulez Toujours mettre L'application angulaire à l'intérieur de la guerre, le modèle est que toutes les ressources web sont dans src/main/webapp.