Build a Basic CRUD App with Angular 5.0 and Spring Boot 2.0

Peter Pilgrim

2018

On Mac OS X, I had to execute the following shell command command:

peterpilgrim@Peters-FlyersMBP] > npm install -g @angular/cli  &&
npm install -g @angular-devkit/core

in order into install Angular CLI and the DevKit.

Here is an alternative shell command, which executes the Spring Boot server:

$ cd okta-spring-boot-2-angular-5-example/server && ./mvnw spring-boot:run

HTH

+PP+

Matt Raible

Hey Peter! It’s good to see you here. :slight_smile:

The command you’re using will install an older version of Angular CLI. I’d recommend using what this post specifies:


npm install -g @angular/cli@1.5.2

I locked down the version so this example will still work. You’re welcome to try the latest version with:


npm install -g @angular/cli

Peter Pilgrim

Hey Matt!

I figured out that part, now I have a stacktrace

java.lang.NoClassDefFoundError: javax/xml/bind/JAXBException: javax.xml.bind.JAXBException

So I am now missing JAXB depenedency somewhere.

But I figured it out. Add the dependency JAXB 2.3.0 to the POM file https://mvnrepository.com/a… and then make sure you that switch to JDK 8 (my default is JDK 9 :wink:

$ export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_144.jdk/Contents/Home
$ export PATH=${JAVA_HOME}/bin:${PATH}
$ cd okta-spring-boot-2-angular-5-example/server && ./mvnw clean spring-boot:run &

+PP+

Matt Raible

Nice investigative work Peter! Yep, adding JAXB 2.3.0 to your dependencies is the recommended way to make Spring Boot work with Java 9.

Peter Pilgrim

Thanks, Matt! Glad to try out and help out, catch you at a conference in the future wherever and whenever.

Hitesh Joshi

If we use the Angular/ React App while registering our app with Okta , it creates an Implicit OAuth2 Grant which is for mobile apps or mobile websites. Considering that this is a web application this is wrong. The grant type should be Authorization code.
That will be an option if you use Java while creating your application in Okta. Please let me know if my understanding is wrong.

Matt Raible

Hello Hitesh. I think you have it backwards. Implicit is for SPAs and frontend apps. For mobile the recommendation is the authorization code flow (plus PKCE). What’s your use case? Maybe we can help guide you.

Hitesh Joshi

Hey Matt, thanks for the reply. I am no expert on Auth, but both DigitalOcean and Aaron Parecki’s latest recommendation contradicts what is done here
https://aaronparecki.com/oa…
https://www.digitalocean.co…

Even this page sponsored by Okta -
https://www.oauth.com/oauth…
See the grant type used.
IMHO, it does not make sense to use Implicit flow anywhere, when you can have the additional security of using the authorization grant type. May be a server less DApp(Distributed App) which is an SPA can use it but that will open it to certain attack vectors.

Johnny Clark

Thanks for the great tutorial!

While working thru the tutorial, I hit an error “Uncaught (in promise): AuthSdkError: OAuth flow response state doesn’t match request state”. I noticed that you’ve actually hit it yourself and reported it at: https://github.com/okta/okt…

So one goal of this comment is to alert other readers of the problem. I’ve tried to follow the issue comments, but I’m a little confused, so would you mind posting a comment here when this issue is resolved by “the other guys”.

Again, thanks! This was very helpful.

Sandro Agboka

When I write the client/src/app/shared/giphy/giphy.service.ts as mentioned in the post the typescript doesn’t compile but when I change public to private in constructor it compiles. Guess must be a typo

Matt Raible

Hello Sandro: personally, I haven’t seen any compilation issues between using private and public. Can you post the error you’re seeing?

You could also try cloning the finished example project from GitHub and see if you experience issues running it.

Nate Barbettini

I agree, authorization code is the best choice if you can use it. Implicit can be useful if you have no way of running server-side code and making a backchannel request, but as you pointed out, you need to be aware of the additional security risks of keeping your tokens safe on the client. I’d like to post a new blog article soon about the nitty-gritty details of this since it’s a pretty confusing topic. Stay tuned!

blackcompe

This blog was so well put together. You’ve written a single source of everything I need to know to get up and running with angular/spring without wasting time perusing the net. Can’t thank the author enough!

ykhadilkar

HI Matt, awesome blog post. Thank you!!!
Quick questions, I noticed ng test is failing. Most likely because of material design elements. Not sure though. One of the line in error log 'mat-toolbar' is not a known element https://uploads.disquscdn.c…

Afif Kallel

hello please help i have this issue

" ERROR in src/app/shared/okta/auth.interceptor.ts(18,67): error TS2339: Property ‘accessToken’ does not exist on type ‘Promise<string>’. "

at the " Authorization: Bearer ${this.oktaAuth.getAccessToken().accessToken} " at the auth.interceptor.ts file

any help ??

Vu Nguyen-Cong

I guess that it is due to the version of Okta’s Angular.
In package.json, when I change the version to “@okta/okta-angular”: “0.0.13”, run “npm install” and then “ng serve”, the error disappears.

Matt Raible

Thanks for reporting this issue Afif, and thanks for posting the fix Vu! I updated this tutorial on March 5 to use the latest versions of everything, including @okta/okta-angular v0.0.13. You can read more about this in the changelog at the bottom of the article. The source code for the example is on GitHub too.

Matt Raible

Thanks! I didn’t go over fixing the tests in this post. I hope to in a future post later this month.

To fix the tests, you mostly need to import the modules used by your component, as well as the providers (aka services) it uses. I created a PR that shows everything you need to do to fix the tests so ng test and ng e2e pass.

Vu Nguyen-Cong

Thanks for the info, Matt! But the current version of @okta/okta-angular is 1.0.0 and my project doesn’t compile with this version. Can you explain why?

Matt Raible

What’s the error you’re seeing? I ran into an issue where Angular Router broke things in 5.2.8. If that’s not your issue, I’d suggest looking at the 1.0.0 release notes.