3

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.

Michele Mariotti
  • 7,372
  • 5
  • 41
  • 73
ekanayaka.msl
  • 53
  • 1
  • 1
  • 7
  • take a look the official [Spring guide code](https://github.com/spring-guides/tut-spring-security-and-angular-js/blob/master/double/ui), it does build the AngularJS project with Maven. Checkout it's `pom.xml` regarding `wro4j` lib that uses `WebJars`, `src/main/wro` dir as well. Despite it uses Angular `1`, you can switch to the `2` version by editing the `wro` files to the appropriate dependencies. [Angular2 dependencies](http://www.webjars.org/npm) – WildDev Sep 29 '16 at 06:10
  • could you please give a try [this](https://stackoverflow.com/a/70114910/448078)? – Mike Nov 25 '21 at 18:08

2 Answers2

3

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>
Bhabani pattanayak
  • 149
  • 1
  • 1
  • 9
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>
Bruno Grieder
  • 28,128
  • 8
  • 69
  • 101