Configurer le projet angular 2 avec REST maven et spring

Je souhaitais mettre à niveau ma petite application d’angle 1 à angular 2. Je suis un peu nouveau en matière de configuration d’angle 2 et de nœud. Mon application Web utilise Eclipse et Maven. Le problème est que je ne pouvais pas configurer en utilisant angular 2.

Quelle structure de répertoire dois-je utiliser?

Il existe des plugins Maven disponibles, mais je suis un peu confus au sujet de la structure de répertoires de mon application angular 2.

Ici, à partir du site angular , plusieurs démonstrations montrent comment structurer un projet angular 2. Dans une application Web eclipse maven, je créais mes fichiers côté client dans le dossier src / main / resources au même niveau que le dossier web-inf.

Maven pom.xml, incluez-le dans votre projet. Le plugin Maven-fronted ne devrait pas être utilisé pour la production. Maven installera deux dossiers au niveau racine du projet avec cette installation, noeud et noeud_modules.

   com.github.eirslett frontend-maven-plugin 1.0   install node and npm  install-node-and-npm   v5.3.0 3.3.12    npm install  npm    install       

package.json l’ajoute à la racine du projet avant l’installation propre de maven.

 { "name": "budget_calculator", "version": "1.0.0", "dependencies": { "@angular/common": "2.0.0-rc.1", "@angular/comstackr": "2.0.0-rc.1", "@angular/core": "2.0.0-rc.1", "@angular/http": "2.0.0-rc.1", "@angular/platform-browser": "2.0.0-rc.1", "@angular/platform-browser-dynamic": "2.0.0-rc.1", "@angular/router": "2.0.0-rc.1", "@angular/router-deprecated": "2.0.0-rc.1", "@angular/upgrade": "2.0.0-rc.1", "systemjs": "0.19.27", "core-js": "^2.4.0", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12", "angular2-in-memory-web-api": "0.0.10", "bootstrap": "^3.3.6" } } 

Voici ce que j’ai fait:-

  • Installez Nodejs v6.9 +
  • Exécutez npm install @ angular / cli –g pour CLI angular
  • Installez Apache Maven ou utilisez n’importe quel environnement de développement convivial Maven
  • Utilisez votre configuration Maven requirejse, j’ai utilisé une simple application Web (WAR).

Structure de répertoire (sauf que ngapp folder rest est une structure Maven standard.)

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

Partie angular

Ouvrez le dossier ngapp dans le terminal et tapez la commande ng init pour initialiser la configuration des nœuds et npm. Le résultat sera un exemple simple d’application avec Angular2. La structure de répertoires suivante se trouvera dans le 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 angular de la structure de projet Maven et le répertoire src est la source de Angular Application, tout comme la commande maven build génère sa sortie dans le dossier cible , la commande ng build génère sa sortie dans le dossier dist .

Afin de conditionner l’application angular générée dans le fichier WAR généré par Maven, modifiez la configuration de construction afin de changer le dossier de sortie de dist en webapp , ouvrez le fichier angular-cli.json et modifiez son outDir comme suit: –

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

À ce stade, la commande ng build générera une application angular construite dans le répertoire ng du dossier ngfirst / src / main / webapp .

Partie maven

Ouvrez pom.xml et configurez les trois plugins Maven suivants: –

  1. comstackr-plugin : Aucun élément Java à comstackr dans le dossier / src / main / ngapp , excluez-le.
  2. war-plugin : / src / main / ngapp est un dossier de projet angular et ne doit pas être empaqueté dans WAR, excluez-le.
  3. exec-plugin : exécutez les commandes NPM Install et Angular-CLI Build pour générer une application angular dans le dossier webapp en vue de l’emballage final. Argument –base-href est requirejs pour charger des ressources angulars à partir du chemin de contexte de Webapp.

Voici à quoi cela devrait ressembler: –

   org.apache.maven.plugins maven-comstackr-plugin 3.3   ngapp/**     org.apache.maven.plugins maven-war-plugin 3.0.0   ngapp/**     org.codehaus.mojo exec-maven-plugin 1.5.0   exec-npm-install generate-sources  ${project.basedir}/src/main/ngapp npm  install    exec    exec-npm-ng-build generate-sources  ${project.basedir}/src/main/ngapp ng  build --base-href=/ngfirst/ng/    exec      

Building Maven Project (et App angular aussi)

Ouvrez Terminal dans le dossier racine du projet ngfirst et exécutez la commande mvn package , cela générera un fichier WAR (ngfirst.war) dans le dossier cible .

Déployez ngfirst.war dans un conteneur, ouvrez http: // localhost: 8080 / ngfirst / ng / index.html dans le navigateur. (ajustez votre nom d’hôte et votre port si nécessaire)

Si tout s’est bien passé, vous devriez voir que l’ application fonctionne! dans le navigateur, c’est l’application angular au travail!

Pré-traitement JSP

Nous pouvons tirer parti des capacités de configuration dynamic et de rendu de page de la technologie JSP avec l’application Angular. Angular SPA est desservi par le conteneur Java sous forme de page HTML standard, index.html dans ce cas, si nous configurons JSP Engine pour traiter également les fichiers HTML, puis toute la magie JSP peut être incluse dans Angular SPA Page, il suffit d’inclure ce qui suit dans web.xml

  jsp *.html  

Enregistrez, reconstruisez le projet Maven, déployez WAR et le tour est joué !!