Context
Following the part 1, here I just build a frontend with Angular to call my spring restful API and display the data.
1. Front-end with Angular
Example to follow
- https://jojozhuang.github.io/project/game-store-angular/
- https://jojozhuang.github.io/tutorial/building-web-application-with-angular/
Use of Material style
https://material.angular.io/components/button/overview
2. Issues I faced
How to consume API data with Angular
- How To Consume Web API Using Angular
- Generic Approach to Consume REST API in Angular
- Angular HttpClient (6/7/8/9/10): Consume REST API Example
- Rest API with Angular
- Angular 9 – HTTPClient POST Request Examples
CORS errors
- Do you know how to resolve CORS issues in Angular?
- Angular 12 Proxy Configuration to Handle CORS Issue
- CORS — Story of requesting twice
Use a proxy config
"start": "ng serve --proxy-config proxy.config.json"
4. Deployment on Heroku
A lot of errors when deploying
partial fix with the following console line
npm i @angular/cli @angular-devkit/build-angular @angular/compiler-cli typescript --save-prod
npm link @angular/cli
Unfortunately, even when deploying on Netlify, it seems that a website deployed on those platforms is not allowed to link to another app.