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:-
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: –
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é !!