Angular 8 + Spring Boot 2.2: Build a CRUD App Today!
Angular and Spring Boot are wildly popular frameworks for web development. Matt Raible shows you how to use them together in the same app and how to secure it all with OIDC.
as
Thank you good job !! 
But what is this sentence in car-edit.component.ts :this.car.href = car._links.self.href;
I don’t understand and it doesn’t work ?
So we don’t have any button for ‘delete’
Daniel
Hi @Author / OKTA DEVELOPER BLOG, May you please list the cars using a data table?
I have with angular 7 and server side data couldn’t work as expected when intergrated with angular (Java Spring boot + angular data tables).
I hope to hear from you very soon
Daniel
By the way i tried using the new pipe API, and it didn’t work… Angular get response as object and convert it to an observable object, and the Angular *for loop doesn’t cater for objects but arrays,
and why is it so… and that really makes our lives very difficult…
Matt Raible
I’m sure you could use a data table. I have not tried it myself.
Matt Raible
That line of code just shortens the path of the car’s href property. When saving the car, it’s used to determine if it should POST (for a new one) or PUT (to update an existing one).
There is a delete button. I’m not sure why you don’t see one.
as
Sorry but the car._links it’s undefined… 
Matt Raible
I just ran through everything again and updated this post and the example for the Angular 8 release. I did not experience this issue. You might try comparing your code to the example on GitHub. You can also clone the GitHub example and change the “issuer” and “clientId” values to match your Okta org. The README in the project has instructions on how to do that.
Paul
Great tutorial; I had no previous exposure to Spring Boot or Angular but this helped me set things up quickly.
Two remarks:
First, you could make the code in the init method of the DemoApplication class a little conciser by attaching the RequiredArgsConstructor annotation to the Car entity. In the stream part of the init method, this enables you to skip using the setter and rely on the new constructor instead:
Stream.of(“Ferrari”, “Jaguar”, “Porsche”, “Lamborghini”, “Bugatti”,
“AMC Gremlin”, “Triumph Stag”, “Ford Pinto”, “Yugo GV”)
.map(Car::new)
.forEach(repository::save);
Second, I had not used the Lombok library before. Following the setup in this blog post led to IntelliJ complaining about missing methods when using a setter of the Car entity. The solution was to install the Lombok IntelliJ plugin. This could be totally obvious to everyone else, though.
Steve Jerman
Hi,
it would be great to have some pointers on how to deploy for production. The example works fine using ng s but normally with a spring boot app you would add the dist directory to a src/main/resources/static directory so the APP can be served directly from the jar… this doesn’t work - the callback gets lost since HashLocationStrategy is used.
Steve
Matt Raible
Did you try using the code shown in this tutorial? If so, did it work? I’m not sure how to answer your question if you’re asking about code that’s not shown here. You might have better luck posting it to Stack Overflow.
Matt Raible
Hello Steve,
I have a couple tutorials on this blog that show you how to deploy the Angular and Spring Boot apps separately. It typically involves configuring the Angular server to treat it as a SPA and send all requests to the the index.html page. Heroku and Cloud Foundry make this pretty easy.
If you’re looking to combine the applications into one artifact, I recommend reading Deploy Your Secure Spring Boot + Angular PWA as a Single Artifact or checking out JHipster (which does this by default).
Matt Raible
Thanks for the tips, Paul!
Stephan Dhaene
Hi @mattraible , first of all: excellent tutorial!
I am trying to get a fb social login in addition to your example.
So my first go was to change oktaConfig in the auth-routing.module.ts and add the following:
idps: [
{ type: ‘facebook’, id: ‘xxxxxxxxxxxxxxxxxxx’},
]
This didn’t have the desired effect.
Also, looking at the documentation of @okta/okta-angular@1.2.1 this option seems not to be possible.
Do I still need to use the OktaSignIn widget, if I want to add a social login?
If so, can I also use the OktaAuthService together with the OktaSignIn widget?
Matt Raible
Hello Stephan,
There’s two ways to configure social login that I know of:
1. Use the Okta Sign-In Widget and embed it in your app. Angular Authentication with JWT shows how to do this in an Angular app.
2. Customize the hosted Sign-In Widget. You’ll need a custom domain for this. Add Social Login to Your JHipster App shows how to do that.
Amitabh
Hi Matt,
Clicked button on my last post too early.
Thank you for these detailed tutorials and also for keeping them up to date with the evolving libraries.
I am just learning about OIDC and wanted to start with working code before tweaking anything.
I am unable to get the server to work on Angular 8 version of this code. The stack trace was in my last post.
Regards,
Amitabh
Matt Raible
Hello Amitabh,
I don’t see a last post from you so I’m unsure what you’re referring to. What’s the stack trace that you’re seeing?
You can also clone the example repo and follow the instructions in the README for configuring it with your Okta org. Or compare its code to yours. I like to use SmartSynchronize for this.
Amitabh
Hi Matt,
Looks like the stack trace got caught in the site’s spam filter. Here is the compilation error I am getting. I can try posting the error details by running the command with -X switch again, However, it will likely get rejected as well.
Regards,
Amitabh
[INFO]
[INFO] — maven-resources-plugin:3.1.0:resources (default-resources) @ demo —
[INFO] Using ‘UTF-8’ encoding to copy filtered resources.
[INFO] Copying 1 resource
[INFO] Copying 0 resource
[INFO]
[INFO] — maven-compiler-plugin:3.8.1:compile (default-compile) @ demo —
[INFO] Changes detected - recompiling the module!
[INFO] Compiling 5 source files to C:\work\CC\okta\okta-spring-boot-2-angular-8-example\server\target\classes
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 36.831 s
[INFO] Finished at: 2019-08-19T19:08:27+12:00
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project demo: Fatal error compiling: invalid target release: 11 → [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/con…
Amitabh
Hi Matt,
Here is the abbreviated stack trace
Regards,
Amitabh
Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:testCompile (default-testCompile) on project demo: Fatal error compiling: invalid target release: 11 → [Help 1]
org.apache.maven.lifecycle.LifecycleExecutionException: Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:testCompile (default-testCompile) on project demo: Fatal error compiling
at org.apache.maven.lifecycle.internal.MojoExecutor.execute (MojoExecutor.java:215)
…
Caused by: org.apache.maven.plugin.MojoExecutionException: Fatal error compiling
at org.apache.maven.plugin.compiler.AbstractCompilerMojo.execute (AbstractCompilerMojo.java:1145)
at org.apache.maven.plugin.compiler.TestCompilerMojo.execute (TestCompilerMojo.java:180)…
Caused by: org.codehaus.plexus.compiler.CompilerException: invalid target release: 11
at org.codehaus.plexus.compiler.javac.JavaxToolsCompiler.compileInProcess (JavaxToolsCompiler.java:173)
at org.codehaus.plexus.compiler.javac.JavacCompiler.performCompile (JavacCompiler.java:174)…
Caused by: java.lang.IllegalArgumentException: invalid target release: 11
at com.sun.tools.javac.main.OptionHelper$GrumpyHelper.error (OptionHelper.java:103)
at com.sun.tools.javac.main.Option$12.process (Option.java:216)…
at org.apache.maven.wrapper.MavenWrapperMain.main (MavenWrapperMain.java:55)
[ERROR]
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/con…
Matt Raible
The error is telling you that you need to use Java 11.