How to load a custom .pbf file in ngx-openlayers

Question

I was able to load maps using the ngx-openlayers with the following code

   <aol-map [width]="'100%'" [height]="'100%'">
      <aol-view [zoom]="zoom">
        <aol-coordinate [x]="5" [y]="45" [srid]="'EPSG:4326'"></aol-coordinate>
      </aol-view>
      <aol-layer-tile [opacity]="opacity">
        <aol-source-osm></aol-source-osm>
      </aol-layer-tile>
      <aol-layer-vector [opacity]="opacity">
        <aol-source-vector>
          <aol-feature>
            <aol-geometry-point>
              <aol-coordinate [x]="5" [y]="45" [srid]="'EPSG:4326'"></aol-coordinate>
            </aol-geometry-point>
            <aol-style>
              <aol-style-circle [radius]="10">
                <aol-style-stroke [color]="'black'" [width]="width"></aol-style-stroke>
                <aol-style-fill [color]="'green'"></aol-style-fill>
              </aol-style-circle>
            </aol-style>
          </aol-feature>
          <aol-feature>
            <aol-geometry-point>
              <aol-coordinate [x]="5.1" [y]="45.1" [srid]="'EPSG:4326'"></aol-coordinate>
            </aol-geometry-point>
            <aol-style>
              <aol-style-icon [src]="'assets/marker.png'" [anchor]="[0.5, 1]" [anchorXUnits]="'fraction'" [anchorYUnits]="'fraction'" [scale]="0.1"
                [anchorOrigin]="'top-left'">
              </aol-style-icon>
            </aol-style>
          </aol-feature>
        </aol-source-vector>
      </aol-layer-vector>
    </aol-map> 

My issue is I want to load a custom map location that I have served on my local machine using MapTile server on http://localhost:8090/tileserver.php#trails/ol3 URL. Now the XYZ URL from the above server is ( http://localhost:8090/tileserver.php?/index.json?/trails/ {z}/{x}/{y}.pbf)

How can I load this map using the ngx-openlayers packkage

I have tried to use this but it is not working

<aol-map [width]="'500px'" [height]="'300px'">
        <aol-interaction-default></aol-interaction-default>
        <aol-control-defaults></aol-control-defaults>
        <aol-control-fullscreen></aol-control-fullscreen>
        <aol-layer-tile>
        <aol-source-osm></aol-source-osm>
        <aol-source-xyz [url]="'http://localhost:8090/tileserver.php?/index.json?/trails/{z}/{x}/{y}.pbf'">
        </aol-source-xyz>
        </aol-layer-tile>

        <aol-view [zoom]="12">
        <aol-coordinate [x]="6.47" [y]="53.44" [srid]="'EPSG:4326'"></aol-coordinate>
        </aol-view>
        </aol-map>

Answer 1

So yeah I'm about to answer my own question cause it might help someone in the future.

The Basics

There are two broad classifications for maps from OSM (OpenStreetMap)

1.Raster Format: This one is the raster image (PNG, JPEG, SVG ...) tiles for the map. This format can be compressed and put it to .mbtiles format. You can use tools like mbuilt to extract the contents into the tms, wsm or XYZ folder structure. This one is the easy and faster option.

2. Vector Format: This one is a Vector file format it can have multiple file type like .pbf inside it. It can also be compressed into a .mbtiles file. we need a tile server to render the contents of the vector files. Tile server GL is a tile server to serve both vector/raster map files (mbtiles)

After solving the offline hosting issue, I have used a default leaflet.js package for angular and everything worked fine without an issue.

I used OpenMaptiles map files to host them using the tileserver-gl