How to load a mbtile file with Leaflet in Angular?

Question

I have this proyect with the leaflet library for render a map, with this url works fine

https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

but when I put a url with a local mbtile file it doesn't work, what could be wrong ?

I need to render a map offline, I download a countries-raster.mbtiles file but also it doesnt work too

leaflet.tileLayer('../assets/countries-raster.mbtiles

app.component.ts

import {Component, OnInit} from '@angular/core';
import * as leaflet from 'leaflet';
import 'heatmap.js';
import {heatData} from "./data";

declare const HeatmapOverlay: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  private map: any;

  ngOnInit(): void {
    this.initMap();
  }

  private initMap(): void {
    // Initialising map with center point by using the coordinates
    // Setting initial zoom to 3
    this.map = leaflet.map('map', {
      center: [ 39.8282, -98.5795 ],
      zoom: 3
    });

    // Initialising tiles to the map by using openstreetmap
    // Setting zoom levels
    const tiles = leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      minZoom: 3,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });

    // Adding tiles to the map
    tiles.addTo(this.map);

    
  }
}