False promise and stylesheet not loading error on a simple D3 barchart visualization

Question

I am not sure why I am getting a false promise and stylesheet not loading error. I think everything looks good in my code. Please feel free to look at my code and let me know if you see anything wrong. Thank you! It returns a false promise on the console and the error is:

Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

This is the code I have for the TS file:

import { Component, AfterViewInit } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.css'],
})
export class PieChartComponent implements AfterViewInit {
  svg: any = null;
  g: any = null;
  rects: any = null;
  name: string = '';
  age: number = null;
  convertedData: Map<string, number> = new Map();
  readonly MARGIN = { LEFT: 100, RIGHT: 10, TOP: 10, BOTTOM: 130 }
  readonly WIDTH = 600 - this.MARGIN.LEFT - this.MARGIN.RIGHT
  readonly HEIGHT = 400 - this.MARGIN.TOP - this.MARGIN.BOTTOM

  constructor() {}
  async ngAfterViewInit() {

    this.svg = d3
      .select('#canvas-area')
      .append('svg')
       .attr("width", this.WIDTH + this.MARGIN.LEFT + this.MARGIN.RIGHT)
        .attr("height", this.HEIGHT + this.MARGIN.TOP + this.MARGIN.BOTTOM)

        this.g = this.svg.append("g")
        .attr("transform", `translate(${this.MARGIN.LEFT}, ${this.MARGIN.TOP})`)

        // X label
this.g.append("text")
.attr("class", "x axis-label")
.attr("x", this.WIDTH / 2)
.attr("y", this.HEIGHT + 110)
.attr("font-size", "20px")
.attr("text-anchor", "middle")
.text("The word's tallest buildings")

// Y label
this.g.append("text")
  .attr("class", "y axis-label")
  .attr("x", - (this.HEIGHT / 2))
  .attr("y", -60)
  .attr("font-size", "20px")
  .attr("text-anchor", "middle")
  .attr("transform", "rotate(-90)")
  .text("Height (m)")

  await d3.json('app/data/data.json').then((data) => {
    data.forEach((d)=>{
      this.convertedData.set(d['name'], Number(d['height']));
    });
    console.log(this.convertedData);

    const x = d3.scaleBand().domain(this.convertedData.map(d => d.name))
    .range([0, this.WIDTH])
    .paddingInner(0.3)
    .paddingOuter(0.2)

    const y = d3.scaleLinear()
    .domain([0, d3.max(this.convertedData, d => d[1]) as number])
    .range([0, this.HEIGHT])

    const xAxisCall = d3.axisBottom(x)
  this.g.append("g")
    .attr("class", "x axis")
    .attr("transform", `translate(0, ${this.HEIGHT})`)
    .call(xAxisCall)
    .selectAll("text")
      .attr("y", "10")
      .attr("x", "-5")
      .attr("text-anchor", "end")
      .attr("transform", "rotate(-40)")

  const yAxisCall = d3.axisLeft(y)
    .ticks(3)
    .tickFormat(d => d + "m")
  this.g.append("g")
    .attr("class", "y axis")
    .call(yAxisCall)

    this.rects = this.svg.selectAll('rect').data(this.convertedData);

    this.rects
      .enter()
      .append('rect')
      .attr('y', 0)
      .attr('x', (d)=>x(d.name))
      .attr('width', x.bandwidth)
      .attr('height', d=> y(d.height))
      .attr('fill', 'gray')
  })
}
}

And, this is data.json:

[{
        "name": "Burj Khalifa",
        "height": "350"
    },
    {
        "name": "Shanghai Tower",
        "height": "263.34"
    },
    {
        "name": "Abraj Al-Bait Clock Tower",
        "height": "254.04"
    },
    {
        "name": "Ping An Finance Centre",
        "height": "253.20"
    },
    {
        "name": "Lotte World Tower",
        "height": "230.16"
    }
]