Spring Boot AngularJs Application: angular-bootstr

2019-06-05 05:43发布

站内问答 / Java
1608 3 6

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

3条回答
Deceive 欺骗
2楼-- · 2019-06-05 06:13

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.

查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
3楼-- · 2019-06-05 06:21

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>
查看更多
0人赞 添加讨论(0) 举报
一纸荒年 Trace。
4楼-- · 2019-06-05 06:25

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)