AngularJs Error while running a Spring Boot application

Question

I am trying this tutorial from spring.io (https://spring.io/guides/tutorials/spring-security-and-angular-js/) and I am getting this error.

Error: [$injector:modulerr] http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=hello%20&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.9%2F%24injector%2Fnomod%3Fp0%3Dhello%2520%0AM%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A2%3A85925%0Ahe%2F%3C%2F%3C%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A4%3A1716%0Ab%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A4%3A1258%0Ahe%2F%3C%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A4%3A1501%0Ag%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A5%3A4212%0An%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A2%3A86371%0Ag%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A5%3A4060%0Adb%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A5%3A5856%0Azc%2Fc%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A3%3A1485%0Azc%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A3%3A1798%0Ace%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A3%3A1105%0A%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A14%3A20478%0An.Callbacks%2Fi%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A2%3A27146%0An.Callbacks%2Fj.fireWith%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A2%3A27914%0A.ready%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A2%3A29705%0AJ%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A2%3A29890%0A

I have created a Spring Boot application. This is the structure of the application

Here is my codes :

Pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" ...>
<modelVersion>4.0.0</modelVersion>

<groupId>com.skillupsoft</groupId>
<artifactId>estudent</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.4.4.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
</properties>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

<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-1</version>
                </dependency>
            </dependencies>
        </plugin>
    </plugins>
</build>

I am using Wro4j library, a java-based toochain for preprocessing and packaging front end assets. It generate a angularjs librabry file and bootstrap file to be embedded in the JAR file.

The index.hml (src/main/resources/static/index.html)

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Hello eStudent</title>
    <link href="css/angular-bootstrap.css" rel="stylesheet">
    <style type="text/css">
        [ng\:cloak], [ng-cloak], .ng-cloak {
            display: none !important;
        }
    </style>
   </head>

<body ng-app="hello ">
<div class="container">
    <h1>Greeting</h1>
    <div ng-controller="home" ng-cloak class="ng-cloak">
        <p>The ID is {{greeting.id}}</p>
        <p>The content is {{greeting.content}}</p>
    </div>
</div>

<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/hello.js"></script>

</body>
</html>

The hello.js app file (src/main/resources/static/js/hello.js)

angular.module('hello',[])
    .controller('home', function($scope) {
        $scope.greeting = {id: 'xxx', content: 'Hello World!'}
    })

There are also some properties file to setup in order for wro4j to work properly. Those files are :

main.less
wro.properties
wro.xml

Here are the content of these "wro4j" configuration file.

main.less is empty

wro.properties

#List of preProcessors
preProcessors=lessCssImport
#List of postProcessors
postProcessors=less4j,jsMin

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>

The main application file of the spring-boot application is as follow

 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class EStudentApplication {

    public static void main(String[] args) {
        SpringApplication.run(EStudentApplication.class, args);
    }

When I run the application the browser is displaying nothing apart from the static content "Greeting". The dynamic contents are not displayed. And the browser console is displaying the error shown above in bold.

Can someone help me with this issue?

Try removing the trailing whitespace from `ng-app="hello "`, it's not supposed to be there. Does that fix anything? — Hanne Olsen, Jan 31 '17 at 15:33

AngularJs Error while running a Spring Boot application

0 Answers0