build angular 2 project in maven

Question

I want to build angular2 typescript project using maven. Is there a method to wrap npm install or ng build command inside the pom.xml file? I just want to build that project.

Answer 1

You can use simply like this. I have done this in my application. This is the simplest one.

Install nodejs and make it available in class path. And install angular CLI globally.

npm install -g @angular/cli

Write a simple script run.sh

npm install
ng build 

Now use maven exec plugin to call the script. When you call maven install/deploy it goes through this life cycle and build your angular project.

<plugin>
    <artifactId>exec-maven-plugin</artifactId>
        <groupId>org.codehaus.mojo</groupId>
        <version>1.2.1</version>
        <executions>
         <execution>
            <id>Build angular using ng</id>
            <phase>compile</phase>
            <goals>
            <goal>exec</goal>
            </goals>
            <configuration>
            <executable>${basedir}/build.sh</executable>
            </configuration>
         </execution>
       </executions>
    </plugin>

Answer 2

Yes we do this.

In package.json define a build in scripts, ours - we use webpack - looks like

scripts": {
    "build": "NODE_ENV=production webpack -p --config webpack.production.config.js",
    ...

Then use com.github.eirslett:frontend-maven-plugin in your POM

        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>0.0.26</version>

            <executions>

                <execution>
                    <!-- optional: you don't really need execution ids,
                    but it looks nice in your build log. -->
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <configuration>
                        <nodeVersion>v6.2.2</nodeVersion>
                        <npmVersion>3.9.5</npmVersion>
                    </configuration>                        
                </execution>

                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>

                    <!-- optional: default phase is "generate-resources" -->
                    <phase>generate-resources</phase>

                    <configuration>
                        <!-- optional: The default argument is actually
                        "install", so unless you need to run some other npm command,
                        you can remove this whole <configuration> section.
                        -->
                        <arguments>install</arguments>
                    </configuration>
                </execution>

                <execution>
                    <id>npm run build</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <arguments>run build</arguments>
                    </configuration>
                </execution>

            </executions>
        </plugin>