Comment configurer l’application Angular2 à l’aide de typecript avec Maven?

Je suis un débutant avec Angular2. La stack technique de mon projet est Angular2 avec le texte typescript et le spring en tant que backend. Je ne veux pas utiliser le serveur de noeud comme indiqué pour comstackr mon frontend mais je devrai utiliser TOMCAT et Maven à la place. J’ai quelques questions.

  1. Je suppose que le serveur de nœuds génère des fichiers .js et .js.map pour chaque fichier .ts, car le navigateur ne comprend que les fichiers .js. Est-ce que ma compréhension est correcte? Comment puis-je accomplir cette tâche en utilisant Maven et Tomcat?
  2. Je voudrais construire mon application à partir de rien en utilisant Maven. Je préférerais bower comme gestionnaire de tâches frontend.

Quelqu’un peut-il me donner un guide étape par étape pour créer une application Angular2 + Spring en utilisant «bower ou tout autre outil pour la gestion des tâches frontales, comme la minification des fichiers, la création d’échafaudages d’applications et Maven pour la gestion des tâches backend? Je suis ouvert à toute suggestion.

J’utilise des fichiers .tscript dans mon application Angular 2 + Spring Boot avec maven. Je lance npm install pour les dépendances et npm exécute tsc pour convertir les fichiers .ts en fichiers .js par exec-maven-plugin .

Voici la partie plugin de mon pom.xml. Dans mon application, pacakge.json, tsconfig.json et typings.json, tous placés sous le chemin src / main / resources , exécutez donc les tâches npm sous le chemin

pom.xml

 org.springframework.boot spring-boot-starter-parent 1.3.5.RELEASE  war    org.apache.maven.plugins maven-comstackr-plugin  1.8 1.8    org.springframework.boot spring-boot-maven-plugin   org.codehaus.mojo exec-maven-plugin   exec-npm-install generate-sources  ${project.basedir}/src/main/resources npm  install    exec    exec-npm-run-tsc generate-sources  ${project.basedir}/src/main/resources npm  run tsc    exec     

Ma structure de dossier d’application Angular2 + Spring Boot est comme ci-dessous

 src/main/resources /app - .ts and converted .js /css /images /js - systemjs.config.js is also placed here /node_modules - generated by npm install and will include in war /typings application.properties package.json tsconfig.json typings.json src/main/webapp /WEB-INF /jsp - all .jsp files 

Sur la section head du fichier .jsp, incluez le fichier systemjs.config.js

     

Voici aussi mon code WebMvcConfigurerAdapter au chemin de mappage

 @Configuration @EnableWebMvc @ComponentScan(basePackages = "com.my.controller") public class WebConfig extends WebMvcConfigurerAdapter { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { if (!registry.hasMappingForPattern("/webjars/**")) { registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/"); } if (!registry.hasMappingForPattern("/images/**")) { registry.addResourceHandler("/images/**").addResourceLocations("classpath:/images/"); } if (!registry.hasMappingForPattern("/css/**")) { registry.addResourceHandler("/css/**").addResourceLocations("classpath:/css/"); } if (!registry.hasMappingForPattern("/js/**")) { registry.addResourceHandler("/js/**").addResourceLocations("classpath:/js/"); } if (!registry.hasMappingForPattern("/app/**")) { registry.addResourceHandler("/app/**").addResourceLocations("classpath:/app/"); } if (!registry.hasMappingForPattern("/node_modules/**")) { registry.addResourceHandler("/node_modules/**").addResourceLocations("classpath:/node_modules/"); } } @Bean public InternalResourceViewResolver internalViewResolver() { InternalResourceViewResolver viewResolver = new InternalResourceViewResolver(); viewResolver.setPrefix("/WEB-INF/jsp/"); viewResolver.setSuffix(".jsp"); viewResolver.setOrder(1); return viewResolver; } } 

Une chose que je veux mentionner est le piratage de l’exécution du plug-in exec-maven sur eclipse si le système d’exploitation est Windows ou Mac. Linux (Ubuntu) ne pose aucun problème. Lorsque vous exécutez la compilation d’eclipse sur Windows ou Mac, le problème est qu’il ne comprend pas la commande npm et essaie de trouver un tel fichier, même si la version de maven est totalement correcte sur le terminal ou la fenêtre de commande.

Pour résoudre ce problème, j’ai fait quelques ajustements. Pour Mac, créer un lien symbolique pour le noeud et npm sous le chemin / usr / bin , comme ci-dessous. Cependant, la modification de / usr / bin n’est pas autorisée, donc j’ai fait après le redémarrage par disque de récupération

 lrwxr-xr-x 1 root wheel 17 May 22 03:01 node -> ../local/bin/node lrwxr-xr-x 1 root wheel 44 May 22 02:50 npm -> ../local/lib/node_modules/npm/bin/npm-cli.js 

Pour Windows, j’ai créé le fichier node.bat et npm.bat sous le chemin du système, comme ci-dessous. Après cela, le compilateur Maven a parfaitement fonctionné depuis la fenêtre de commande et eclipse sous Windows 10.

npm.bat

 @echo off set arg1=%1 set arg2=%2 set arg3=%3 set arg4=%4 C:\Progra~1\nodejs\npm.cmd %arg1% %arg2% %arg3% %arg4% 

Les fichiers typescript, se terminant par .ts, sont compilés avec le compilateur typecript, pas node.js. Ils sont complètement séparés, jetez un oeil à http://www.typescriptlang.org/ pour plus d’informations sur les typescript eux-mêmes.

Pour utiliser Angular2, vous n’avez pas vraiment besoin d’utiliser dactylo, vous pouvez écrire du vieux Javascript. Même si l’équipe Angular2 utilise Typescript pour créer le framework.

Donc, pour répondre à votre première question, aucun n’est impliqué. Vous créez vos fichiers HTML, CSS et Javascript comme vous le souhaitez.

En ce qui concerne l’utilisation de bower, Angular2 n’existe pas officiellement sur bower, mais npm. Vous pouvez voir la discussion derrière ceci ici https://github.com/angular/angular/issues/4018 . Comme ils disent dans la discussion, vous pouvez utiliser le sharepoint terminaison GitHub si vous souhaitez vraiment utiliser bower.