Error when adding icons from PRO

I found out strange behaviour when migrating from FA4 to FA5. I thought I had some strange code so I started new ASP.NET Core Angular template and repeat strange behaviour: This code works:

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

library.add(faCoffee);
  <fa-icon icon="coffee"></fa-icon>
  <fa-icon icon="calendar"></fa-icon>   <!-- Not rendered (because it was not added to library which is expected -->

If I also add faCalendar to library, icon is displayed.

But adding icon from PRO shows errors (but Angular is compiled and page is displayed):

Error TS2345 (TS) Argument of type ‘IconDefinition’ is not assignable to parameter of type ‘IconDefinitionOrPack’. Type ‘IconDefinition’ is not assignable to type ‘IconPack’. Index signature is missing in type ‘IconDefinition’. D:\Temp\FontAwesome\FontAwesome\ClientApp (tsconfig or jsconfig project) D:\Temp\FontAwesome\FontAwesome\ClientApp\src\app\share.module.ts

Another strange behaviour is that when I include one icon from PRO, all icons works:

import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faHome } from "@fortawesome/fontawesome-pro-regular";
library.add(faHome);

  <fa-icon [icon]="['far', 'home']"></fa-icon>
  <fa-icon [icon]="['far', 'key']"></fa-icon>    <!-- Just works, but I think it shouldn't. -->

Everything from packages.json about @fortawesome:

        "@fortawesome/angular-fontawesome": "0.1.0-10",
        "@fortawesome/fontawesome-pro-light": "^5.0.13",
        "@fortawesome/fontawesome-pro-regular": "^5.0.13",
        "@fortawesome/fontawesome-svg-core": "^1.2.0-14",

[robmadole]

@jmdmao check out the docs we have here: https://fontawesome.com/how-to-use/with-the-api/other/tree-shaking. It talks about the issues you are running into.

[john-md86]

@robmadole thanks!