[英]Spring Boot AngularJs Application: angular-bootstrap.css generation using wro4j-maven-plugin Fails
I am following the part 1 of this tutorial . 我正在遵循本教程的第1部分 。 I have reached this section " Loading a Dynamic Resource from Angular ".
我已经到达“ 从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. 按照教程中的说明,当我使用maven
mvn clean package
构建应用mvn clean package
,wro4j-maven-plugin无法生成angular-bootstrap.css,但成功生成了angular-bootstrap.js。 I am getting the following warnings in the mvn console 我在mvn控制台中收到以下警告
$ 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. 结果,当我运行该应用程序时,我得到了针对angular-bootstrap.css的404。 Please let me know where I am going wrong.
请让我知道我要去哪里了。 Please find the relevant configurations below.
请在下面找到相关配置。
/demo/src/main/wro/wro.xml /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 /demo/src/main/wro/wro.properties
preProcessors=lessCssImport
postProcessors=less4j,jsMin
/demo/src/main/wro/main.less [Actually this file is empty.] /demo/src/main/wro/main.less [实际上此文件为空。]
/demo/pom.xml /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
I tried with --debug flag in mvn. 我尝试在mvn中使用--debug标志。 I got this debug message
我收到了此调试消息
[DEBUG] Created file: angular-bootstrap.css
[DEBUG] No content found for group: angular-bootstrap.css
The issue got fixed after changing the version of bootstrap in pom.xml as follows 如下更改pom.xml中的引导程序版本后,此问题已解决
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7-1</version>
</dependency>
Now the angular-bootstrap.css is getting generated successfully. 现在,angular-bootstrap.css已成功生成。
在本教程之后,我遇到了同样的问题,并通过复制pom.xml
的wro4j <plugin>...</plugin>
块和演示页面上链接的github项目中的wro.xml
文件内容来wro.xml
了它而不是使用该页面上的代码示例。
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). 实际上,您可以在与解决方案一起发布的github存储库中找到更新的版本(对此我也发布了pull请求)。
Problem is, I find it breaks the DRY principle, as they repeat jquery, bootstrap and angularjs versions. 问题是,我发现它违反了DRY原理,因为它们重复了jquery,bootstrap和angularjs版本。
Three steps to correct the problem: 解决问题的三个步骤:
Defining versions in one place (Maven properties element): 在一处定义版本(Maven属性元素):
<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>
Reusing the generated-resources folders to allow IntelliJ and other IDEs to resolve the path for the generated files, in the plugin configuration: 在插件配置中,重用generate-resources文件夹以允许IntelliJ和其他IDE解析生成文件的路径:
<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>
Take advantage of Spring properties filtering in wro.xml: 利用wro.xml中的Spring属性过滤:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.