zouabimourad / angular2-spring

Angular 2+ and Spring Integration

angular 2+ Spring Boot Integration

This example shows how to do a paginated table with Angular and Spring Boot ( RestController )

Installation

The Back End

You'll need Maven 3+ and Java 8

The Front End

• npm install -g @angular/cli to install angular cli ( globally )

• npm install to install Node packages

Run

The Back End

• mvn spring-boot:run to start spring boot

The Front End

• ng serve --proxy-config proxy.conf.json

angular2-spring's Issues

Issues Faced

org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'org.springframework.boot.autoconfigure.liquibase.LiquibaseAutoConfiguration$LiquibaseConfiguration':

Caused by: java.lang.IllegalStateException: Cannot find changelog location: class path resource [db/changelog/db.changelog-master.xml] (please add changelog or check your Liquibase configuration)
at org.springframework.util.Assert.state(Assert.java:392) ~[spring-core-4.3.4.RELEASE.jar:4.3.4.RELEASE]

db.changelog-master.xml] not working

Full CRUD Functionality

Hello, You gave nice example to understand the integration with springboot, thank you. I am new to angular 2 and developing whole crud functionality with angular2 and springboot (I am following your reference), but facing some issues!

PFA, As shown in picture (I numbered 1,2,3. That I want to do), I want to add "Add/Create" and "Edit/Update" functionality as shown in picture.

Point 1. when i fill the form and click on add button, this json should be append to localhost:8080/api/person/

PFA which is JSON on H2 Database.

On server side, I added value = "/" , is it correct ? In browser console I get "error_handler.js:47EXCEPTION: Response with status: 400 OK for URL: http://localhost:8080/api/person/NaN"

See my snippet>
@RequestMapping(value = "/", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
public void createPerson(@requestbody PersonDTO personDTO) {
personService.savePerson(personDTO);
}

Point 2 :
On click "Edit button(Number 2 in picture)" it should fetch current values to the form(Number 3) and the button (Number 1 in picture)should be change accordingly (for example, if id exist then button value = "update" and if id not exist then button value = "add", is it possible to achieve ?)

Please tell me where I stucked and let me know possible solutions. I searched more about errors over internet but it did not work for me or I am going in wrong direction !
If you want to see updated source, please visit > https://github.com/rakshitshah94/Angular2-SpringBoot-Example.

Reorganize the packages

hello, I wanted to thank you for your work, I'm using it to experiment.
I wanted to share with you the need to reorganize the packages.
in my project you can see how I wrote the "document" section in both java and in angular.
I'd like to move and reorganize the "person" section, what do you think?

error on front

Nice project.

However I do have some issues launching "gulp play", in the front.

For example:
C:/Users/xxx/Downloads/angular2-spring-master/front/node_modules/@angular/common/src/directives/ng_class.d.ts(72,35): error TS2304: Cannot find name 'Set'.
C:/Users/xxx/Downloads/angular2-spring-master/front/node_modules/@angular/common/src/facade/async.d.ts(27,33): error TS2304: Cannot find name 'Promise'.

... and...

src\app\components\table\table.ts(134,61): error TS2339: Property 'find' does not exist on type 'PaginationPropertySort[]'.
src\app\index.ts(1,1): error TS6053: File 'C:/Users/a.franceschini/Downloads/angular2-spring-master/front/typings/tsd.d.ts' not found.
src\app\person.ts(21,12): error TS2304: Cannot find name 'Person'.
src\app\personList.ts(18,31): error TS2304: Cannot find name 'Person'.
src\app\personList.ts(32,109): error TS2304: Cannot find name 'Person'.
src\app\personList.ts(33,13): error TS2322: Type 'Observable<any[]>' is not assignable to type 'Observable<PaginationPage>'.
Type 'any[]' is not assignable to type 'PaginationPage'.
src\app\personList.ts(33,53): error TS2304: Cannot find name 'Person'.
src\app\personList.ts(43,13): error TS2322: Type 'Observable' is not assignable to type 'Observable<PaginationPage>'.
Type 'void' is not assignable to type 'PaginationPage'.
src\app\personList.ts(45,20): error TS2339: Property 'switchMap' does not exist on type 'Observable<PaginationPage>'.
src\app\service\personService.ts(7,96): error TS2304: Cannot find name 'Person'.
src\app\service\personService.ts(12,16): error TS2322: Type 'Observable<PaginationPage>' is not assignable to type 'Observable<any[]>'.
Type 'PaginationPage' is not assignable to type 'any[]'.
Property 'length' is missing in type 'PaginationPage'.
src\app\service\personService.ts(12,46): error TS2304: Cannot find name 'Person'.
src\app\service\personService.ts(12,70): error TS2339: Property 'fromPromise' does not exist on type 'typeof Observable'.
src\app\service\personService.ts(13,13): error TS2304: Cannot find name '$'.
src\app\service\personService.ts(17,40): error TS2304: Cannot find name 'Person'.
src\app\service\personService.ts(18,31): error TS2304: Cannot find name 'Person'.
src\app\service\personService.ts(18,54): error TS2339: Property 'fromPromise' does not exist on type 'typeof Observable'.
src\app\service\personService.ts(19,13): error TS2304: Cannot find name '$'.
src\app\service\personService.ts(24,17): error TS2314: Generic type 'Observable' requires 1 type argument(s).
src\app\service\personService.ts(24,46): error TS2339: Property 'fromPromise' does not exist on type 'typeof Observable'.
src\app\service\personService.ts(25,13): error TS2304: Cannot find name '$'.

Have you any clue on that ?
Thx a lot

How i start the project

Hey @zouabimourad,
I cloned project to my local directory.
How i can start/run the project means i have to run it on eclipse or other angular2 project like npm start.?
I am new to angular2 and want use with java.

If any guideline or installation steps is there please provide.
Please suggest.
thanks

Same Server

Hi @zouabimourad ,
I am interesting in using these technologies (NG2 and Springboot), I have google that so I found your projects.
I was wondering about how to use angular2 and springboot together in the same server like we use to do in angular1 (JS , CSS and HTML files are put in the static folder 'main/resources/static')
So do you know how to convert typescript files to JS so we could put them in the same application server?