How to configure Angular2 application using typescript with Maven?
Solution 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%
Solution 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.