borysn/spring-boot-angular2

spring boot backend, angular2 frontend with webpack, typescript, sass, bootstrap4, karma, jasmine

spring-boot-angular2 starter kit

spring boot backend, angular2 frontend with webpack, typescript, sass, bootstrap4, karma, jasmine

about

a starter project for prototyping restful applications with spring boot, angular2, and bootstrap4.

anuglar2 with es6 support. unit tests with jasmine.

change log

pre-install

1. install jdk8
   • set JAVA_HOME environment variable
2. (optional) install latest gradle
   • otherwise just use $ ./gradlew
3. (optional) install python 2.7.x
   • set python environment variable
   • $ gradle npmInstall may complain otherwise

install

$ git clone [email protected]:borysn/spring-boot-angular2

build & run

• $ gradle clean build runAll
  • server side will finish building first
  • give npm/webpack a little time to finish up
• using browser, navigate tolocalhost:3000

further reading

wiki

example

check out my rvep project. it's built and updated according to this starter kit!

rvep | dev_backend

rvep | dev_frontend

contribute

if you have any input, or contributions, please share!

donations

donate a cup of coffee

license

MIT

spring-boot-angular2's Issues

which IDE to use for development

hi

which ide i should use for developing on spring boot and angular 2. r u using one ide for both the backend and the frontend?
basically how to setup the development environment?

Tentative date for new build setup

Hi,

Thanks for this starter repo. From the README, it seems you are working on few optimisations regarding build. I am going to start a new Angular2 and Spring project soon. Can you please provide any tentative date for completing those features(webpack etc) or I can access your WIP code base somewhere??

travis-ci build fails on typings install

I'm trying to get the travis-ci build going for the project. So far everything seems good to go, except the typings install.

error

npm ERR! Linux 3.13.0-40-generic
npm ERR! argv "/home/travis/build/borysn/spring-boot-angular2/src/main/web/node/node-v6.2.0-linux-x64/bin/node" "/home/travis/build/borysn/spring-boot-angular2/src/main/web/node_modules/npm/bin/npm-cli.js" "install"
npm ERR! node v6.2.0
npm ERR! npm  v3.9.2
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] postinstall: `typings install`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script 'typings install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the spring-boot-angular2 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     typings install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs spring-boot-angular2
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls spring-boot-angular2
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR!     /home/travis/build/borysn/spring-boot-angular2/src/main/web/npm-debug.log
:npmInstall FAILED

Query: How to stop that server which is running in port 8080 with the help of Gradle or any other option?

After initiating Gradle bootrun, the server is started and able to see the results in localhost. But I'm not able to stop the server which is running in prot 8080. Could you please help me in this.

Upgrade to rc 1?

Just wondering if you were going to update this template for 2.0.0-rc.1

Gradle throws a webpack-related error on :frontend:npm_run_start

Hi. I followed the setup instructions and I am getting this error.

:frontend:build
:frontend:npm_run_start

> [email protected] start /home/rocky/DevSpace/espace/spbootng2/frontend
> npm run server:dev


> [email protected] server:dev /home/rocky/DevSpace/espace/spbootng2/frontend
> webpack-dev-server --config config/webpack.dev.js --port 3000 -d --progress --profile --watch --content-base src/

/home/rocky/DevSpace/espace/spbootng2/frontend/node_modules/webpack-dev-server/bin/webpack-dev-server.js:376
                throw e;
                ^

TypeError: webpack.validateSchema is not a function
    at new Server (/home/rocky/DevSpace/espace/spbootng2/frontend/node_modules/webpack-dev-server/lib/Server.js:23:33)
    at startDevServer (/home/rocky/DevSpace/espace/spbootng2/frontend/node_modules/webpack-dev-server/bin/webpack-dev-server.js:369:12)
    at processOptions (/home/rocky/DevSpace/espace/spbootng2/frontend/node_modules/webpack-dev-server/bin/webpack-dev-server.js:307:3)
    at Object.<anonymous> (/home/rocky/DevSpace/espace/spbootng2/frontend/node_modules/webpack-dev-server/bin/webpack-dev-server.js:431:1)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.runMain (module.js:590:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

npm ERR! Linux 4.8.0-27-generic
npm ERR! argv "/home/rocky/DevSpace/espace/spbootng2/frontend/node/node-v6.4.0-linux-x64/bin/node" "/home/rocky/DevSpace/espace/spbootng2/frontend/node_modules/.bin/npm" "run" "server:dev"
npm ERR! node v6.4.0
npm ERR! npm  v3.10.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] server:dev: `webpack-dev-server --config config/webpack.dev.js --port 3000 -d --progress --profile --watch --content-base src/`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] server:dev script 'webpack-dev-server --config config/webpack.dev.js --port 3000 -d --progress --profile --watch --content-base src/'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the spring-boot-angular2 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server --config config/webpack.dev.js --port 3000 -d --progress --profile --watch --content-base src/
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs spring-boot-angular2
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls spring-boot-angular2
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/rocky/DevSpace/espace/spbootng2/frontend/npm-debug.log

npm ERR! Linux 4.8.0-27-generic
npm ERR! argv "/home/rocky/DevSpace/espace/spbootng2/frontend/node/node-v6.4.0-linux-x64/bin/node" "/home/rocky/DevSpace/espace/spbootng2/frontend/node_modules/npm/bin/npm-cli.js" "run" "start"
npm ERR! node v6.4.0
npm ERR! npm  v3.10.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `npm run server:dev`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script 'npm run server:dev'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the spring-boot-angular2 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run server:dev
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs spring-boot-angular2
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls spring-boot-angular2
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/rocky/DevSpace/espace/spbootng2/frontend/npm-debug.log
:frontend:npm_run_start FAILED

bootRun hangs

Hello there,

i have a little issue:

always hang at :bootRun 88%. The application is running fine.

myuser$ gradle bootrun Building 88% > :bootRun

My System:
Darwin XXX 15.5.0 Darwin Kernel Version 15.5.0: Tue Apr 19 18:36:36 PDT 2016; root:xnu-3248.50.21~8/RELEASE_X86_64 x86_64

Java:
java version "1.8.0_92" Java(TM) SE Runtime Environment (build 1.8.0_92-b14) Java HotSpot(TM) 64-Bit Server VM (build 25.92-b14, mixed mode)

I can send you a full output from the gradle bootRun command if you need it.

Btw where is the right place to ask a question about the configuration for angular2? I like to add a new client lib and can't figure out how.

Thanks for your help.

No Dependecny is added

Once I pulled the project it shows error in the project.
Dependency files are missing as the POM file is not exists in the project.

Doesn't work with FF and IE

I've tried to open the project in FireFox and IE. But I've got exception during the page loading.

Error: @http://localhost:8080/app/main.js:5:25
@http://localhost:8080/app/main.js:1:1
@http://localhost:8080/app/main.js:1:1
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:8080/js/lib/zone.js:323:20
Zone</Zone</Zone.prototype.run@http://localhost:8080/js/lib/zone.js:216:25
scheduleResolveOrReject/<@http://localhost:8080/js/lib/zone.js:571:53
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:8080/js/lib/zone.js:356:24
Zone</Zone</Zone.prototype.runTask@http://localhost:8080/js/lib/zone.js:256:29
drainMicroTaskQueue@http://localhost:8080/js/lib/zone.js:474:26
ZoneTask/this.invoke@http://localhost:8080/js/lib/zone.js:426:22

Evaluating http://localhost:8080/app/app.component.js
Evaluating http://localhost:8080/app/main.js
Error loading http://localhost:8080/app/main.js

http://localhost:8080/js/lib/system.src.js
Line 123

Integrate bower dependency

Hello,

First of all, thanks for the nice template!

I'm wanting to use this template if possible, but I'm struggling to incorporate a bower dependency into the webpack2 config. Am I right in my understanding that the gradle-node plugin cannot be used for this, and thus I would need to include something like https://github.com/craigburke/client-dependencies-gradle ?

I added frontend/bower.json, and changed my webpack.common.js to use

    resolve: {
        modules: [helpers.root('src'), "node_modules", "bower_components"],
        descriptionFiles: ['bower.json', 'package.json'],
        extensions: ['.js', '.ts', '.css', '.scss', '.json', '.html']
    },

The gradle-node plugin of course does not install the bower_components, thus I have to manually bower install

Even when I do so, I can't figure out how to include a downloaded bower dependency in the actual code. I'll keep trying and will update any findings.

Update?

Is there any way you can commit an updated version of this project? I have been trying to get a basic Angular2/Spring Boot/Gradle project working for a week now. This one is very close to working, but there are some old versions of things in the package.json file and some deprecated functions. I am doing my best to work through them, but I have never worked with these technologies before.

maven settings

is it possible that you package the whole thing as a maven project?

refactoring

When refactoring java packages/classes, there is a chance of refactoring angular2 typescript variables under src/main/web/app/...

Currently, I am unsure of how to prevent refactoring of the web directory. Ideally you would develop/ship the angular and spring-boot components separately, but for the sake of rapid prototyping, I'd like to get that figured.

Any suggestions would be great here!

single-server branch is broken

Hi, I tried to execute the single-server project and the main page is broken (http://localhost:8080/js/lib/ng2-bootstrap.js Failed to load resource: the server responded with a status of 404 ())

How to generate the full war file ?

Hello,

first : good job ! thank you
.. but there is something that does not exist OR that I didn't find :

at the end, we want only one deployment with backend and frontend together.
It means we wants the frontend/build/dist chunk files and assets to be placed in the webjars directory of spring.

How can we achieve this ?

thank you.

[Question] How do deployments work (without webpack devserver)?

Since the web app is hosted by the webpack server in development, how does one go about deploying the web service and the app to Heroku, for example?

I see that there's a single-server branch which includes the web app in the jar... is this the preferred method?

Sorry for the broad question... stepping into some unfamiliar territory here.

Sass file and font-awesome.css in the components broke unit test

I started requiring my Sass file and font-awesome.css in the components my unit tests broke. Would you help me how to solve it with my setup?

@Component({ selector: 'spring-boot-angular2', template: '<router-outlet></router-outlet>', styles: [require('../../node_modules/font-awesome/css/font-awesome.css'), require('../assets/sass/app.scss')], encapsulation: ViewEncapsulation.None }) export class AppComponent { name = 'spring-boot-angular2'; }

ERROR in ../src/assets/sass/app.scss
Module parse failed: D:\emrep\projects\blog-webpack\frontend\src\assets\sass\app.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "../bootstrap/variables.scss";
| @import "app-base.scss";
@ ../src/app/app.component.ts 1:5783-5817
@ ../src/app/app.spec.ts
@ ../src .spec.ts
@ ./spec-bundle.js

ERROR in ..//font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
Module parse failed: D:\emrep\projects\blog-webpack\frontend\node_modules\font-awesome\fonts\fontawesome-webfont.woff2?v=4.7.0 Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ..//css-loader!..//font-awesome/css/font-awesome.css 6:479-532
@ ..//font-awesome/css/font-awesome.css
@ ../src/app/app.component.ts
@ ../src/app/app.spec.ts
@ ../src .spec.ts
@ ./spec-bundle.js

not working like before .. error on home page

Hi

After upgrade to rc6 and dividing code ... it is showing 👍
Whitelabel Error Page

on 127.0.0.1:8080 - for both gradle bootRun and gradle bootRepackage and running Jar file