ngx-google-places-autocomplete | Google Places autocomplete for angular web project | Autocomplete library

I've got this somewhat old Angular web application which was updated from Angular 6 to Angular 12, however, Angular CLI is not being used for building it, instead it relies on Webpack 5, its loaders and AngularWebpackPlugin from @ngtools/webpack.

Recently, I needed to upgrade to a latest version of a library I was using and I got greeted with the following warning after my production build:

I am developing a web application with Angular and I use Observable.
Currently, when I search into the firebase DB I simply make a *ngFor="let myvar of _myvar | async" and my HTML page well displays the data.
But every time a Subject intervenes, my HTML page doesn't display any data until I click on an element of the page...
Here is my code, if someone has an idea : home.component.html

I have a reactive form of which I am trying to get the value and assign it to a variable that is of a type defined in an interface. Although, this form is populated using the Google Places API (so all of the form controls are disabled and un-editable by the user, besides the first form control - that control being the field in which the user enters the initial address).

The reactive form is as follows:

I'm using the Angular Material google maps component for integrating Maps in to an Ionic/Capacitor application.

https://github.com/angular/components/tree/master/src/google-maps

The map functionality works perfectly fine when I'm developing the application. When I try to run the test file for the component that implements the Google Map, I get this error:

I'm using Google Place Autocomplete in my child component, but when each input is filling with data, the parent component does not get the change, so i can't post to server valid data.

I have a child component that I call in the parent component:

I followed two tutorials that suggested installed the following:

ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated npm install @ionic-native/fcm

I kept getting errors after installing to a device that said the fcm plugin isn't installed so I viewed https://www.npmjs.com/package/cordova-plugin-fcm-with-dependecy-updated#fcmontokenrefresh site that suggested uninstalling npm uninstall @ionic-native/fcm # Ionic support is included and conflicts with @ionic-native's implementation.

So I did that and used this instead:

Trying to get the latitude and longitude from google maps prediction information. Currently, I am using the google-maps component.

I've managed to get a search bar in with ngx-google-places-autocomplete as well. What I need is to get the coordinates of the first search result item when the user clicks enter. Here is what I have so far:

When I run npm run start I get the below error regarding firebase.

Tech: Angular version 9, Firebase, Firestore, Geofirestore Angular CLI.

Error:

I'm Trying to add SSR for my angular application and after days i was able to finally Build it right.

Build Command : npm run build:ssr

Out Put :