Angular2 and Spring Boot: Getting Started

Combining Angular2 and Spring Boot is a great way of getting up and running quickly with a new web application. However, it can be challenging to fit all the different pieces together in the beginning. In this blog post we will create a new project that is easy to build and run across different environments. The goal is to create a minimal, but runnable, application with as little dependencies and setup as possible. You can then start expanding the application however you see fit.

We will create the Angular2 application using angular-cli. This allows us to easily generate a new project with a clear structure. This will also make it easy to add new elements to our Angular2 application. When adding new elements with angular-cli, we will maintain the same structure and wire the new elements together automatically. Angular-cli is an npm module, so it requires Node and npm to install and run. Make sure to install a recent version of both of these applications before continuing with the steps below. We will use Maven as the overall build manager for our application.

The steps should be easy to follow and will not require a lot of work. However, you can get the result directly in this GitHub repository if you want to. There is a seperate commit for every step.

Step 1: Generate a new Spring Boot project

The first step is to generate a new Spring Boot project at https://start.spring.io. I’ve used the values in the screenshot below. Of course you can use your own group and artifact ids. We need at least the Web plugin to let Spring Boot serve the Angular2 application. If you already know you need more dependencies for your project, feel free to add them.

Click on Generate Project to download the zip file with your new Spring Boot project. Extract the zip file somewhere on your computer. Then open a command prompt and go to the newly created project directory.

Step 2: Split the project into seperate modules

We will want to use seperate Maven modules for the frontend and backend. Let’s start by creating the correct directory structure and copying the pom file.

Edit pom.xml in the top level project directory and make it look like this:

Next, edit pom.xml in the backend directory and make it look like this:

Finally, copy the pom.xml from the backend directory to the frontend directory and edit it to look like this:

Step 3: Add the Angular2 application to the project

If angular-cli is not installed on your system already, use npm to install it now.

To keep the blog post readable, I’m not showing the output of the command. You can ignore any warnings about optional dependencies. The -g flag tells npm to install it globally. This means you can run the command ng from the command line anywhere on your computer. Let’s use angular-cli to generate our Angular2 application in the frontend\src\main\frontend directory.

We just told angular-cli to generate a new project. We let it skip creating a git repository, because we are not in the top level directory of our project. We specified that the output directory should be frontend and called the new application ng2boot. We chose src\main\frontend to prevent maven from putting the source files, including the node_modules directory, in our jar.

Step 4: Configure Maven to build the Angular2 application

We will use the frontend-maven-plugin to build the Angular 2 application with Maven. First, let’s add the plugin to the fronted pom in the build/plugins section.

We specify the node and npm versions and the working directory in the configuration section. We also add three executions. The first execution downloads and installs node and npm to the directories node and node_modules. Npm will download a lot of packages, so add both directories to the ignore list of your version control system. The second execution runs npm install in the working directory to download all npm dependencies of our project. The third execution runs npm run build in the working directory to build the Angular2 application.

By default, angular-cli will write the final Angular2 application in the src\main\frontend\dist directory. We can adhere to the Maven standard directory layout better by configuring angular-cli to write it to the target directory. This will also delete the built application, along with all other build artifacts, when we run mvn clean. Edit .angular-cli.json and change the outDir in the apps section.

Step 5: Let Spring Boot serve the Angular2 application

Maven will now build (and clean) the Angular2 application, but it will not end up in our final jar. Spring Boot will serve static content from a number of directories on the Java classpath. So we have to make sure that the Angular2 application ends up in one of those directories. Files on the classpath that are not Java classes, are known as resources. Maven copies all resources (normally found in src\main\resources) into the final jar. Add the packaged Angular2 application to the resources by adding the snippet below to the build section in pom.xml. The given targetPath will put it in /static on the classpath and Spring Boot will serve it from there.

Because the Spring Boot backend is in another module, we will need to add a dependency to the Angular2 application. Edit the backend pom file and add the following to the list of dependencies.

Step 6: Fire it up!

We are now ready to build and run our application. From the top level directory of our project, run:

Wait for the application to start and then point your browser to http://localhost:8080

Angular2 application served by Spring Boot

If you have configured everything properly, your application should look just like the above image. If it doesn’t, have a look at the GitHub repository which has the finished application in it. And of course, don’t hesitate to leave a reply if you’re having trouble getting the application to build or start.

Step 7: Using the angular-cli development server with your Spring Boot backend

One of many nice features of angular-cli is the development server. It will serve the Angular2 application, just like Spring Boot. However, every time we save a source file, it will automatically rebuild the application and refresh the browser.

There is one problem though. Maven (running our backend) and the development server (running our frontend) are seperate processes listening on seperate ports. This prevents Angular2 from making backend requests because it violates the Same Origin Policy of our web browser. Web browsers only allow backend requests to the same origin that the web application making the requests was downloaded from.

Thankfully, we can let angular-cli act as a proxy for our Spring Boot backend. The Angular2 application will send backend requests to thedevelopment server, which will forward them to Spring Boot. Now, the Angular2 application can make backend requests to the same origin it came from.

Edit package.json and change the start script to add the proxy configuration.

The start script now references proxy.conf.json. Create that file, with the following content:

This configuration assumes all backend requests will be made to (sub paths of) /api. You can of course choose any url you like. Now, when you run npm start in the frontend\src\main\frontend directory, the development server will run your Angular2 application. It can be reached at http://localhost:4200. Don’t forget you have to start your backend seperately. You can do this by running mvn spring-boot:run in the backend directory.

I hope you enjoyed this blog post. If you found it useful, or if you have any questions, please let me know by leaving a reply. Happy coding!

86 thoughts on “Angular2 and Spring Boot: Getting Started

  1. Hi Jeroen! First of all, thank you for the great post! It helped me a lot just on the eve of the new year :-) But I had one problem: I have springboot back-end on myip:8080 and front-end on myip:4200, My back-end started on tomcat container with context name /ng2boot and in my angular app I have base href /ng2boot to make it work together, also in proxy.conf.json “target”: “http://myip:8080/ng2boot” and in package.json “start”: “ng serve –proxy-config proxy.conf.json”, I call backend from service by private testDataUrl: string = ‘/backend/test’ but I got 404 because in console there is zone.js:1645 GET myIp:4200/backend/test 404 (Not Found). I dont understand what is wrong with proxying requests, have you any suggestions what I do wrong? Thanks in advance!

    • Hi,

      Nice to know my post has been helpful :-)

      It looks like there is a wrong path somewhere in your application. Could you please post the entire contents of your proxy.conf.json?

  2. Great tutorial, this has helped us so much in our time of need :)

    Thank you!

    By the way I’ve noticed that there has been some sort of breaking change in a library on the front end, and to fix it I had to upgrade angular-cli and its dependencies. I think your version on Github will have this issue. You’ll see an error about listlazyroutes not being defined when building.

    Thanks again,
    Kim

    • Hi Kim,

      Thank you very much for pointing out the error. I actually ran into the same problem at my client project but never realised it would also affect my example here. I updated the code on Github so it builds again. I rebased master so the commits still correspond to the steps in the blog.

      Regards,
      Jeroen

  3. This is the solution I was looking for!! Many post I have seen use node js as Backend but here we can use Spring Boot.

  4. Hi Jeroen! In my project uses war-packaging and context path, something like localhost:8080/application/. Please advise the way of integration Angular2 front-end into this back-end! It turns out the confusion in resources due the entry point of context name of tomcat application. In the mode of development I have to fix some points that need to return back again when I need to prepare all tohether for packaginig in war :-( Is there a way to avoid such problems? Thanks…
    By the way, the same project works perfectly when packaged in .jar and has no context name and base href..

  5. Hi Jeroen:
    Thx for the help. I used to combine this two but failed.
    Step by step with your article, now work fine.
    But how to update frontend code? I changed app.component.ts’s title variable , but it still show default “app works!”
    I mvn clean install and spring boot again, but still can’t get any update.
    Help!

    • Hi Noah,

      That is really weird. If you are using the dev server by connecting to localhost:4200, you don’t even need to recompile or restart anything. It just updates as soon as you save the file.

      What are you using to edit the code? Are you sure you are editing the file you are running? Are you sure the changes you made were saved to disk?

      • Hi Jeroen,
        Thx for replying so fast. localhost:4200 now works fine.

        But I am wondering should localhost:8080 keep up-to-date ? Or just test my code with localhost:4200 and make mvn install when publish to localhost:8080. Which port is for the user?

        Sorry, just a beginner hope the questions not too dump :O

        • I normally use the development server at port 4200 because it automatically reloads the changes I make to the frontend code.

  6. Hey man

    I really want to be able to package the backend and frontend into a single jar, and also run them with the same command.

    Is this possible? Currently it’s only possible to start the backend and the frontend seperately.

    • The frontend is actually packaged into the backend jar. You can simply start the backend and go to http://localhost:8080. The development server at port 4200 is optional. It just makes it easier to develop the frontend, because all changes are reloaded automatically.

      • Thanks for the reply

        I followed your instructions, and packaged the app like you said, but when I run localhost:8080, I only get the Json from the backend.

        What am I doing wrong?

        • What commands are you executing and what output do you see?

          Are you using the code from my Github repository or your own?

          • Hi

            I was using my own code. Turns out it was application specific problems that stopped it from working. It’s working now, thanks!

            One other question. I see that the frontend folder is quite dense. Is there a way to make it simpler or is the structure necesarry?

          • I did not change the structure of the frontend directory after generating it with angular-cli. This way, when there’s a new version of angular-cli, I just generate a new directory, copy it over my current directory and use git to revert some of the changes and I’m done.

            I’m sure it’s possible to change the structure, you may need to adjust a few paths in some configuration files.

  7. can you please provide some info on what commands to run when the development is done and one is ready to get all the changes in development mode to prod mode, how will the development changes be copied to maven generated files.?

    when i again did mvn clean install, it still shows the initial page only, and when i am running via npm start on the dev server all my dev changes are there, so wanted to know what to do to get those changes on mvn install.

    • My first guess would be that you ran mvn clean install in the backend directory instead of in the top level directory of the project.

      • that was it…!! excellent post by the way.. helps save a ton of time while figuring out where to get started with angular and java… this saved a great deal of time.. i was up and running in 20 mins with this tutorial..!! apologies for the late complements! thank you!

  8. Hi again.

    I am trying to package this into a war file instead of a jar file. However, when I run the war on a Tomcat server. it can’t find any js or css files.

    Do you have any idea what I would need to change in order to make it see these files?

  9. Why would you convert the angular-cli project into a maven project. Just use a normal non-maven frontend project and use maven-frontend-plugin in the backend project to build the frontend directory and copy files to your static folder.
    Why mix up a .js project with a maven project?

  10. Hello Jeroen.
    Very good job!!!
    Can you write an article “How create CRUD using Spring boot and Angular2” ? It will be very helpful post. Please )))

  11. Thank you for this, it is incredibly helpful for someone who is just getting started with AngularJS (like me).

    I did have a question though. How do I add Maven dependencies to the frontend? I want to be able to reference some third-party Java classes from the app.component.ts. I added the dependency and corresponding repository location to the frontend’s pom. Doing a mvn clean install I can see that the dependency is being downloaded. But where is it stored? In my local m2? How do I reference its classes from, say, app.component.ts?

    Thanks again. I hunted around for 1.5 days and this post was the first helpful resource I found.

    • Please note that app.component.ts is a TypeScript file, so it won’t be possible to use Java classes from there.

      What are you trying to accomplish? Maybe I can point you in the right direction.

  12. Hi, great post…hoping to get this to work, but I am getting the following error when trying to build the frontend…any ideas?
    Thanks in advance…

    [INFO] Reactor Summary:
    [INFO]
    [INFO] parent ……………………………………… SUCCESS [ 0.231 s]
    [INFO] frontend ……………………………………. FAILURE [ 0.821 s]
    [INFO] backend …………………………………….. SKIPPED
    [INFO] ————————————————————————
    [INFO] BUILD FAILURE
    [INFO] ————————————————————————
    [INFO] Total time: 1.537 s
    [INFO] Finished at: 2017-02-16T15:51:15-07:00
    [INFO] Final Memory: 16M/219M
    [INFO] ————————————————————————
    [ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.3:install-node-and-npm (install node and npm) on project frontend: Could not download Node.js from: https://nodejs.org/dist/v6.9.1/win-x64/node.exe: Could not download https://nodejs.org/dist/v6.9.1/win-x64/node.exe: sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target -> [Help 1]
    [ERROR]

  13. Hey, I am having trouble!!!
    I tried your solution with simple spring boot application it works fine.
    In fact this is the solution I wanted.
    However, I started adding REST controller with some rest-endpoints, the fronted stopped working. I am getting error page on localhost:8080. and when I remove the rest controller part, it again works fine.
    I think dispatcher is unable to resolve the path in case we add rest controller.
    A quick help is appreciated! Thanks in advance…

      • I am getting this, when I ping on ‘localhost:8080/’ after adding rest controller, which was previously working perfectly on the same address.

        Whitelabel Error Page

        This application has no explicit mapping for /error, so you are seeing this as a fallback.

        Fri Feb 17 16:25:57 IST 2017
        There was an unexpected error (type=Not Found, status=404).
        No message available

  14. Hi Jeroen,
    This is really helpful…you have saved many ppl untold number of hours…

    I am struggling with the last bit about setting up the proxy. When I go to http://localhost:4200/, the app live updates as it should, but http://localhost:8080/ does not…It should, shouldn’t it? That’s the point of the proxy?

    I didn’t modify the path at all, so maybe the /api is what is throwing me off…I tried changing the contextPath=/api, but then angular didn’t load at all…and tried setting the proxy.conf.json path to / and also no luck

    Any insight into what behavior I should see and what might be going on?

    thanks again
    -Todd

    • Hi Todd,

      The behaviour you describe seems correct to me. The point of the proxy is to serve the backend(running at port 8080) from the development server(running at port 4200). This way, all content is served from the development server(port 4200) and your browser will not complain about cross origin requests. The backend server does not live update, so changes to the backend require a restart.

      • I see, I think I had expected port 8080 to be my entry into the app, but for development, you’re saying it’s 4200, and then for prod it is 8080?
        makes sense (I think)
        thanks again

  15. Hello,

    Thanks for your tutorial, however I have a problem, I get to do routing on localhost: 4200 however I have the impression that the back take over the localhost 8080 and I arrive on a 404 error.

    • Hi,

      Are you using html5 routing? Your app will then request urls that Spring Boot doesn’t know about, so it will result in a 404. My colleague wrote about how to support html5 routing in his blog post about integrating an angular2 app in a Gradle build over here . Have a look at the section “Support Angular HTML5 mode”.

  16. Hi, Jeroen!
    Thanks a lot for your post.
    Everything is great but i’ve got one issue about http service.
    When I click the button first time, response is undefined, but then everything works fine.
    My code:
    Raised button

    import { Component } from ‘@angular/core’;
    import { TestService } from ‘./test.service’
    import { Resp } from ‘./resp’
    @Component({
    selector: ‘app-root’,
    templateUrl: ‘./app.component.html’,
    styleUrls: [‘./app.component.css’],
    providers: [ TestService ]
    })

    export class AppComponent {
    resp: Resp;
    constructor(private testService: TestService){}

    onClick(): void {
    this.testService.getTest().then(r => this.resp = r);
    console.log(this.resp);
    }

    }

    import { Injectable } from ‘@angular/core’;
    import { Http, Response } from ‘@angular/http’;
    import { Observable } from ‘rxjs/Observable’;
    import { Resp } from ‘./resp’
    import ‘rxjs/add/operator/toPromise’;

    @Injectable()
    export class TestService {
    private url = ‘/api/test’;

    constructor(private http:Http) { }

    getTest() : Promise {
    return this.http.get(this.url)
    .toPromise()
    .then(response => response.json() as Resp)
    .catch(this.handleError);
    }

    private handleError(error: any): Promise {
    console.error(‘An error occurred’, error); // for demo purposes only
    return Promise.reject(error.message || error);
    }
    }

    Thanks in advance.

  17. Hi, Jeroen!
    Great tutorial, this has helped us so much …!

    We combined both forntend and banckend as per your instructions .
    if we run the spring boot application. We are able access spring rest api using postman .I am not able to access http://localhost:8080/.
    I am expecting to see my agular app.
    nothing is show up.

    angular-cli.json

    {
    “project”: {
    “version”: “1.0.0-beta.18”,
    “name”: “frontend”
    },
    “apps”: [
    {
    “root”: “src”,
    “outDir”: “../../../target/frontend”,
    “assets”: [
    “assets”,
    “favicon.ico”
    ],
    “index”: “index.html”,
    “main”: “main.ts”,
    “test”: “test.ts”,
    “tsconfig”: “tsconfig.json”,
    “prefix”: “app”,
    “mobile”: false,
    “styles”: [
    “styles.css”
    ],
    “scripts”: [],
    “environments”: {
    “source”: “environments/environment.ts”,
    “dev”: “environments/environment.ts”,
    “prod”: “environments/environment.prod.ts”
    }
    }
    ],
    “addons”: [],
    “packages”: [],
    “e2e”: {
    “protractor”: {
    “config”: “./protractor.conf.js”
    }
    },
    “test”: {
    “karma”: {
    “config”: “./karma.conf.js”
    }
    },
    “defaults”: {
    “styleExt”: “css”,
    “prefixInterfaces”: false,
    “inline”: {
    “style”: false,
    “template”: false
    },
    “spec”: {
    “class”: false,
    “component”: true,
    “directive”: true,
    “module”: false,
    “pipe”: true,
    “service”: true
    }
    }
    }
    package.json

    “scripts”: {
    “ng”: “ng”,
    “start”: “ng serve –proxy-config proxy.conf.json”,
    “lint”: “tslint \”src/**/*.ts\””,
    “test”: “ng test”,
    “pree2e”: “webdriver-manager update”,
    “e2e”: “protractor”,
    “build”: “ng build”
    }

    proxy.conf.json

    {
    “/api”: {
    “target”: “http://localhost:8080”,
    “secure”: false
    }
    }

    Please advise what might be the reason.

    Many thanks,
    Kishore.

  18. hey many thanks for the article.

    Could you please help me also to add security. I want to add security like oath2 and also add more pages to have more options to see for a starter person? :) I know that takes time and I have to dig more for those matters but if you would I think your article would really rock :)

    • Adding security would be a nice follow up to this blog post. If I ever find the time, I think that will be my next subject.

  19. Hello and many thanks for the article. Unfortunately I cannot get the app to run (at the Fire it up! step). Spring serves a static “Loading…” screen from index.html, but no JS-code is loaded later. The only things I did differently when following the tutorial is changing the names of the project and versions of used modules. Also my Angular-CLI version is probably different (latest). Where might be the error?

  20. Hi,
    My back end app implemented in spring boot with spring security. And front end app in angular 2(angular-cli). I’m deploying parent app to tomcat server. I’m unable to render on localhost:4200/dashboard after login(or any other page).

    My proxy.conf.json code:
    {
    “/abc/api”: {
    “target”: “http://localhost:8080”,
    “secure”: false
    }
    }

    Where I’m doing wrong? please suggest me.

    • Hi Anil,

      There was a comment earlier from someone who was trying to run it on Tomcat. Here is what I replied then:

      Just add your context path to the existing proxy path. Using your example of ‘application’, it should look like this:


      {
      “/application/api”: {
      “target”: “http://localhost:8080”,
      “secure”: false
      }
      }

  21. Hi, Jeroen!
    Thanks a lot for your post.

    Step 6: Fire it up! error T_T

    [INFO] Scanning for projects…
    [ERROR] [ERROR] Some problems were encountered while processing the POMs:
    [FATAL] Non-resolvable parent POM for com.jdriven.ng2boot:frontend:0.0.1-SNAPSHO
    T: Failure to find com.jdriven.ng2boot:parent:pom:0.0.1-SNAPSHOT in http://repo1
    .maven.org/maven2 was cached in the local repository, resolution will not be rea
    ttempted until the update interval of central has elapsed or updates are forced
    and ‘parent.relativePath’ points at wrong local POM @ line 11, column 10
    [FATAL] Non-resolvable parent POM for com.jdriven.ng2boot:backend:0.0.1-SNAPSHOT
    : Failure to find com.jdriven.ng2boot:parent:pom:0.0.1-SNAPSHOT in http://repo1.
    maven.org/maven2 was cached in the local repository, resolution will not be reat
    tempted until the update interval of central has elapsed or updates are forced a
    nd ‘parent.relativePath’ points at wrong local POM @ line 11, column 10
    @
    [ERROR] The build could not read 2 projects -> [Help 1]
    [ERROR]
    [ERROR] The project com.jdriven.ng2boot:frontend:0.0.1-SNAPSHOT (D:\SourceCode
    \SpringProject\ng2boot\frontend\pom.xml) has 1 error
    [ERROR] Non-resolvable parent POM for com.jdriven.ng2boot:frontend:0.0.1-SNA
    PSHOT: Failure to find com.jdriven.ng2boot:parent:pom:0.0.1-SNAPSHOT in http://r
    epo1.maven.org/maven2 was cached in the local repository, resolution will not be
    reattempted until the update interval of central has elapsed or updates are for
    ced and ‘parent.relativePath’ points at wrong local POM @ line 11, column 10 ->
    [Help 2]
    [ERROR]
    [ERROR] The project com.jdriven.ng2boot:backend:0.0.1-SNAPSHOT (D:\SourceCode\
    SpringProject\ng2boot\backend\pom.xml) has 1 error
    [ERROR] Non-resolvable parent POM for com.jdriven.ng2boot:backend:0.0.1-SNAP
    SHOT: Failure to find com.jdriven.ng2boot:parent:pom:0.0.1-SNAPSHOT in http://re
    po1.maven.org/maven2 was cached in the local repository, resolution will not be
    reattempted until the update interval of central has elapsed or updates are forc
    ed and ‘parent.relativePath’ points at wrong local POM @ line 11, column 10 -> [
    Help 2]
    [ERROR]
    [ERROR] To see the full stack trace of the errors, re-run Maven with the -e swit
    ch.
    [ERROR] Re-run Maven using the -X switch to enable full debug logging.
    [ERROR]
    [ERROR] For more information about the errors and possible solutions, please rea
    d the following articles:
    [ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/ProjectBuildin
    gException
    [ERROR] [Help 2] http://cwiki.apache.org/confluence/display/MAVEN/UnresolvableMo
    delException

  22. Hi Jeroen,
    Thanks for the awesome article !!

    I have 2 doubts now –
    1. In My system, Node and NPM are already installed. I don’t want them to install again but to use the installed versions of Node and NPM. How will I specify this in my frontend-maven-plugin ?
    2. I am also using Thymeleaf to server the HTML contents. In this case how will I specify the path for my templateUrl in the Angular Component ?

    • Hi Aditya,

      1: That is a feature that has been requested for the frontend maven plugin, but has not been implemented. I would recommend just letting the frontend maven plugin download it. This way, there will be no problems caused by different versions of node or npm if you share your project with other developers.

      2: I did a quick search for using dynamically generated html files in an Angular2 app. I found this example, but it looks really complicated and I wouldn’t recommend it.

  23. Hi, fantastic post, never used angular and it worked immediately.

    The only issue I have is that I am used to running my Spring Boot application during development from the IDE. After this blog however; this works well if I ‘mvn clean package’ and run however if I just ‘mvn clean’ and try to run the main spring boot class, it will throw a ClassNotFound exception.

    I understand that with clean I have removed everything but I also expect that the backend will at least rebuild (as is normal operation)… most likely, being my first ever angular experience, I do not understand something.

    Well done on the blog.

      • Intellij 2016.3.5 I noticed since the post that even when I run a single unit test from Intellij it throws a class not found, empty test suite error… It could be intellij related

        • Resolved… IntelliJ was being funny. I had a word with him (assuming its a he) and he agreed to invalidate the cache and restart! We are now friends!

          • Ah yes, the dreaded IntelliJ cache. Glad tot know it’s working now.

  24. Pingback: 03.13.2017 – 03.17.2017 – gvr4wd

  25. Pingback: O strukturze projektu słów kilka – Devs&Deadlines

  26. [INFO] Using ‘UTF-8’ encoding to copy filtered resources.
    [INFO] Copying 1 resource
    [INFO] Copying 0 resource
    [INFO]
    [INFO] — maven-compiler-plugin:3.1:compile (default-compile) @ backend —
    [INFO] Changes detected – recompiling the module!
    [INFO] Compiling 1 source file to D:\Formation Angular 2\ng2boot\backend\target\c
    lasses
    [INFO] ————————————————————————
    [INFO] Reactor Summary:
    [INFO]
    [INFO] parent …………………………………….. SUCCESS [0.655s]
    [INFO] frontend …………………………………… SUCCESS [40.812s]
    [INFO] backend ……………………………………. FAILURE [0.914s]
    [INFO] ————————————————————————
    [INFO] BUILD FAILURE
    [INFO] ————————————————————————
    [INFO] Total time: 43.022s
    [INFO] Finished at: Tue Mar 21 20:08:18 WET 2017
    [INFO] Final Memory: 17M/491M
    [INFO] ————————————————————————
    [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1
    :compile (default-compile) on project backend: Fatal error compiling: invalid tar
    get release: 1.8 -> [Help 1]
    [ERROR]
    [ERROR] To see the full stack trace of the errors, re-run Maven with the -e switc
    h.
    [ERROR] Re-run Maven using the -X switch to enable full debug logging.
    [ERROR]
    [ERROR] For more information about the errors and possible solutions, please read
    the following articles:
    [ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoExecutionEx
    ception
    [ERROR]
    [ERROR] After correcting the problems, you can resume the build with the command ???

  27. When I push the app in git server and I pull it in another machine, if I execute the command ‘mvn clean install’ I receive an error as following:

    Cannot find module ‘acorn’
    [ERROR] Error: Cannot find module ‘acorn’

    I’ve tried a lot of things like delete node modules and executing ‘npm install –save again’, save depedencies might be instaled globally ?

  28. When I type ‘ng new –skip-git –directory frontend ng2boot’ I get something different to what you show.

    I get what looks like a cmd-line editor open up (like vi but with different cmds.) At the bottom of the screen I get :

    –**-Mg: ng2boot (fundamental)—-Bot

    I have no idea why this is. I installed Node.js with npm and followed the instructions to the tee… until I get the above.

    Any help would be much appreciated.

    • Just an update…
      It appears the command: ‘npm install -g angular-cli’, did not succeed.

      As part of the process, it appears that a link is supposed to be generated to ‘ng’ under the node-modules/angular-cli/bin directory. See snippet:

      C:\ng2boot>npm install -g angular-cli
      C:\Users\Jeroen\AppData\Roaming\npm\ng -> C:\Users\Jeroen\AppData\Roaming\npm\node_modules\angular-cli\bin\ng
      C:\Users\Jeroen\AppData\Roaming\npm
      `– angular-cli@1.0.0-beta.22-1

      So I think what has happened is that when I run ng … it is running some editor I have installed on my machine by default.

      could someone confirm, please: how many commands am I supposed to execute in the above snippet?

      • Hi Jim,

        could someone confirm, please: how many commands am I supposed to execute in the above snippet?

        It is just one command: npm install -g angular-cli

        Are you doing this on Windows or Linux? On windows you can check which executable will run using the “where” command. So if you run where ng it shows the full path of the executable ng. On Linux you can do the same with the “which” command, so which ng

        • Linux.

          I ran ‘which’ and it shows a different directory path to the one in the instructions.

          So it seems that first cmd is not completing as expected.

          • Hi Jim,

            I installed Node.js on my Linux (Ubuntu) server by following these instructions. I ran these commands:
            curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
            sudo apt-get install -y nodejs

            When I tried to install angular-cli, I noticed there has been a change since I wrote my blog, I’ll update it when I have more time. I ended up installing it with this command:
            sudo npm install -g @angular/cli

            The command which node npm ng gives this output:
            /usr/bin/node
            /usr/bin/npm
            /usr/bin/ng

            /usr/bin/ng is a symbolic link.
            Running ls -l /usr/bin/ng gives this output: lrwxrwxrwx 1 root root 39 Mar 24 06:24 /usr/bin/ng -> ../lib/node_modules/@angular/cli/bin/ng

            If you already have an executable named ng on your $PATH you could also run ng by going around the symbolic link in /usr/bin and run /usr/lib/node_modules/@angular/cli/bin/ng instead.

      • Right…

        Hurdle cleared.

        Thanks for your attention and assistance, Jeroen. I followed the instructions at then end of that link and I have an ng executable which doesn’t open an editor.

        I have another query but its not related so will start a new thread.

  29. Hello,
    The application works fine, but I create one restController on backend and maped it to:
    @RequestMapping(value = “/test”)
    public String HelloWorld() {
    return “Hello world!”;
    }
    When I try to access url localhost:8080/test I have the following message error:

    Whitelabel Error Page

    This application has no explicit mapping for /error, so you are seeing this as a fallback.

    How can I acess my rest endpoint on backend?

    • Hi Mauricio,

      I’m not sure what went wrong there. Are there any more specific error messages or stack traces in your console?

      I wrote my own Hello World controller. WordPress won’t format code properly, so I saved it as a gist here

      When I visit the url with my browser, it seems to work:

      Hello World Controller

  30. Hey Jeroen

    Great blog post. Thank you so much for the knowledge share. I am new to Angular2 and Spring boot. I was able to set up and run everything with in 30 mins.

    However I a question for you. So far, we have been displaying static content on the Angular2 front end. If I were to fetch data from the back end and display on the front end, is adding a new RestController on the back end and make a rest call from front end is the only way to go about it??
    Please advise. if you can, point me in the right direction. Much appreciated.

    Thanks again.

    • Hi Chandu,

      …is adding a new RestController on the back end and make a rest call from front end is the only way to go about it?

      Pretty much. It doesn’t have to be REST though, you could also consider GraphQL for instance. Ofcourse you can communicate with your backend in any way you like, but by choosing a popular method you can be pretty sure it will be well supported by Angular2 and supporting libraries. I would really avoid rendering any html or javascript dynamically on the server side, because that would require that you keep user state in your backend.

  31. The mvn install is working but not the mvn run:

    Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:1.4.2.RELEASE:run (default-cli) on project parent: Unable to find a suitable main class, please add a ‘mainClass’ property -> [Help 1

    In response to which I added:

    com.mycompany.ng2boot.Ng2bootApplication
    … to the parent pom.xml

    But it still I get the same message. Moving the property into backup’s pom.xml didn’t seem to make a difference either.

    Any ideas?

Leave a Reply

Your email address will not be published. Required fields are marked *