Spring Boot AngularJs Application: angular-bootstrap.css generation using wro4j-maven-plugin Fails

问题:

I am following the part 1 of this tutorial. I have reached this section "Loading a Dynamic Resource from Angular". As per the tutorial instructions, when I build the aplication using maven mvn clean package, the wro4j-maven-plugin fails to generate the angular-bootstrap.css but the angular-bootstrap.js is generated successfully. I am getting the following warnings in the mvn console

$ mvn clean package [INFO] Scanning for projects... [INFO] [INFO] ------------------------------------------------------------------------ [INFO] Building demo 0.0.1-SNAPSHOT [INFO] ------------------------------------------------------------------------ [INFO] [INFO] --- maven-clean-plugin:2.6.1:clean (default-clean) @ myDemo --- [INFO] Deleting E:\workspace\demo\target [INFO] [INFO] --- wro4j-maven-plugin:1.8.0:run (default) @ myDemo --- [INFO] E:\workspace\demo/src/main/wro [INFO] Executing the mojo: [INFO] Wro4j Model path: E:\workspace\demo\src\main\wro\wro.xml [INFO] targetGroups: null [INFO] minimize: true [INFO] ignoreMissingResources: null [INFO] parallelProcessing: false [INFO] buildDirectory: E:\workspace\demo\target [INFO] destinationFolder: E:\workspace\demo\target [INFO] jsDestinationFolder: E:\workspace\demo\target\classes\static\js [INFO] cssDestinationFolder: E:\workspace\demo\target\classes\static\css [INFO] The following groups will be processed: [angular-bootstrap] [INFO] folder: E:\workspace\demo\target\classes\static\css [INFO] processing group: angular-bootstrap.css [WARNING] Less warnings are: [WARNING] 0:2 Cannot link source map. Css result location is not know and could not be deduced from input less source.. [INFO] folder: E:\workspace\demo\target\classes\static\js [INFO] processing group: angular-bootstrap.js [INFO] file size: angular-bootstrap.js -> 240652 bytes [INFO] E:\workspace\demo\target\classes\static\js\angular-bootstrap.js (240652 bytes)

As a result of this, when I run the application, I am getting 404 for angular-bootstrap.css. Please let me know where I am going wrong. Please find the relevant configurations below.

/demo/src/main/wro/wro.xml

<groups xmlns="http://www.isdc.ro/wro">   <group name="angular-bootstrap">     <css>webjar:bootstrap/3.3.7-1/less/bootstrap.less</css>        <css>file:@project.basedir@/src/main/wro/main.less</css>     <js>webjar:jquery/2.2.4/jquery.min.js</js>     <js>webjar:angularjs/1.4.9/angular.min.js</js>     <js>webjar:angularjs/1.4.9/angular-route.min.js</js>     <js>webjar:angularjs/1.4.9/angular-cookies.min.js</js>    </group> </groups>

/demo/src/main/wro/wro.properties

preProcessors=lessCssImport postProcessors=less4j,jsMin

/demo/src/main/wro/main.less [Actually this file is empty.]

/demo/pom.xml

<build>    <plugins>     <plugin>       <groupId>org.springframework.boot</groupId>       <artifactId>spring-boot-maven-plugin</artifactId>     </plugin>     <plugin>       <groupId>ro.isdc.wro4j</groupId>       <artifactId>wro4j-maven-plugin</artifactId>       <version>1.8.0</version>       <executions>         <execution>           <phase>generate-resources</phase>           <goals>             <goal>run</goal>           </goals>         </execution>       </executions>       <configuration>         <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>         <cssDestinationFolder>${project.build.directory}/classes/static/css</cssDestinationFolder>         <jsDestinationFolder>${project.build.directory}/classes/static/js</jsDestinationFolder>         <wroFile>${basedir}/src/main/wro/wro.xml</wroFile>         <extraConfigFile>${basedir}/src/main/wro/wro.properties</extraConfigFile>         <contextFolder>${basedir}/src/main/wro</contextFolder>       </configuration>       <dependencies>         <dependency>           <groupId>org.webjars</groupId>           <artifactId>jquery</artifactId>           <version>2.2.4</version>         </dependency>         <dependency>           <groupId>org.webjars</groupId>           <artifactId>angularjs</artifactId>           <version>1.4.9</version>         </dependency>         <dependency>           <groupId>org.webjars</groupId>           <artifactId>bootstrap</artifactId>           <version>3.3.7</version>         </dependency>       </dependencies>     </plugin>   </plugins>  </build>

I am using

Apache Maven 3.3.9 Java version: 1.8.0_111 spring-boot 1.4.2.RELEASE OS : windows 10

Edit 1

I tried with --debug flag in mvn. I got this debug message

[DEBUG] Created file: angular-bootstrap.css [DEBUG] No content found for group: angular-bootstrap.css

回答1:

The issue got fixed after changing the version of bootstrap in pom.xml as follows

<dependency>   <groupId>org.webjars</groupId>   <artifactId>bootstrap</artifactId>   <version>3.3.7-1</version> </dependency>

Now the angular-bootstrap.css is getting generated successfully.

回答2:

I hit this same snag following that tutorial and got past it by copying the wro4j <plugin>...</plugin> block from the pom.xml AND the wro.xml file contents from the github project linked on the demo page, rather than using the code examples on that page.

回答3:

Actually, you can find an updated version on the github repositry published along with the solution (I also published a pull request for that matter).

Problem is, I find it breaks the DRY principle, as they repeat jquery, bootstrap and angularjs versions.

Three steps to correct the problem:

1. Defining versions in one place (Maven properties element):

   <properties>     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>     <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>     <java.version>1.8</java.version>     <wro4j.version>1.8.0</wro4j.version>     <bootstrap.version>3.3.7-1</bootstrap.version>     <angularjs.version>1.5.9</angularjs.version>     <jquery.version>3.1.1-1</jquery.version> </properties>

2. Reusing the generated-resources folders to allow IntelliJ and other IDEs to resolve the path for the generated files, in the plugin configuration:

   <build>      <resources>         <resource>             <directory>${project.basedir}/src/main/resources</directory>         </resource>         <resource>             <directory>${project.build.directory}/generated-resources</directory>         </resource>     </resources>      <plugins>         <plugin>             <artifactId>maven-resources-plugin</artifactId>             <executions>                 <execution>                     <!-- Serves *only* to filter the wro.xml so it can get an absolute                       path for the project -->                     <id>copy-resources</id>                     <phase>validate</phase>                     <goals>                         <goal>copy-resources</goal>                     </goals>                     <configuration>                         <outputDirectory>${basedir}/target/wro</outputDirectory>                         <resources>                             <resource>                                 <directory>src/main/wro</directory>                                 <filtering>true</filtering>                             </resource>                         </resources>                     </configuration>                 </execution>             </executions>         </plugin>          <plugin>             <groupId>org.springframework.boot</groupId>             <artifactId>spring-boot-maven-plugin</artifactId>         </plugin>          <plugin>             <groupId>ro.isdc.wro4j</groupId>             <artifactId>wro4j-maven-plugin</artifactId>             <version>${wro4j.version}</version>             <executions>                 <execution>                     <phase>compile</phase>                     <goals>                         <goal>run</goal>                     </goals>                 </execution>             </executions>             <configuration>                 <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory                 </wroManagerFactory>                 <cssDestinationFolder>${project.build.directory}/generated-resources/static/css                 </cssDestinationFolder>                 <jsDestinationFolder>${project.build.directory}/generated-resources/static/js</jsDestinationFolder>                 <wroFile>${project.build.directory}/wro/wro.xml</wroFile>                 <extraConfigFile>${project.build.directory}/wro/wro.properties</extraConfigFile>                 <contextFolder>${project.build.directory}/wro</contextFolder>             </configuration>             <dependencies>                 <dependency>                     <groupId>org.webjars</groupId>                     <artifactId>jquery</artifactId>                     <version>${jquery.version}</version>                 </dependency>                 <dependency>                     <groupId>org.webjars</groupId>                     <artifactId>angularjs</artifactId>                     <version>${angularjs.version}</version>                 </dependency>                 <dependency>                     <groupId>org.webjars</groupId>                     <artifactId>bootstrap</artifactId>                     <version>${bootstrap.version}</version>                 </dependency>             </dependencies>         </plugin>     </plugins> </build>

3. Take advantage of Spring properties filtering in wro.xml:

   <groups xmlns="http://www.isdc.ro/wro">   <group name="angular-bootstrap">     <css>webjar:bootstrap/@bootstrap.version@/less/bootstrap.less</css>     <css>file:src/main/wro/main.less</css>     <js>webjar:jquery/@jquery.version@/jquery.min.js</js>     <js>webjar:angularjs/@angularjs.version@/angular.min.js</js>     <js>webjar:angularjs/@angularjs.version@/angular-route.min.js</js>     <js>webjar:angularjs/@angularjs.version@/angular-cookies.min.js</js>    </group> </groups>

转载请标明出处:Spring Boot AngularJs Application: angular-bootstrap.css generation using wro4j-maven-plugin Fails

文章来源: Spring Boot AngularJs Application: angular-bootstrap.css generation using wro4j-maven-plugin Fails