env file added

Author: actionanand

README.md

@@ -19,6 +19,12 @@ Change the value of `target` in `proxy file` as your backend api url
 yarn develop
 ```
 
+## Generating Environmental files in Angular 15+
+
+```sh
+ng g environments
+```
+
 ## Cloning Guide
 
 1.  Clone only the remote primary HEAD (default: origin/master)

angular.json

@@ -51,7 +51,13 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"

src/app/places/places.component.ts

@@ -1,6 +1,7 @@
 import { Component, input, output } from '@angular/core';
 
 import { Place } from '../models/place.model';
+import { environment as env } from '../../environments/environment.development';
 
 @Component({
   selector: 'app-places',
@@ -12,8 +13,8 @@ import { Place } from '../models/place.model';
 export class PlacesComponent {
   places = input.required<Place[]>();
   selectPlace = output<Place>();
-  // protected url = 'http://localhost:3000/';
-  protected url = 'https://3000-actionanand-angularhttp-six5y8k89a8.ws-us116.gitpod.io/';
+
+  protected url = env.backendUrl;
 
   onSelectPlace(place: Place) {
     this.selectPlace.emit(place);

src/environments/environment.development.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  backendUrl: 'https://3000-actionanand-angularhttp-six5y8k89a8.ws-us116.gitpod.io/',
+};

src/environments/environment.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  backendUrl: 'https://3000-actionanand-angularhttp-six5y8k89a8.ws-us116.gitpod.io/',
+};