importing ngx-highlight.js themes cause mime type error

Question

I just added ngx-highlight.js to my Angular project and am having some difficulty figuring out how to get it set up. I've been following these instructions and looking at this stackblitz to figure out how to set everything up. So far my code looks like this

main.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(SITEROUTES),
    provideAnimations(),
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        coreLibraryLoader: () => import('highlight.js/lib/core'),
        lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'),
        languages: {
          css: () => import('highlight.js/lib/languages/css')
        },
        themePath: 'node_modules/highlight.js/styles/a11y-dark.css'
      }
    }
  ]
};


bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));

GettingStartedComponent

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
import{ HighlightModule, HighlightLoader } from 'ngx-highlightjs';

@Component({
  selector: 'app-getting-started-page',
  standalone: true,
  imports: [CommonModule, RouterLink, HighlightModule],
  templateUrl: './getting-started-page.component.html',
  styleUrls: ['./getting-started-page.component.css']
})

export class GettingStartedPageComponent {

  code: string =
  `.demoClass{
  display: grid;
  place-self: center;
}
  
  `;

  constructor(){}

}

Template

<pre>
  <code
    [highlight]="code"
    [languages]="['css']"
    [lineNumbers]="true"
  >

  </code>
</pre>

When I added themePath: 'node_modules/highlight.js/styles/a11y-dark.css' in my main.ts file I got the following error

Refused to apply style from 'http://localhost:4200/node_modules/highlight.js/styles/a11y-dark.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I noticed in the stackblitz example that they imported a module into the constructor so I added this to mine

constructor(private hljsLoader: HighlightLoader){
  this.hljsLoader.setTheme('node_modules/highlight.js/styles/a11y-dark.css');
}

That created the same error so I figured maybe the path was wrong and added ../../../ until I got up to the root folder so it would follow the proper path and that didn't make any difference. I tried importing it into my component's stylesheet like this

@import url('../../../../../node_modules/highlight.js/styles/a11y-dark.css');

This made the background of of the <pre> tag a charcoal gray but all the text was white rather than being color coded, there also wasn't any margin between the text and the line numbers. I also tried adding the stylesheet for the theme to my angular.json file in both the style tags present however this makes no difference. What am I doing wrong?

UPDATE

So I discovered adding the theme to my angular.json file makes it work after re-running ng serve however the column for the line numbers still doesn't look right as you can see bellow.

See how the second one has a nice column with a border and a little margin between the border and the text while in the first one the text is crammed right next to the numbers? How do I fix this? Even though the text styling now works I still get the MIME type error in the console as well. What am I missing?