How to integrate Angular 4 with SpringBoot RestApi using SpringToolSuite

Angular 4 is the next version of Angular2 that comes with almost everything you need to build Across All Platforms frontend web or mobile apps with high speed & performance. So in the tutorial, JavaSampleApproach will guide you through the steps of integrating Angular 4 with SpringBoot Web App and SpringToolSuite for development.

Angular 6:
– How to Integrate Angular 6 & SpringBoot 2.0 RestAPI – SpringToolSuite

Contents

I. Technologies
II. Integrate Angular 4 with Spring Boot WebApp and SpringToolSuite

I. Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.1.RELEASE
– Spring Boot: RELEASE
– Angular 4
– Node.js

II. Integrate Angular 4 with Spring Boot WebApp and SpringToolSuite

1. Install Node.js for Angular

Firstly, checking whether or not you have Node.js installed, by command: node -v & npm -v. If the command goes unrecognized, we must install Node.js.
– Go to: nodejs.org. Download Node.js installer, the tutorial uses version: v7.10.0. We got a node-v7.10.0-x64.msi file, double click on it and follow the guides to setup Node.js, successfully result:

angular4 - springboot springtoolsuite - install nodejs

– Open cmd, checking Node.js by commandline: node -v & npm -v:

angular4 - springboot springtoolsuite - check nodejs

2. Install Angular-CLI

– Using commandline npm install -g @angular/cli:

angular4 - springboot springtoolsuite - install Angular-CLI

– Check Angular-CLI after setup by commandline ng -v:

angular4 - springboot springtoolsuite - install Angular-CLI - check angular cli

The CLI will install an Angular 4 project by default from March 24, 2017, no need specify the “–ng4” flag.

3. Setup SpringBoot Web server project

– Using SpringToolSuite, create a simple SpringBoot Restful Webservice. Open pom.xml file, add web dependency:

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

– Create a simple RestController:

package com.javasampleapproach.restful.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class WebRestController {

	@RequestMapping("/api/hi")
	public String hi() {
		return "Hello World from Restful API";
	}
}

package com.javasampleapproach.restful.controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

@RestController

public class WebRestController {

@RequestMapping("/api/hi")

public String hi() {

return "Hello World from Restful API";

}

4. Create Angular 4 client project

Location of the SpringBoot project at: C:\Users\User\workspace\SpringBootAngular4.
Now, open cmd, cd to C:\Users\User\workspace\".
– Start a new angular 4 project by commandline: ng new angular4-client:

angular4 - springboot springtoolsuite - install Angular4-client

To check angular version, go to angular4-client folder, type: ng -v:

angular4 - springboot springtoolsuite - install Angular4-client - version

Start angular4-client project by cmd npm start, results:

angular4 - springboot springtoolsuite - start Angular4-client

angular4 - springboot springtoolsuite - Angular4-client - working

5. Import Angular4 client project to SpringToolSuite

Open SpringToolSuite, go to Import -> General -> Projects from Folder or Archieve, press Next:

import angular4 client to springtoolsuite

Press Finish, Angular4 client is imported:

angular4 client project

To clean the sourcecode in STS, we need to remove node_modules by following the steps:
– Right click on angular4-client project, choose Properties, then choose: Resource -> Resource Filter.
– Press Add Filter…, choose Filter Type: Exclude all, Applies to: Files and folders, and check All children (recursive), with File and Folder Atributes, we specify node_modules:

angular4 client - exclude node_modules

Press OK. Then press Apply, result:

angularjs4 client after filter node_modules

-> Now node_modules is already removed from the SpringToolSuite.

It’s ready to modify something with Angular4-client project:
– Open /src/app/app.component.ts, edit:

export class AppComponent {
  title = 'JavasampleApproach HelloWord Angular4 App';
}

export class AppComponent {

title = 'JavasampleApproach HelloWord Angular4 App';

}

– Open src/app/app.component.css, add:

h1 {
  color: blue;
  font-size: 150%;
}

h1 {

color: blue;

font-size: 150%;

}

Now, start angular4-client project with STS:
– Go to Window -> Show View -> Other, search and choose Terminal.
– Then launch a Local Terminal, cd to C:\Users\User\workspace\angular4-client. Press command npm start to launch the angular4-client, results:

start angular4 client with STS terminal

angular4 app after some edit

6. Integrate SpringBoot server and Angular 4 client

Up to now, Angular4-Client and SpringBoot server work independently on ports 8080 and 4200.
Goal of below integration: the client at 4200 will proxy any /api requests to the server.

Step to do:
– Create a file proxy.conf.json under project angular4-client folder with content:

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

{

"/api": {

"target": "http://localhost:8080",

"secure": false

}

– Edit package.json file for “start” script:

...
"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
},
 ...

...

"scripts": {

"ng": "ng",

"start": "ng serve --proxy-config proxy.conf.json",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

...

– Build and run the RestfulService project with SpringBoot App mode at port 8080. And run angular4-client at port 4200.
Make a request http://localhost:4200/api/hi, result:

result - angular4 client proxy server

7. Deploy SpringBoot server with Angular4 client

Build angular4 client with command ng build --env=prod:

Result is a dist folder:

build angular4 client - result

We have 2 approaches to deployment Spring Boot server with angular4 client:
– Manually copy all files from dist folder to /src/main/resources/static folder of SpringBoot server project.
– Using Maven plugin to copy all files from dist folder to /src/main/resources/static folder of SpringBoot server project.

<plugin>
<artifactId>maven-resources-plugin</artifactId>
<executions>
      <execution>
          <id>copy-resources</id>
          <phase>validate</phase>
          <goals><goal>copy-resources</goal></goals>
          <configuration>
              <outputDirectory>${basedir}/target/classes/static/</outputDirectory >
              <resources>
                  <resource>
                      <directory>${basedir}/../angular4-client/dist</directory >
                  </resource>
              </resources>
          </configuration>
      </execution>
</executions>
</plugin>

<artifactId>maven-resources-plugin</artifactId>

<id>copy-resources</id>

<phase>validate</phase>

<goals><goal>copy-resources</goal></goals>

<outputDirectory>${basedir}/target/classes/static/</outputDirectory >

<directory>${basedir}/../angular4-client/dist</directory >

</resource>

</resources>

</configuration>

</execution>

</executions>

</plugin>

Now build and run the SpringBoot server again with commands:
– Build: mvn clean install
– Run: mvn spring-boot:run

Then make some requests:
– http://localhost:8080/, result:

springboot service - home after deployment with angular4

– http://localhost:8080/api/hi, result:

after deploy angular4 and backend service

>>> Done! Now you can start to develop Angular4 with SpringBoot and SpringToolSuite! 🙂

By grokonez | May 15, 2017.

Last updated on June 10, 2018.

Post Tags

78 thoughts on “How to integrate Angular 4 with SpringBoot RestApi using SpringToolSuite”

enhsuld says:

May 15, 2017 at 4:45 pm

hello.., demo project?

Reply
1. Chennaiyan says:
  
  February 19, 2018 at 6:46 am
  
  nice to build project
  
  Reply

Hi I have been going through the steps and copied it but do not get loaded into angular project index page; get a white error page.

Hi,

Had you met the problem at step 7: Deploy SpringBoot server with Angular4 client?

Here, We have 2 approaches to deployment Spring Boot server with angular4 client:
1. Manually copy all files from dist folder to /src/main/resources/static folder of SpringBoot server project.
2. Using Maven plugin to copy all files from dist folder to /src/main/resources/static folder of SpringBoot server project.

I think you have mistake with approach 2, So please double check the ${basedir}, or replace it with the absolute path for double checking,

          <configuration>
              <outputDirectory>${basedir}/target/classes/static/</outputDirectory >
              <resources>
                  <resource>
                      <directory>${basedir}/../angular4-client/dist</directory >
                  </resource>
              </resources>
          </configuration>

<outputDirectory>${basedir}/target/classes/static/</outputDirectory >

<directory>${basedir}/../angular4-client/dist</directory >

</resource>

</resources>

</configuration>

Regards,
JSA

Jam says:

July 10, 2017 at 2:21 pm

i got my project loaded into angular project index page, but no styling is applied. Otherwise the http://localhost:8080/api/hi gives me 404 error.

Reply
1. JavaSampleApproach says:
  
  July 11, 2017 at 9:22 am
  
  Hi Jam,
  
  I see you had met the same mistakes with other guys!
  Be careful when doing each steps on the tutorial!
  
  See the above comment: mistakes at step 7 or adding ../angular4-client/dist ! I think it helps you!
  
  Good Luck!
  
  Reply

AVINASH FRANCIS CULAS says:

August 1, 2017 at 6:37 am

Can we implement this approach in production environment, please help we are in the design phase of an angular 4 spring boot project

Reply
Santhi says:

August 2, 2017 at 12:09 pm

This is greatly useful.. Thank you

Reply
JavaSampleApproach says:

August 4, 2017 at 2:20 pm

Please be noticed that we had made a supporting video guide: https://youtu.be/Ps-7ZV8YpI0.

Reply
1. Mohan Gurjar says:
  
  March 21, 2018 at 6:21 am
  
  Thanks a lot. It’s very useful. Please provide any link for a CRUD application in the same architecture using single port
  
  Reply
ghostwriter9151 says:

September 11, 2017 at 11:35 am

Hello! I can’t import the angular project in the latest STS.
The project is not shown in the import dialog… Any guess?

Reply
1. JavaSampleApproach says:
  
  September 11, 2017 at 11:40 am
  
  Please give me your STS version?
  Or You can try using STS Version 3.8.1.RELEASE.
  
  Reply

Hi There,

Hi There Angular 4 project is running on Spring boot now.
Can you advice me how can I integrate it with Spring Security?

If I give in configure method that authenticate (/**) , then it should go to login page which angular 4 is made and authenticate the credentials using spring security, how can I achieve this?

Regards
Lokesh

Hello Lokesh,

For security, You can follow the guide of tutorial:
Spring Security – Config Security for Web MVC by Spring Boot

Details:
– Add security dependency:

<dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-security</artifactId>
 </dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-security</artifactId>

</dependency>

– Define a customize login.html page and use a @RequestMapping(value={“/login”}):

@RequestMapping(value={"/login"})
public String login(){
   return "login";
}

@RequestMapping(value={"/login"})

public String login(){

return "login";

}

– Configure WebSecurityConfigurerAdapter:

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
          .authorizeRequests()
          .antMatchers("/","/home").permitAll()
          .antMatchers("/api/**")
          .anyRequest().authenticated()
          .and()
          .formLogin()
          .loginPage("/login")
          .permitAll()
          .and()
          .logout()
          .permitAll();
        http.exceptionHandling().accessDeniedPage("/403");
    }

@Configuration

public class SecurityConfig extends WebSecurityConfigurerAdapter {

@Override

protected void configure(HttpSecurity http) throws Exception {

http

.authorizeRequests()

.antMatchers("/","/home").permitAll()

.antMatchers("/api/**")

.anyRequest().authenticated()

.and()

.formLogin()

.loginPage("/login")

.permitAll()

.and()

.logout()

.permitAll();

http.exceptionHandling().accessDeniedPage("/403");

}

Please let me know if you done!

Regards,

I speak French so sorry for my English.
I have some problems when I want to launch starter project with spring boot app.
I’m on mac os.

I have this error :

SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".
SLF4J: Defaulting to no-operation (NOP) logger implementation
SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details.
Exception in thread "main" java.lang.NoClassDefFoundError: ch/qos/logback/classic/Level
	at org.springframework.boot.logging.logback.LogbackLoggingSystem.(LogbackLoggingSystem.java:66)
	at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
	at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
	at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
	at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
	at org.springframework.boot.logging.LoggingSystem.get(LoggingSystem.java:170)
	at org.springframework.boot.logging.LoggingSystem.get(LoggingSystem.java:160)
	at org.springframework.boot.logging.LoggingApplicationListener.onApplicationStartingEvent(LoggingApplicationListener.java:229)
	at org.springframework.boot.logging.LoggingApplicationListener.onApplicationEvent(LoggingApplicationListener.java:209)
	at org.springframework.context.event.SimpleApplicationEventMulticaster.doInvokeListener(SimpleApplicationEventMulticaster.java:172)
	at org.springframework.context.event.SimpleApplicationEventMulticaster.invokeListener(SimpleApplicationEventMulticaster.java:165)
	at org.springframework.context.event.SimpleApplicationEventMulticaster.multicastEvent(SimpleApplicationEventMulticaster.java:139)
	at org.springframework.context.event.SimpleApplicationEventMulticaster.multicastEvent(SimpleApplicationEventMulticaster.java:122)
	at org.springframework.boot.context.event.EventPublishingRunListener.starting(EventPublishingRunListener.java:69)
	at org.springframework.boot.SpringApplicationRunListeners.starting(SpringApplicationRunListeners.java:48)
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:292)
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:1118)
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:1107)
	at com.example.demo.Angularstarterproject1Application.main(Angularstarterproject1Application.java:10)
Caused by: java.lang.ClassNotFoundException: ch.qos.logback.classic.Level
	at java.net.URLClassLoader.findClass(URLClassLoader.java:381)
	at java.lang.ClassLoader.loadClass(ClassLoader.java:424)
	at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:335)
	at java.lang.ClassLoader.loadClass(ClassLoader.java:357)
	... 19 more

SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".

SLF4J: Defaulting to no-operation (NOP) logger implementation

SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details.

Exception in thread "main" java.lang.NoClassDefFoundError: ch/qos/logback/classic/Level

at org.springframework.boot.logging.logback.LogbackLoggingSystem.(LogbackLoggingSystem.java:66)

at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)

at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)

at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)

at java.lang.reflect.Constructor.newInstance(Constructor.java:423)

at org.springframework.boot.logging.LoggingSystem.get(LoggingSystem.java:170)

at org.springframework.boot.logging.LoggingSystem.get(LoggingSystem.java:160)

at org.springframework.boot.logging.LoggingApplicationListener.onApplicationStartingEvent(LoggingApplicationListener.java:229)

at org.springframework.boot.logging.LoggingApplicationListener.onApplicationEvent(LoggingApplicationListener.java:209)

at org.springframework.context.event.SimpleApplicationEventMulticaster.doInvokeListener(SimpleApplicationEventMulticaster.java:172)

at org.springframework.context.event.SimpleApplicationEventMulticaster.invokeListener(SimpleApplicationEventMulticaster.java:165)

at org.springframework.context.event.SimpleApplicationEventMulticaster.multicastEvent(SimpleApplicationEventMulticaster.java:139)

at org.springframework.context.event.SimpleApplicationEventMulticaster.multicastEvent(SimpleApplicationEventMulticaster.java:122)

at org.springframework.boot.context.event.EventPublishingRunListener.starting(EventPublishingRunListener.java:69)

at org.springframework.boot.SpringApplicationRunListeners.starting(SpringApplicationRunListeners.java:48)

at org.springframework.boot.SpringApplication.run(SpringApplication.java:292)

at org.springframework.boot.SpringApplication.run(SpringApplication.java:1118)

at org.springframework.boot.SpringApplication.run(SpringApplication.java:1107)

at com.example.demo.Angularstarterproject1Application.main(Angularstarterproject1Application.java:10)

Caused by: java.lang.ClassNotFoundException: ch.qos.logback.classic.Level

at java.net.URLClassLoader.findClass(URLClassLoader.java:381)

at java.lang.ClassLoader.loadClass(ClassLoader.java:424)

at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:335)

at java.lang.ClassLoader.loadClass(ClassLoader.java:357)

... 19 more

JavaSampleApproach says:

September 18, 2017 at 11:49 am

What’s your STS version?

Your error is clear: java.lang.ClassNotFoundException: ch.qos.logback.classic.Level

Please base on it for tracking!

Reply
1. jeremy says:
  
  September 18, 2017 at 5:43 pm
  
  hi,
  my version of STS is 3.9.0.RELEASE.
  
  i just create the project and start with spring boot app.
  i dont understand why log4j make some problems, i dont use it
  
  Reply

hanz says:

September 29, 2017 at 2:37 pm

hi ,
i just follow the tuto but im blocked in step 6 , the server turn with angular but when i try to run the SpringBootAngular i get this error
“”” Exception in thread “main” java.lang.NoClassDefFoundError: org/springframework/util/ClassUtils “””
any help 🙂

Reply
1. JavaSampleApproach says:
  
  September 30, 2017 at 5:45 am
  
  Hi,
  
  The problem is related with your development environment for creating a SpringBoot project.
  
  So you can double check your STS version, then re-create a new SpringBoot project with simple “Hello world” RestController.
  
  Reply
Yekalyvan says:

October 5, 2017 at 7:37 am

I think we don’t need a proxy.conf.json file…it’s working fine for me..

Reply
1. JavaSampleApproach says:
  
  October 5, 2017 at 2:29 pm
  
  Hi Rubysavach,
  
  What step in the tutorial do you mention that suites for your case?
  
  Please give me the way Angular’s client can know what ‘/apis’ of servers (ip + port) for calling without proxy.conf.json file, Rubysavach?
  
  Regards,
  
  Reply
hussem says:

October 17, 2017 at 12:08 pm

Thank you very much.
I have learned a lot with your few valuable steps and line.

Reply

I have the following error on the local terminal:

C:\Users\jwm19_000\Documents\STS\SpringBoot-angular>mvn
'mvn' is not recognized as an internal or external command,
operable program or batch file.


C:\Users\jwm19_000\Documents\STS\SpringBoot-angular>

C:\Users\jwm19_000\Documents\STS\SpringBoot-angular>mvn

'mvn' is not recognized as an internal or external command,

operable program or batch file.

C:\Users\jwm19_000\Documents\STS\SpringBoot-angular>

—

And also:

C:\Users\jwm19_000\Documents\STS\angular4-client>npm start
'npm' is not recognized as an internal or external command,
operable program or batch file.

C:\Users\jwm19_000\Documents\STS\angular4-client>4

C:\Users\jwm19_000\Documents\STS\angular4-client>npm start

'npm' is not recognized as an internal or external command,

operable program or batch file.

C:\Users\jwm19_000\Documents\STS\angular4-client>4

What I am doing wrong?

JavaSampleApproach says:

October 31, 2017 at 5:23 am

Hi Justin,

Your problem is related with your mvn setting and npm setting in STS.
Please double check it!

Regards,
JSA

Reply
1. Justin says:
  
  November 1, 2017 at 3:24 am
  
  I see, do you know what the settings should be? I thought I followed your instructions, but I could have missed something. Where should I go in STS and what should I change? Thank you.
  
  Reply
2. Justin says:
  
  November 2, 2017 at 3:52 am
  
  What should the settings be?
  
  Reply
  1. JavaSampleApproach says:
    
    November 2, 2017 at 5:12 am
    
    You got 2 messages: 'mvn' is not recognized and 'npm' is not recognized
    It means you did NOT install mvn and Node.js successfully!
    
    So open an cmd to check mvn by mvn -v
    For npm, using cmd: node -v & npm -v to check it.
    
    Reply
    1. Justin says:
      
      November 3, 2017 at 12:54 am
      
      So I need to download maven? Do you recommend a site/version? I tried a version, but my computer warned me it might have a virus. Just wanted your opinion. Thank you.
    2. JavaSampleApproach says:
      
      November 3, 2017 at 5:33 am
      
      You can download mvn at: Download Apache Maven.
      Then follow the install step by step at Installing Apache Maven.
    3. Justin says:
      
      November 5, 2017 at 5:20 pm
      
      I have tried to follow the step by step instructions for installing on Windows, but they do not make sense to me. Is there a video I can follow? I have tried everything, but nothing I do works.
    4. Justin says:
      
      November 5, 2017 at 5:43 pm
      
      I finally got mvn to work properly, thank you for all of your help, but now I am getting the following message when I run the ng build command:
      
      ‘ng’ is not recognized as an internal or external command,
      operable program or batch file.
      
      Please keep in mind, I cannot run it in the local terminal on STS and I am running it on cmd terminal. What do I need to do to get the ng build command to run?

Scotte says:

November 2, 2017 at 7:18 pm

Hey.. when I go in production environment with this setup.. will it work..Or I need to change something in proxy.conf.json?

Reply
1. JavaSampleApproach says:
  
  November 3, 2017 at 5:24 am
  
  Hi Scotte,
  
  In production env, you just need copy all files in dist folder from cmd ng build --env=prod.
  
  Regards,
  JSA
  
  Reply
  1. Justin says:
    
    November 3, 2017 at 11:41 am
    
    I am not sure what that means? Which files? And what’s the production envelope? I am sorry if I seem confused.
    
    Reply
Anonimo says:

November 8, 2017 at 5:23 pm

Spring Boot + Jboss EAP 6.4

is posible?

Reply
1. JavaSampleApproach says:
  
  November 12, 2017 at 1:07 pm
  
  Hello Anonimo,
  
  Please details for clearly your expected.
  
  Regards,
  JSA
  
  Reply
2. Iorran says:
  
  December 13, 2017 at 2:33 pm
  
  Yes, its possible, i using that.
  
  Reply
Madhuri says:

November 11, 2017 at 6:56 pm

I copied the dist folder as mentioned in step 7 but still I am getting error -“Whitelabel Error Page ” when i load the pag e on local host.

Any help will be appreciated

Reply
1. JavaSampleApproach says:
  
  November 12, 2017 at 1:05 pm
  
  Hi Madhuri,
  
  Had you done with the step 6:
  Integrate SpringBoot server and Angular 4 client
  
  – If your app works well at step 6, please use cmd: ng build --env=prod to build a production image then:
  
  We have 2 approaches to deployment Spring Boot server with angular4 client:
  – Manually copy all files from dist folder to /src/main/resources/static folder of SpringBoot server project.
  – Using Maven plugin to copy all files from dist folder to /src/main/resources/static folder of SpringBoot server project
  
  See more at video https://youtu.be/Ps-7ZV8YpI0
  
  Regards,
  JSA
  
  Reply
Sunil Pandey says:

December 3, 2017 at 5:31 am

Thanks for the awesome ! post.

Reply
Anton Romanov (FROM RUSSIA) says:

December 12, 2017 at 1:22 pm

It’s a best example ive ever seen. Thank you!!!!!

Reply

chunk {vendor} vendor.bundle.js (vendor) 854 kB [initial] [rendered]

ERROR in Error: AppComponent cannot be used as an entry component.
    at syntaxError (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\bundles\compiler.umd.js:528:34)
    at CompileMetadataResolver._getEntryComponentMetadata (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\com
piler\bundles\compiler.umd.js:15862:19)
    at C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\bundles\compiler.umd.js:15334:110
    at Array.map ()
    at CompileMetadataResolver.getNgModuleMetadata (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\b
undles\compiler.umd.js:15334:73)
    at visitLazyRoute (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\bundles\compiler.umd.js:31061:
104)
    at AotCompiler.listLazyRoutes (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\bundles\compiler.u
md.js:31029:20)
    at AngularCompilerProgram.listLazyRoutes (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler-cli\src
\transformers\program.js:156:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compi
ler-cli\src\ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@ngtools\webpac
k\src\angular_compiler_plugin.js:248:66)
    at Promise.resolve.then.then (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@ngtools\webpack\src\angular_compiler
_plugin.js:562:50)
    at 
    at process._tickCallback (internal/process/next_tick.js:160:7)

chunk {vendor} vendor.bundle.js (vendor) 854 kB [initial] [rendered]

ERROR in Error: AppComponent cannot be used as an entry component.

at syntaxError (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\bundles\compiler.umd.js:528:34)

at CompileMetadataResolver._getEntryComponentMetadata (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\com

piler\bundles\compiler.umd.js:15862:19)

at C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\bundles\compiler.umd.js:15334:110

at Array.map ()

at CompileMetadataResolver.getNgModuleMetadata (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\b

undles\compiler.umd.js:15334:73)

at visitLazyRoute (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\bundles\compiler.umd.js:31061:

104)

at AotCompiler.listLazyRoutes (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler\bundles\compiler.u

md.js:31029:20)

at AngularCompilerProgram.listLazyRoutes (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compiler-cli\src

\transformers\program.js:156:30)

at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@angular\compi

ler-cli\src\ngtools_api.js:44:36)

at AngularCompilerPlugin._getLazyRoutesFromNgtools (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@ngtools\webpac

k\src\angular_compiler_plugin.js:248:66)

at Promise.resolve.then.then (C:\Study\Development\Workspace_SpringBoot\angular4-client\node_modules\@ngtools\webpack\src\angular_compiler

_plugin.js:562:50)

at process._tickCallback (internal/process/next_tick.js:160:7)

webpack: Failed to compile.

JavaSampleApproach says:

December 17, 2017 at 2:01 pm

Hello Sunil Roy,

Please check the guide video for your setup: https://youtu.be/Ps-7ZV8YpI0

Regards,
JSA

Reply

Kiran says:

December 20, 2017 at 3:44 pm

After implementing all the steps given in this tutorial, I thought of completing it by creating a WAR file, and the steps followed are,
1) Modified pom.xml by replacing jar to war
2) mvn spring-boot:run created a WAR file
3) Copied that WAR file to C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps and tried running
a) http://localhost:8080/demo/api/hi
b) http://localhost:8080/demo
But none of these two attempts (ie,a,b) worked for me. Is there any thing that I need to do as we do in JSP-Servlet web.xml? Where we create a and xml tags where in we place the jsp file to be loaded i,e

/jsp/login.jsp

Can any one please tell me the right procedure to create a WAR file and deploy it into a remote tomcat webapp folder ?

Reply
1. JavaSampleApproach says:
  
  December 21, 2017 at 5:08 am
  
  Hi Kiran,
  
  Please visit this post:
  How to deploy Spring Boot Web App War file to Tomcat Server with Maven build
  
  Regards,
  JSA.
  
  Reply
Sajal (India) says:

December 28, 2017 at 10:39 pm

It is the best video I have ever seen.

Reply
Wallace Howery says:

January 3, 2018 at 6:20 pm

Just curious, in Step 5, why do you remove node_modules from STS?

Reply
1. JavaSampleApproach says:
  
  January 5, 2018 at 3:48 am
  
  Dear Wallace Howery,
  
  Just to clean the sourcecode in STS on view. You can do nothing.
  
  Regards,
  JSA
  
  Reply
Akuma says:

January 18, 2018 at 6:38 pm

Hi,
Thank you for this great job 🙂 . Just one question in the last step (7). Does this mean that, every time I make some changes in the angular client, I have to run “ng build –env=prod” before starting my Spring Boot app? If this is the case, is there a way to make it automatically, a maven plugin which will start the angular client when my Spring Boot app starts ? Thanks again

Reply
divakar says:

January 25, 2018 at 9:42 pm

hello i am getting blank page when using http://localhost:8080/

any idea???

Reply
Dawid says:

February 13, 2018 at 11:12 am

Thanks man for good tutorial ! 😉

Best gret from POLAND! 😉

Reply
Nitin Jain says:

February 19, 2018 at 5:51 pm

Done till step 6. getting the following error
> ng serve –proxy-config proxy.conf.json

Port 4200 is already in use. Use ‘–port’ to specify a different port.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! angular4-client@0.0.0 start: ng serve --proxy-config proxy.conf.json
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular4-client@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:

Reply
1. JavaSampleApproach says:
  
  February 21, 2018 at 6:53 am
  
  Hi Nitin Jain,
  
  Use cmd netstat -ano | findstr :4200 to find out processes
  Then use cmd taskkill /PID 12716 /F to kill processes
  
  JSA,
  Regards
  
  Reply
Tarishi says:

February 23, 2018 at 10:34 am

This site explains the concept and video to demonstrate the same is simply awesome. (Y)

I have followed all the steps and successfully integrated my project but cannot deploy to get it run on one server.
According to step 7, when I give command ng build -prod in the terminal, ng is not recognized.
I have installed the angular plugins in my STS but even that didn’t help.

Please suggest.

Reply
1. JavaSampleApproach says:
  
  February 28, 2018 at 9:06 am
  
  Hi Tarishi,
  
  At step 7, you should use ng build --env=prod
  
  For new updated, you can follow the instruction at the tutorial
  
  Regards,
  JSA
  
  Reply
Vinayak says:

March 15, 2018 at 11:37 am

Where did this dist folder came from? As we see in steps untill step 6 we dont see this folder. How it came in step 7?

Reply
Gobinath says:

March 15, 2018 at 12:57 pm

Yeah i have don it. Its very easy and simple. TX

Reply
shmoon says:

March 20, 2018 at 1:40 am

Hi . i have problem.
How to fixed page?
when i fixed html code and AppComponent title , i don’t check change display

Reply
Chathuri says:

March 20, 2018 at 9:34 am

I went through all these steps and was able to run the application successfully. But when I refreshed the page using browser refresh button, it gave the “Whitelabel Error Page”.

Reply
Jana says:

March 20, 2018 at 9:39 am

I too get the same problem when I refresh the page.

Reply
Darshan says:

March 25, 2018 at 7:57 pm

Hi team,
Nice Work though I am facing issues. Up to step 6, I did all the steps but “localhost:4200” and “http://localhost:4200/api/hi” is redirecting to the same angular page, not to controller page. Any idea about the issue, I need to resolve it asap??

Reply
Janakiramireddi says:

April 6, 2018 at 2:56 am

I have followed exactly how you said, after angular4-cli production build i am running clean install in spring-boo it is copying the files to static folder, but after starting spring-boot project at http://localhost:8080 it is giving white label error
page but when i inspect the element it is showing angular4 errors in console,

==>but it is not showing welcome message at “8080”

Reply
Hari S says:

April 6, 2018 at 5:38 pm

This is about “Whitelabel Error Page” after integration in both side (angular and spring boot)
1. start the spring boot application
2. try again 7. Deploy SpringBoot server with the Angular4 client – check dist folder is present
3. Give absolute path, if you are not familiar with relative path –
4. Check the absolute path is present exactly, some time static folder will not be there, then create
5. try to execute localhost:8080, if not working then try to stop and start the spring boot
8. don’t try clean install in maven.

Reply
Pankaj Sharma says:

May 2, 2018 at 12:39 pm

Hi,

I really appreciate the way you have created a video and prepared this tutorial is very good, i followed the same and got the expected output as well, but when I am creating simple jersey application in place of spring boot and trying to integrate the same its not working for me, can you please help.

Reply
sarmistha says:

May 9, 2018 at 11:35 am

I have followed the tutorial and there is no issues in understanding. Getting The error once I am creating a completely new spring boot application project and trying to launch it. It is giving me classnot deffound Error. I tried checking the dependencies. But could not figure. Please help me out.In STS, I am using “create a spring starter project” option and it is giving me this error, there nothing I have written extra yet.
Here is my pom.xml

4.0.0

com.sarmistha.springbootmuvi
SpringBootMuvi
0.0.1-SNAPSHOT
jar

SpringBootMuvi
Demo project for Spring Boot

org.springframework.boot
spring-boot-starter-parent
1.5.13.BUILD-SNAPSHOT

UTF-8
UTF-8
1.8
3.1.1.RELEASE

org.springframework
spring-context
${org.springframework-version}

org.springframework
spring-webmvc

org.springframework.boot
spring-boot-starter-web

org.springframework.boot
spring-boot-starter-test
test

org.springframework.boot
spring-boot-maven-plugin

Reply
1. sarmistha says:
  
  May 9, 2018 at 11:36 am
  
  4.0.0
  
  com.sarmistha.springbootmuvi
  SpringBootMuvi
  0.0.1-SNAPSHOT
  jar
  
  SpringBootMuvi
  Demo project for Spring Boot
  
  org.springframework.boot
  spring-boot-starter-parent
  1.5.13.BUILD-SNAPSHOT
  
  UTF-8
  UTF-8
  1.8
  3.1.1.RELEASE
  
  org.springframework
  spring-context
  ${org.springframework-version}
  
  org.springframework
  spring-webmvc
  
  org.springframework.boot
  spring-boot-starter-web
  
  org.springframework.boot
  spring-boot-starter-test
  test
  
  org.springframework.boot
  spring-boot-maven-plugin
  
  Reply
Abhishek Gupta says:

May 9, 2018 at 2:10 pm

I have a question, I am new to Java spring.

In my angular project if I am requesting some data from the service, so in my angular service
Eg: I have a get request
this.http.get(‘/api/getUsers’).subscribe(data => {
console.log(data);
})

So, in my spring application, in order to send the data back for the request, I do
@GetMapping(“/api/getUsers”)
private RepositoryEntity<List> listAllUsers() {
// I will get the data and return new RepositoryEntity<List>(data, HttpStatus.OK)
}

And my angular app will get the data right?

Reply
Rohan says:

May 10, 2018 at 4:08 pm

I can access http://localhost:4200/api/hi and http://localhost:8080/api/hi
However, I am unable to access http://localhost:8080
It gives a Whitelabel Error Page

Reply
1. pragyan says:
  
  May 15, 2018 at 6:12 am
  
  can u give clarification why u r accessing two url at a time
  
  Reply
pragyan says:

May 15, 2018 at 6:13 am

i have an doubt why we need to delete node-module???

Reply
Palash says:

May 16, 2018 at 4:29 pm

Hi,
very nice post.Though ive copied all the files from dist files to src/main/resources/static folder but still im not being able to connect to rest.
after inspecting i found this error:
Failed to load resource: the server responded with a status of 404 (Not Found)

and getting Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.
Thanks in advance for your response

Reply
1. Alex says:
  
  May 18, 2018 at 11:06 am
  
  I also had the same issue with the Whitelabel Error Page but I found the mistake.
  Do not copy all files from the dist folder, instead copy only the files inside dist/angular4-client so without the folder around it. Then it worked for me.
  
  Reply
Pepetolete says:

June 4, 2018 at 11:43 am

Same whitelabel error page as many people. I’ve followed all the steps one by one, and it doesn’t work.

I’ll find another way to do it.

Reply
Mahesh says:

June 26, 2018 at 12:57 pm

Good to see the simple Example….
Here I have a question on refreshing page…

Consider we have an angular application with multiple routers and integrated each router with different api (one to one mapping).
for the same let consider my ui-url pattern would be like:
http://localthost:8080/application_context_name/ui-url-pattern
and it is mapped with api-url like:
http://localhost:8080/application_context_name/api/ui-url-pattern

Now the question is, how to load the ui-url-pattern directly on the browser?
(“how can i access the url “http://localthost:8080/application_context_name/ui-url-pattern” directly on browser’?)

Currently am seeing the 404 error msg, becoz both UI(angular) and API(springboot) are deployed together and serving from the same pott number, when i triggered ui-url-pattern it directly triggering the API(springboot) context path and not able to find the url pattern in all controllers and returning the 404.

How to resolve this scenario?

Reply
Prasanna Pethe says:

August 10, 2018 at 8:41 am

nice tutorial everything work fine but how to deploy same project War file to Tomcat Server with Maven build. it showing error.

Reply
Sha Cha says:

August 29, 2018 at 4:19 am

This post seems helpful but I’m running into a similar issue when deployment of my spring boot and angular app. This is gradle based project. I did manually tried copying the files from dist/ directory to a static folder in src/main/resources/static folder . Then starting the spring boot app (tomcat server) , localhost:8080 isn’t showing the web interface. Any suggestions plz?

Reply
sha cha says:

August 29, 2018 at 4:27 am

FYI, just more info for proj structure (in regards to above query in my previous comment):
src ->main -> java ->
– app
– frontend
– dist
-src
– login
-login.component.html
– login.component.ts
-login.component.css

Even though I copied manually the contents of frotend/dist into a static folder (src/main/resources/static) but the front-end web interface isnt working when starting spring boot app. Also, from above structure, you can see that I didn’t move the frontend src code anywhere and is still in frontend folder, is that an issue? Also I am using angular routers would that be a problem in routing the pages to main page?
Kindly provide suggestions.

Reply
1. grokonez says:
  
  September 10, 2018 at 1:28 pm
  
  Update Info ->
  
  1. Video guide for Integrating Angular 6 + SpringBoot 2.x:
  -> https://www.youtube.com/watch?v=fZA22_FUwDc
  
  2. Link for Integrate Angular 6 + SpringBoot 2.x:
  -> https://grokonez.com/frontend/angular/how-to-integrate-angular-6-springboot-2-0-restapi-springtoolsuite
  
  Reply