Configure Angular 2 Maven Project to hot deploy typescript files on browser refresh

I am trying to create a web application using Spring MVC and Angular2 . Initially I tried to create 2 seperate apps for the backend and the frontend connected through rest calls .

But I got confused about how to build the war file to deploy it to the server. NPM lite server based apps do not run on apache tomcat 8.

Then I tried using the Angular2WebPackMaven as seed project from github . This is the relevant section of the pom.xml.

    <build>
    <finalName>Angular2WebPackMaven</finalName>
    <plugins>
        <!-- START OF BUILDING ANGULAR APP START -->

        <!-- Step 1: Compile and build the angular2 webapp -->
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.0</version>
            <configuration>
                <workingDirectory>src/main/webapp/angular2-webpack-maven/</workingDirectory>
                <installDirectory>target/buildtemp/frontend-maven-plugin</installDirectory>
            </configuration>
            <executions>

                <!-- It will install nodejs and npm -->
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <configuration>
                        <workingDirectory>src/main/webapp/</workingDirectory>
                        <installDirectory>target/buildtemp/node-and-npm</installDirectory>
                        <nodeVersion>${nodeVersion}</nodeVersion>
                        <npmVersion>${npmVersion}</npmVersion>
                    </configuration>
                </execution>

                <!-- Install webpack module -->
                <execution>
                    <id>npm webpack</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <workingDirectory>src/main/webapp/angular2-webpack-maven/</workingDirectory>
                        <installDirectory>target/buildtemp/node-and-npm</installDirectory>
                        <arguments>install webpack -g</arguments>
                    </configuration>
                </execution>

                <!-- Download all dependencies in node_modules -->
                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <workingDirectory>src/main/webapp/angular2-webpack-maven/</workingDirectory>
                        <installDirectory>target/buildtemp/node-and-npm</installDirectory>
                        <arguments>install</arguments>
                    </configuration>
                </execution>

                <!-- Converting ts file to js and bundling them all together. -->
                <!-- For Dev Environment. -->

                <execution>
                    <id>npm build</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <workingDirectory>src/main/webapp/angular2-webpack-maven</workingDirectory>
                        <installDirectory>target/buildtemp/node-and-npm/</installDirectory>
                        <arguments>run build</arguments>
                    </configuration>
                </execution>
        </executions>
        </plugin>
        <!-- START OF BUILDING ANGULAR APP END -->

        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>2.3.2</version>
            <configuration>
                <source>1.7</source>
                <target>1.7</target>
            </configuration>
        </plugin>

        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>2.1.1</version>
            <configuration>
                <webResources>
                    <resource>
                      <directory>src/main/webapp/angular2-webpack-maven/target</directory>
                      <targetPath>angular2-webpack-maven</targetPath>
                    </resource>
                </webResources>
                <failOnMissingWebXml>false</failOnMissingWebXml>
                <warSourceExcludes>**/angular2-webpack-maven/**</warSourceExcludes>
            </configuration>
        </plugin>

        <!-- START OF BUILDING ANGULAR APP START -->
        <!-- Step 3: Clean up the build artifacts -->
        <plugin>
            <artifactId>maven-clean-plugin</artifactId>
            <version>3.0.0</version>
            <configuration>
                <filesets>
                    <fileset>
                        <directory>src/main/webapp/angular2-webpack-maven/dist</directory>
                        <includes>
                            <include>**/*</include>
                        </includes>
                        <followSymlinks>false</followSymlinks>
                    </fileset>
                </filesets>
            </configuration>
        </plugin>
        <!-- START OF BUILDING ANGULAR APP END -->  
    </plugins>
</build>   

But when I change any typescript file , then save and refresh the browser the changes are not being shown .

I think that the compilation of TS to JS is not being triggered on TS file save . If I could trigger the compilation and the corresponding build on TS file save , this problem can be solved .

Can some one show me a way out of this . I have gone through all the relevant links which has left me very confused , a clear explaination will be very helpful .

via user1684776