Vector Openlayers错误：意外标记<；在尝试加载本地geojson时，位于位置0的JSON中

我正在尝试加载本地geojson数据。。。但是无论是

url:“./dpt.geojson”

还是我的变量

departmentsgeojson

都不起作用。我收到以下错误消息：

ERROR
Error: Unexpected token < in JSON at position 0

有什么想法吗？谢谢

import { Component, OnInit } from "@angular/core";

import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import ZoomToExtent from "ol/control/ZoomToExtent";
import "ol/ol.css";
import GeoJSON from "ol/format/GeoJSON";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { defaults as defaultControls } from "ol/control";
import { departementsGeoJSON } from "../../models/departements.model";

@Component({
  selector: "app-map",
  templateUrl: "./map.component.html",
  styleUrls: ["./map.component.css"]
})
export class MapComponent implements OnInit {
  hovered;
  selected;

  map: Map;

  ngOnInit() {
    this.map = new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new XYZ({
            url: "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          })
        }),
        new VectorLayer({
          source: new VectorSource({
            format: new GeoJSON(),
            url: "./dpt.geojson" // Im trying make it works
            // departementsGeoJSON // I also tried make it works
            // "https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements-version-simplifiee.geojson" // Only this one worked but i want to load from my local dpt.geojson file or departements.model variable. (see one of the two lines above)
          })
        })
      ],
      view: new View({
        center: [253079, 5929220],
        zoom: 6
      }),
      controls: defaultControls().extend([
        new ZoomToExtent({
          extent: [
            813079.7791264898,
            5929220.284081122,
            848966.9639063801,
            5936863.986909639
          ]
        })
      ])
    });
    this.map.setTarget("map");
  }
}