Angular 8 + Spring Boot 2.2: Build a CRUD App Today!

Anooj VB

Excellent tutorial! How can we get group details of the user in Angular and use that to show/hide links/pages?

Amitabh

Thank you Matt

Matt Raible

Hello Anooj,

You can do this by adding a ”groups” claim to your ID token.

Navigate to API > Authorization Servers, and click on the default server. Click the Claims tab and Add Claim. Name it groups, and include it in the ID Token. Set the value type to Groups and set the filter to be a Regex of ”.*” and click Create.

This is how JHipster does it. It also has a directive for showing/hiding sections. I created an issue to add something similar to our Angular SDK.

https://github.com/okta/okt…

prasad sonu

Concepts are clearly explained! Great one !

Iam getting an error - "PUT http://localhost:8080/api/register 405
POST call in error HttpErrorResponse {headers: HttpHeaders, status: 405, statusText: “OK”, url: “http://localhost:8080/api/register”, ok: false, …}"

This is when im trying to do the POST request.

I ve added CORS filter too. But still getting this error.

Any suggestions or help ?

Thanks in advance :slight_smile:

jjmkay

in your video you use httpie in the command line to create your spring boot app from the command line not using the initializer web site. can you post the code on this blog to do that and let people know about httpie which is a pretty cool command line tool. also I would put a warning on your previous demos with springboot+ng7 etc that they will totally fail if you have ng8 and also those demos don’t correctly connect to okta as the property keys have changed i see from trying this demo and it actually working.

Matt Raible

Hello Prasad,

It looks like you’re using URLs that aren’t used in this tutorial. For example, /api/register. Are you embedding are sign-in widget and getting this error? I’m unsure where it’s coming from.

Matt Raible

The demo script for the video has the command you can use. My previous posts explicitly specific the version you should use, so I don’t think a warning is necessary.

Thanks for the feedback though! I really appreciate it. I’ll be creating a new tutorial for Angular 9 once it’s released.

jjmkay

In Java it is very easy to do a Java7 tutorial on a Java 8 JDK so I’m so used to backward compatibility. Guess angular does not have backwards compatibility.

Matt Raible

Angular has had pretty good backward compatibility since v5. What changed in the previous tutorial and this one was Spring Boot 2.0 vs Spring Boot 2.1. In 2.1, they added OIDC support directly to Spring Security, hence the property name changes. I wrote a post on Spring Boot 2.1 that might help. You might find Migrate Your Spring Boot App to the Latest and Greatest Spring Security and OAuth 2.0 useful as well.

AHMED SM

Thank you for this great tutorial, I have an error it says Property ‘name’ does not exist on type ‘CarListComponent’.
and I have searched and couldnt find a definition for Car properties Can you help me please

Matt Raible

You should be reading cars from CarListComponent, not name. Make sure the “*ngFor” in your car-list.component.html looks like the following:


<div *ngfor=“let car of cars”>
{{car.name}}
</div>

Josh Magdaleno

Is anybody else unable to install @oktadev/schematics ? I have tried using ng and yarn but I always getting an array saying it’s unable to find package-lock.json. So i remove node_modeles and my package-lock.json, and then run yarn install, after I again try to install @oktadev/schematics and It gives me the same issue.

Matt Raible

What error are you seeing? I haven’t had any problems lately.

Jazmin Perez

Hello Matt, thank you for the tutorial.
I am at the last step of the tutorial incorporating okta. I stopped and ran ng serve and I got this error:

Only initialized variables and constants can be referenced in decorators because the value of this variable is needed by the template compiler.
@okta/okta-angular/dist/src/okta/models/okta.config.ts(24,22): Error during template compile of ‘OKTA_CONFIG’
Only initialized variables and constants can be referenced in decorators because the value of this variable is needed by the template compiler.
…Invalid provider for the NgModule 'AuthRoutingModule

Do you know how I should go about this?

Adil Khan

Hi Matt,
Great tutorial; A lot a concepts are covered. I just wanted to know since you have included spring-data-rest as a dependency the responses should include fields like _links but the json object returned seems to be missing it.

Matt Raible

Hello Adil,

You are correct that if the data is returned from the CarRepository class (that’s decorated with @RepositoryRestResource), the JSON will contain _links, and no IDs. However, in this example, the /cool-cars endpoint is from a Controller that returns a list of Car objects with no HATEOS behavior. When you edit, update, or delete a Car, the Car Repository is used and there’s _links. For example, in the CarEditComponent:


ngOnInit() {
this.sub = this.route.params.subscribe(params => {
const id = params.id;
if (id) {
this.carService.get(id).subscribe((car: any) => {
if (car) {
this.car = car;
this.car.href = car._links.self.href;
this.giphyService.get(car.name).subscribe(url => car.giphyUrl = url);
} else {
console.log(Car with id '${id}' not found, returning to list);
this.gotoList();
}
});
}
});
}

Lynn

Hello, I’m facing the same problem, were you able to fix it ?

ERROR in src\app\auth-routing.module.ts(43,16): Error during template compile of ‘AuthRoutingModule’
Only initialized variables and constants can be referenced in decorators because the value of this variable is needed by the template compiler in ‘OKTA_CONFIG’
‘OKTA_CONFIG’ references ‘OKTA_CONFIG’
‘OKTA_CONFIG’ is not initialized at @okta\okta-angular\dist\src\okta\models\okta.config.ts(24,22).

Matt Raible

Upgrading to the Okta Angular SDK v1.3.1 should fix this issue.

Lynn

thanks for the reply, I tried doing that, and it fixed the error indeed, yet I’m having more issues: when I try to login, it doesn’t redirect to okta, it takes me directly to “implicit/callback page” when I inspect it, this is what I got:
Error: Uncaught (in promise): AuthApiError
Error
at Object.<anonymous> (okta-auth-js.min.js:39)
at t (okta-auth-js.min.js:13)

Matt Raible

You might try removing node_modules and running npm install. If that doesn’t work, please enter an issue in our Angular SDK project on GitHub.