How to use the ol/proj.fromLonLat function in ol

})
      ],
      target: 'map',
      view: this.view
    });

    this.geolocation = new Geolocation({
      // enableHighAccuracy must be set to true to have the heading value.
      trackingOptions: {
        enableHighAccuracy: true
      },
      projection: this.view.getProjection()
    });

    const coord = [28.232592, -25.755710]; // TUKS IT BUILDING COORDS
    this.view.setCenter(fromLonLat(coord));

    this.getElement('track').addEventListener('change', () => {
      console.log('works');
      this.geolocation.setTracking(true);
    });

    this.geolocation.on('change', () => {
      this.getElement('accuracy').innerText = this.geolocation.getAccuracy() + ' [m]';
      this.getElement('altitude').innerText = this.geolocation.getAltitude() + ' [m]';
      this.getElement('altitudeAccuracy').innerText = this.geolocation.getAltitudeAccuracy() + ' [m]';
      this.getElement('heading').innerText = this.geolocation.getHeading() + ' [rad]';
      this.getElement('speed').innerText = this.geolocation.getSpeed() + ' [m/s]';
      this.getElement('lat').innerText = this.geolocation.getPosition()[0];
      this.getElement('lon').innerText = this.geolocation.getPosition()[1];
      // console.log( this.geolocation.getPosition());
      // alert('changed');

import { render } from 'react-dom';
import { CoordinateReferenceSystemCombo } from '../../index.js';

import proj4 from 'proj4';
import OlMap from 'ol/map';
import OlView from 'ol/view';
import OlLayerTile from 'ol/layer/tile';
import OlSourceOsm from 'ol/source/osm';
import OlProjection from 'ol/proj';
import OlExtent from 'ol/extent';

//
// ***************************** SETUP *****************************************
//
const defaultView = new OlView({
  center: OlProjection.fromLonLat([37.40570, 8.81566]),
  zoom: 4
});
const map = new OlMap({
  layers: [
    new OlLayerTile({
      name: 'OSM',
      source: new OlSourceOsm()
    })
  ],
  view: defaultView
});

OlProjection.setProj4(proj4);

/**
 * set map projection and perform client-side raster reprojection from

import federalStates from '../../../assets/federal-states-ger.json';

import {
  FeatureGrid
} from '../../index.js';

const map = new OlMap({
  layers: [
    new OlLayerTile({
      name: 'OSM',
      source: new OlSourceOsm()
    })
  ],
  view: new OlView({
    center: OlProj.fromLonLat([37.40570, 8.81566]),
    zoom: 4
  })
});

const format = new OlFormatGeoJson();
const features = format.readFeatures(federalStates);

// eslint-disable-next-line require-jsdoc
const nameColumnRenderer = val =&gt; <a href="{`https://en.wikipedia.org/wiki/${val}`}">{val}</a>;

render(
  <div>
    <div>
      </div></div>

sources.push(new TileWMS());
sources.push(new VectorTile({}));
sources.push(new WMTS({
    tileGrid: new WMTSTileGrid({
        resolutions: [],
        matrixIds: []
    }),
    projection: "EPSG:4326",
    layer: "blah",
    style: "default",
    matrixSet: "thereisnospoon"
}));
sources.push(new Zoomify());

olXml.parse("Bar");
const tx = olProj.fromLonLat([0, 0]);
const center = olExtent.getCenter([1, 2, 3, 4]);

navigator.geolocation.getCurrentPosition(function(pos) {
  const coords = fromLonLat([pos.coords.longitude, pos.coords.latitude]);
  map.getView().animate({center: coords, zoom: 10});
  //! [add-point]
  position.addFeature(new Feature(new Point(coords)));
  //! [add-point]
});

export function toWebMercatorFromLatLong(coords) {
  return fromLonLat(coords);
  //return transform(coords, "EPSG:4326", "EPSG:3857");
}

navigator.geolocation.getCurrentPosition(function(pos) {
  const coords = fromLonLat([pos.coords.longitude, pos.coords.latitude]);
  map.getView().animate({center: coords, zoom: 10});
  //! [add-point]
  position.addFeature(new Feature(new Point(coords)));
  //! [add-point]
});

setView(options: MapViewOptions) {
    if (this.viewController !== undefined) {
      this.viewController.clearStateHistory();
    }

    const view = new olView(options);
    this.ol.setView(view);

    this.unsubscribeGeolocate();
    if (options) {
      if (options.center) {
        const projection = view.getProjection().getCode();
        const center = olproj.fromLonLat(options.center, projection);
        view.setCenter(center);
      }

      if (options.geolocate) {
        this.geolocate(true);
      }
    }
  }

addLocation(loc: any[], to: number[], idx: number = 0) {
    const point = new Feature(new Point(fromLonLat(to)));
    this.ordersPoint.push(point);

    if (idx !== 0) {
      const from = loc[idx - 1];
      const line = new LineString([fromLonLat(from), fromLonLat(to)]);
      const feature = new Feature({
        geometry: line,
        lonLat: to
      });
      this.ordersTracking.addFeature(feature);
    }
  }

public transformCoordinateFromLonLat(lonlat: Coordinate2D, proj?: ProjectionLike): Coordinate2D {
        return olProj.fromLonLat(lonlat as number[], proj) as Coordinate2D;
    }
    public transformCoordinate(coordinate: Coordinate2D, source: ProjectionLike, target: ProjectionLike): Coordinate2D {