VS Code breakpoints causing Angular warning "took longer than 2417 ms" when loading a page in my web app

Question

UPDATE - 5/19/23 - I added the "--host" parameter >ng serve --host=127.0.0.1 when running the server and now it works fine! I'll see if someone has anything to add, as I would think there is a better long term solution where I won't have to add this every time I start the server? I would also like to understand why the error message relates to performance? Link to the fix found here - https://stackoverflow.com/a/75784584/1186050

Problem - I just upgraded Angular Cli to 16.0.1 and Node to 18.16.0 and now I'm seeing warnings as I hit different pages in my Angular app. I also noticed that these warnings are only occurring when I have breakpoints!

I found this link here and tried putting in this below but it did not change anything

"start": "ng serve --host=127.0.0.1",

If I remove all breakpoints it works fine, no warnings!

Here is the warning message:

WARNING: Processing source-maps of https://localhost:4200/default-src_app_shared_models_countries_ts-node_modules_ngx-bootstrap_sortable_fesm2020_ngx-b-2e9b69.js took longer than 2417.002833000001 ms so we continued execution without waiting for all the breakpoints for the script to be set.

I'm guessing there are 2 issues with this warning, the first is countries.ts in my shared modules, which I will post below. It has the full list of countries with their country code so it's long and the second is the ngx-bootstrap library which I reference in a couple different modules in my app.

It says it's taking a long time (>2000ms) to load.

QUESTION - What should I do about this? I don't really want to suppress the warnings as this could lead to a potential issue in the future.

It's hard to imagine these 2 taking that long, but not sure what's going on under the hood.

countries.ts look like this:

// full list not shown 
export class Countries {
  countryCode = [{
      name: 'Afghanistan',
      code: 'AF'
    },
    {
      name: 'land Islands',
      code: 'AX'
    },
    {
      name: 'Albania',
      code: 'AL'
    },
    ...
  ];
}

// refernce it like this in a class
countryList = new Countries().countryCode;

and in my account.module.ts file I reference ngx-bootstrap sortable like this:

import { SortableModule } from 'ngx-bootstrap/sortable';

imports: [
    CommonModule,
    SharedModule,
    AccountRoutingModule,
    ModalModule.forRoot(),
    SortableModule.forRoot(),
    ...
  ],