ngx-gallery | A simple responsive native gallery component | Widget library

My angular project seems to suddenly fails to build on AWS Code Build. I even reverted back to a commit before I made changes to the project (these changes wouldn't have affected the packages or build commands anyway but thought I would just incase something had changed). When I build using ng build --prod on my machine it builds fine but when AWS Code Build runs during the pipeline execution it throws this error:

I have this ngx-gallery-9 stackblitz here and I'm trying to figure out how to apply a :first-of-type or nth-child(1) to 'fa-star' icon in the image gallery.

Problem - I want to color just the 1st 'fa-star' font awesome icon in the gallery. So just the 1st image is colored yellow.

I've tried a couple of different things but they all seem to apply the css to every icon or none of the icons, not just the first

couple of things I've tried below with no luck

I am stuck at some hard code method to bring images from an api directly into the gallery or lightbox... I coudn't find any tutorials , so i found this example:

https://stackblitz.com/edit/ngx-gallery-imageviewer

And i tried to change it for my code and I managed to get images in arrays , but I don't know how to pass them into property like this dude does or something similar..

I'm stuck at this point where I must pass my images to that variable with some properties:

My code:

For production build i am using ng build --prod command but getting this error

package.json

I'm wondering, how to give ngx-gallery (https://github.com/MurhafSousli/ngx-gallery) a new height. It has a fixed value of 500px and changing the parent divs height is not changing anything.

I was looking either for some attribute in the template like this

I'm using angular firestore to pull image references from a Firebase database. I know how to get the observible from the data base and hook it into the template via async, but I want to expose the data to my component to read Oninit(). I've attempted multiple ways of dragging the data out but none have been sucessfull. Code Spinets below

product.model.ts

I have an angular 9 project. I have installed different libraries on it and after installing ngx-gallery and some issues for Rendere2 and etc, I edited some file in node-Module/angular/core like core.d.ts. I am very new to angular. now my project does not running, then I tried to delete node_module to install it again but I couldn't. I wanna know Do I have any chance to fix all these with reinstalling npm or not. Thanks so much

update:I attached an image of errors that I have now.

I've just upgraded Angular cli and one of my project from 7.0.7 to 7.1.0.

I've followed this post and @Francesco Borzi's answer.

now I've tried running my project using:

I have a problem when I add the ngx-gallery. When inspect an error appears ERROR Type Error: The class constructor HammerGestureConfig cannot be invoked without 'new'

I have added hammerjs in app.module but there is still a problem

This is my app.module