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

Developer Blog Comments
101

Brian Demers

I opened https://github.com/okta/okt… to track this, we can move the discussion over there. Thanks Veda!

102

Dwayne Patel

i am using version 6

103

Matt Raible

If you’re using using Angular 6+, you can make this code work by installing rxjs-compat with npm i rxjs-compat.
You could also use this tutorial, which uses Angular 7. The code should work for Angular 6 too. https://developer.okta.com/…

104

Avadhut Raja

Thanks a lot for your reply.

105

Matt Raible

The @RepositoryRestResource annotation creates endpoints for the Car entity at http://localhost:8080/cars.


package com.okta.developer.demo;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.rest.core.annotation.RepositoryRestResource;

@RepositoryRestResource
interface CarRepository extends JpaRepository<Car, Long> {
}

You can GET, PUT, POST, and DELETE to it. For example, here’s how with HTTPie.


http GET :8080/cars
http POST :8080/cars name='VW Bus’
http PUT :8080/cars/6 email='VW Bug’
http DELETE :8080/cars/6

106

eldad ya’akobi

when I’m trying to get a car by ID I have a cross origin error.
do you know how can I solve it?

107

Matt Raible

The post tells you how to solve this near the end. You need to add the following @Bean to your DemoApplication.java file to allow cross-origin requests from http://localhost:4200.


@Bean
@SuppressWarnings(“unchecked”)
public FilterRegistrationBean simpleCorsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.setAllowedOrigins(Collections.singletonList(“http://localhost:4200”));
    config.setAllowedMethods(Collections.singletonList(""));
    config.setAllowedHeaders(Collections.singletonList(""));
    source.registerCorsConfiguration("/**", config);
    FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
    bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
    return bean;
}


108

eldad ya’akobi

I am unable to find Single-Page App on OKTA applications.
Is there a link to it?

109

Matt Raible

You should be see it as an option when you navigate to Applications > Add Application.

https://uploads.disquscdn.c…

If you don’t see this option, I suspect you’re in the Classic UI and need to switch to the Developer Console.

https://uploads.disquscdn.c…

110

eldad ya’akobi

for some reason I get the following message on the server when trying to save:

: Request method ‘POST’ not supported

111

Matt Raible

Can you compare your code with this post’s example from GitHub? SmartSynchronize makes it easy to compare directories (note: delete node_modules first). You could also look at a version of this tutorial that’s updated for Angular 7 and Spring Boot 2.1.

112

eldad ya’akobi

It seems that it didn’t load the method correctly. Try to find out why is it happening:

org.springframework.http.ResponseEntity<org.springframework.hateoas.resourcesupport> org.springframework.data.rest.webmvc.RepositoryEntityController.postCollectionResource(org.springframework.data.rest.webmvc.RootResourceInformation,org.springframework.data.rest.webmvc.PersistentEntityResource,org.springframework.data.rest.webmvc.PersistentEntityResourceAssembler,java.lang.String) throws org.springframework.web.HttpRequestMethodNotSupportedException

113

Khang Nguyen

https://uploads.disquscdn.c… hi all,

I’m having issue with the exact code given above. I’m stuck at the getname(name) method

114

Matt Raible

If you run your app with Maven, it will work. The reason you’re seeing this message is because you have to configure your IDE to recognize Lombok. It looks like you might be using VS Code, but I’m not sure. There are instructions for Intellij IDEA and Visual Studio Code on Lombok’s site.

115

Khang Nguyen

Thanks Matt, it does the trick :slight_smile:

116

Khang Nguyen

hi Matt,

Can you spend sometimes to look at this error please? https://uploads.disquscdn.c…

117

Matt Raible

If you compare your code with the example on GitHub, you’ll see that I put all the classes in the same file. If you do that, it’ll fix your problem. You can also put them in separate files and use imports to reference classes between them.

118

Khang Nguyen

I checked and compare the code. Everything is exactly the same what you have given on the web page but it still doesn’t work :frowning: . Sorry I really want to learn this but I’m just a starter. Here’s my Github repo https://github.com/mkavo92/…

119

Matt Raible

Thanks for providing a GitHub repo, this makes it much easier to figure out the issue. The problem is you have an invalid package name in CoolCarController.java. You have main.java.com.example.demo, when it should just be com.example.demo.


-package main.java.com.example.demo;
+package com.example.demo;

Here’s the exact line you need to change.

When writing Java code, I’d recommend using an IDE like IntelliJ IDEA, Eclipse, NetBeans, or VS Code. They’ll make it easier to catch issues like this one.

120

Zeth

Could you extend this blog and explain how I would now deploy this app and access it from the outside?

That would be very helpful!