Angular2 With Spring Boot

Angular2 Typescript with Spring Boot

Built With

• Spring Initializr Spring Initializr bootstrap your application.
• Angular CLI A command line interface for Angular
• Gradle Gradle Build Tool
• Angular2

Installation

To run this app:

./gradlew bootRun

Test if app work at: http://localhost:8080

Tutorial

1. create spring web project
2. generate angular2 frontend
3. build angular2 frontend and copy to spring public folder
4. serve your web

1 Create Spring Web project

You can use https://start.spring.io to init new project Or you can use Spring CLI

spring init --build=gradle --dependencies=web angular2-with-springboot.zip
unzip  angular2-with-springboot.zip
cd  angular2-with-springboot

2 Generate Angular 2 frontend

We can use angular-cli to generate angular2 project

ng new angular2-frontend

3 Build Angular2 Frontend and copy build folder to spring

cd angular2-frontend
ng build

The build artifacts will be stored in the dist/ directory. We need to copy files in dist folder to spring public folder src/main/resources/public

cd ..
cp -r angular2-frontend/dist src/main/resources/public

You should write a gradle task to do this, ex:

task buildFrontend(type: Exec){
	workingDir './angular2-frontend'
	commandLine 'ng','build'
	
}
task copyFrontendToSpring(type: Copy){
	from './angular2-frontend/dist'
	into 'src/main/resources/public'
}

4 Serve your website

Now run your project

./gradlew bootRun

and test if it work at http://localhost:8080