How to configure Angular2 application using typescript with Maven?

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.jsonsrc/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/nodelrwxr-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 belowAfter doing this, the maven build totally fine from eclipse and command window both on Windows 10.

npm.bat

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

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.