borysn / spring-boot-angular2 Goto Github PK
View Code? Open in Web Editor NEWspring boot backend, angular2 frontend with webpack, typescript, sass, bootstrap4, karma, jasmine
License: MIT License
spring boot backend, angular2 frontend with webpack, typescript, sass, bootstrap4, karma, jasmine
License: MIT License
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.
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
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.
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.
is it possible that you package the whole thing as a maven project?
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.
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/css-loader!../
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)
@ ..//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
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.
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
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??
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!
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.
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?
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
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
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 ())
Just wondering if you were going to update this template for 2.0.0-rc.1
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.