proxy file added

Author: actionanand

README.md

@@ -9,6 +9,16 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 3. Run the express server `yarn start`
 4. Open the URL `http://localhost:3000/places` in your browser
 
+## Configure `proxy` file
+
+Change the value of `target` in `proxy file` as your backend api url
+
+## Run Angular with `proxy` server
+
+```sh
+yarn develop
+```
+
 ## Cloning Guide
 
 1.  Clone only the remote primary HEAD (default: origin/master)

package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "develop": "ng serve --proxy-config proxy.json",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "build:gh": "ng build --base-href /angular-http-project/",

proxy.json

@@ -0,0 +1,20 @@
+{
+  "/api/v2/*": {
+    "target": "https://3000-actionanand-angularhttp-six5y8k89a8.ws-us116.gitpod.io",
+    "secure": false,
+    "logLevel": "debug",
+    "changeOrigin": true,
+    "pathRewrite": {
+      "^/api/v2/": "/"
+    }
+  },
+  "/api/v1/*": {
+    "target": "http://localhost:3000",
+    "secure": false,
+    "logLevel": "debug",
+    "changeOrigin": true,
+    "pathRewrite": {
+      "^/api/v1/": "/"
+    }
+  }
+}

src/app/places/place.model.ts renamed to src/app/models/place.model.ts

@@ -1,6 +1,6 @@
 import { Component, signal } from '@angular/core';
 
-import { Place } from '../place.model';
+import { Place } from '../../models/place.model';
 import { PlacesComponent } from '../places.component';
 import { PlacesContainerComponent } from '../places-container/places-container.component';
 

src/app/places/available-places/available-places.component.ts

@@ -1,6 +1,6 @@
 import { Component, input, output } from '@angular/core';
 
-import { Place } from './place.model';
+import { Place } from '../models/place.model';
 
 @Component({
   selector: 'app-places',

src/app/places/places.component.ts

@@ -1,13 +1,14 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { Injectable, signal } from '@angular/core';
 
-import { Place } from './place.model';
+import { Place } from '../models/place.model';
 
 @Injectable({
   providedIn: 'root',
 })
 export class PlacesService {
   private userPlaces = signal<Place[]>([]);
+  private readonly url = '/api/v2/places';
 
   loadedUserPlaces = this.userPlaces.asReadonly();
 

src/app/places/places.service.ts renamed to src/app/services/places.service.ts

@@ -1,6 +1,8 @@
 import { bootstrapApplication } from '@angular/platform-browser';
+import { provideHttpClient } from '@angular/common/http';
 
 import { AppComponent } from './app/app.component';
 
-
-bootstrapApplication(AppComponent).catch((err) => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [provideHttpClient()],
+}).catch(err => console.error(err));