How to configure Angular2 application using typescript with Maven?

Question

I am a newbie with Angular2. My project's technical stack is Angular2 with typescript and spring as backend. I don't want to use node server as directed to compile my frontend but I will need to use TOMCAT and Maven instead. I have a few questions.

1. I guess node server generates .js and .js.map for every .ts files since browser only understand .js files. Is my understanding correct? How can I accomplish this task using Maven and Tomcat?
2. I would like to build my application from scratch using Maven. I will prefer bower as the frontend task manager.

Can anyone give me a step by step guide to create an Angular2 + Spring application using 'bower or any other tools for frontend task management such as minification of files, creating application scaffold' and 'Maven for backend task management'? I am open for any suggestions.

Answer 1

I'm using typescript .ts files in my Angular 2 + Spring Boot application with maven. I run npm install for dependencies and npm run tsc for converting .ts files to .js by exec-maven-plugin.

Below is the plugin portion from my pom.xml. In my application, pacakge.json, tsconfig.json and typings.json all under src/main/resources path, so run npm tasks under the path

pom.xml

<parent>      <groupId>org.springframework.boot</groupId>      <artifactId>spring-boot-starter-parent</artifactId>      <version>1.3.5.RELEASE</version> </parent>  <packaging>war</packaging>   <build>     <plugins>         <plugin>             <groupId>org.apache.maven.plugins</groupId>             <artifactId>maven-compiler-plugin</artifactId>             <configuration>                 <source>1.8</source>                 <target>1.8</target>             </configuration>         </plugin>         <plugin>             <groupId>org.springframework.boot</groupId>             <artifactId>spring-boot-maven-plugin</artifactId>         </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}/src/main/resources</workingDirectory>                         <executable>npm</executable>                         <arguments>                             <argument>install</argument>                         </arguments>                     </configuration>                     <goals>                         <goal>exec</goal>                     </goals>                 </execution>                 <execution>                     <id>exec-npm-run-tsc</id>                     <phase>generate-sources</phase>                     <configuration>                         <workingDirectory>${project.basedir}/src/main/resources</workingDirectory>                         <executable>npm</executable>                         <arguments>                             <argument>run</argument>                             <argument>tsc</argument>                         </arguments>                     </configuration>                     <goals>                         <goal>exec</goal>                     </goals>                 </execution>             </executions>         </plugin> 

My Angular2 + Spring Boot application folder structure is like below

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 

On .jsp file head section, include the systemjs.config.js

<script type="text/javascript" src="webjars/zone.js/0.6.12/dist/zone.js"></script> <script type="text/javascript" src="webjars/reflect-metadata/0.1.3/Reflect.js"></script> <script type="text/javascript" src="webjars/systemjs/0.19.27/dist/system.js"></script> <script type="text/javascript" src="js/systemjs.config.js"></script> 

Also here is my WebMvcConfigurerAdapter code to mapping path

@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;     } } 

One thing I want to mention is there some hack on running the exec-maven-plugin on eclipse if the os is Windows or Mac. Linux(Ubuntu) looks no issue at all. When run the build from eclipse on Windows or Mac, the problem is it doesn't understand npm command and try to find such file, even though the maven build is totally fine on Terminal or Command Window.

To solve such issue, I did some tweak. For Mac, making symbolic link for node and npm under /usr/bin path like below. However modifying /usr/bin is not allowed, so I done after rebooting by recovery disk

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 

For Windows, I made node.bat and npm.bat file under system path like below After doing this, the maven build totally fine from eclipse and command window both on 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% 

Answer 2

The typescript files, ending in .ts, are compiled with the typescript compiler, not node.js. They are compleatly separate, take a look at http://www.typescriptlang.org/ for more info on typescript itself.

To use Angular2, you don't really need to use typescript, you could write plain old Javascript. Even though the Angular2 team is using Typescript to create the framework.

So to answer your first question, neither are involved. You create your HTML, CSS and Javascript however you want.

As for using bower, Angular2 doesn't actually exist on bower officially, only npm. You can see the discussion behind this here https://github.com/angular/angular/issues/4018. As they say in the discussion you can use the GitHub endpoint if you truly wish to use bower.