Adding angular as maven module in maven project

Question

I am working in multi maven project which is separated in the following modules:

• rest layer
• service layer
• repository layer

I want to add another module called view layer, ui of the application. The only problem is that ui is angular, and i need somehow to integrate angular app in maven module for this project.

I created a new maven module called view layer. Added the following plugin it maven module pom of view layer like below:

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.3</version>
    <configuration>
        <nodeVersion>v8.11.3</nodeVersion>
        <npmVersion>6.3.0</npmVersion>
        <workingDirectory>src/main/web/</workingDirectory>
    </configuration>
    <executions>
        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
        </execution>
        <execution>
            <id>npm install</id>
            <goals>
                <goal>npm</goal>
            </goals>
        </execution>
        <execution>
            <id>npm run build</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>run build</arguments>
            </configuration>
        </execution>
        <execution>
            <id>prod</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>run-script build</arguments>
            </configuration>
            <phase>generate-resources</phase>
        </execution>
    </executions>
</plugin>

And generated an angular app with angular cli inside src/main/web directory of view module. Unfortunately the build is failing, it is not finding the package.json.

I will appreciate any help.

Regards, Darth Bato.

Answer 1

I do it this way to add angular as a maven module, in a multi maven project.

First thing I add a simple maven module by skipping the archetype selection. I modify the pom by adding the following configurations:

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <maven.deploy.skip>true</maven.deploy.skip>
    </properties>


    <build>
        <plugins>

            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <executions>
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <phase>install</phase>
                        <configuration>
                            <executable>npm</executable>
                            <arguments>
                                <argument>install</argument>
                            </arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm build</id>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <phase>install</phase>
                        <configuration>
                            <executable>npm</executable>
                            <arguments>
                                <argument>run</argument>
                                <argument>build</argument>
                            </arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

        </plugins>
    </build>

Next, I delete all the content in the module I created only leaving the pom file. I delete the src folder, test folder, etc that are creating when we create a Maven module.

After that, I create a new angular app by using ANGULAR CLI. I move all the content of the angular app(src, dist, nodes_modules, etc) to the maven module project.

In the end, to check if everything is ok, I run a maven build to parent maven project to see if everything compiles successfully.

Answer 2

i think your

 <workingDirectory>src/main/web/</workingDirectory>

is not correcte since you've not added the module name

like this

<workingDirectory>frontend-module/src/main/web/</workingDirectory>

thats is why it cannot get your package.json