v14 (and v15) now requires icon dependencies

[janpapenbrock]

Hey there, thanks for your work on this project!

The issue

I've just upgraded from v13 to v14 and am now seeing compiler errors:

./node_modules/ngx-sharebuttons/fesm2022/ngx-sharebuttons-icons.mjs:2:0-65 - Error: Module not found: Error: Can't resolve '@fortawesome/angular-fontawesome' in '/my-project/node_modules/ngx-sharebuttons/fesm2022'

./node_modules/ngx-sharebuttons/fesm2022/ngx-sharebuttons-icons.mjs:3:0-218 - Error: Module not found: Error: Can't resolve '@fortawesome/free-brands-svg-icons' in '/my-project/node_modules/ngx-sharebuttons/fesm2022'

./node_modules/ngx-sharebuttons/fesm2022/ngx-sharebuttons-icons.mjs:4:0-133 - Error: Module not found: Error: Can't resolve '@fortawesome/free-solid-svg-icons' in '/my-project/node_modules/ngx-sharebuttons/fesm2022'

I switched from SharedModule to SharedButtonDirective. I bring my own icons instead of using any of the provided icons.

Reproduction

I have reproduced the error with v15, too, on a fresh Angular v18 installation. I've pushed this as a repository here: https://github.com/janpapenbrock/ngx-sharebuttons-angular-18.

I basically followed this Wiki page (first usage example without icons): https://github.com/MurhafSousli/ngx-sharebuttons/wiki/Share-Button-Directive

This is the component: https://github.com/janpapenbrock/ngx-sharebuttons-angular-18/blob/main/src/app/app.component.ts

Error output

✘ [ERROR] Could not resolve "@fortawesome/angular-fontawesome"

    node_modules/ngx-sharebuttons/fesm2022/ngx-sharebuttons-icons.mjs:2:30:
      2 │ import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@fortawesome/angular-fontawesome" as external to exclude it from the
  bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@fortawesome/free-brands-svg-icons"

    node_modules/ngx-sharebuttons/fesm2022/ngx-sharebuttons-icons.mjs:3:181:
      3 │ ...okMessenger, faTelegramPlane, faMix, faXing, faLine } from '@fortawesome/free-brands-svg-icons';
        ╵                                                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@fortawesome/free-brands-svg-icons" as external to exclude it from the
  bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@fortawesome/free-solid-svg-icons"

    node_modules/ngx-sharebuttons/fesm2022/ngx-sharebuttons-icons.mjs:4:97:
      4 │ ...faPrint, faExclamation, faLink, faEllipsisH, faMinus } from '@fortawesome/free-solid-svg-icons';
        ╵                                                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@fortawesome/free-solid-svg-icons" as external to exclude it from the
  bundle, which will remove this error and leave the unresolved path in the bundle.

Context

I don't see why the icons module should even be compiled, as I'm not using the icons at all.

Also wondering whether there maybe are (peer?) dependencies missing in this file: https://github.com/MurhafSousli/ngx-sharebuttons/blob/master/projects/ngx-sharebuttons/package.json?

Environment

• Angular: v17 / v18
• ngx-sharebuttons: v14 / v15
• Browser(s): n/a
• Operating System (e.g. Windows, macOS, Ubuntu): Linux

[MurhafSousli]

I realized that in the new version, the share directive package we are using only the interface IconProp from the core package @fortawesome/fontawesome-svg-core, We can resolve this issue by replace the interface with any or add the core icons package it as dependency, this way it will be installed automatically with npm i ngx-sharebuttons but no code will be used from FontAwesome, only an interface.

But the problem here is that the icons package is being bundled even when not being used, I opened an issue to learn what is wrong ng-packagr/ng-packagr#2860

[janpapenbrock]

Looked into it a bit more, and it seems it is this import chain that leads to the packages being required:

1. SharedButtonDirective imports ShareService in https://github.com/MurhafSousli/ngx-sharebuttons/blob/master/projects/ngx-sharebuttons/src/lib/share-button.directive.ts#L19
2. ShareService imports SHARE_ICONS from ngx-sharebuttons/icons in https://github.com/MurhafSousli/ngx-sharebuttons/blob/master/projects/ngx-sharebuttons/src/lib/share.service.ts#L7C30-L7C52
3. SHARE_ICONS imports all three @fortawesome/... dependencies in https://github.com/MurhafSousli/ngx-sharebuttons/blob/master/projects/ngx-sharebuttons/icons/src/share-icons.ts

I'm not familiar with injection tokens, but maybe defining that token in its own file would help, to split up the imports?

At least @angular/components defines some injection tokens in their own files, examples:

• https://github.com/angular/components/blob/6f698fa4e24ef4637b2c83f43cb608df967a78b5/src/cdk/drag-drop/drag-parent.ts
• https://github.com/angular/components/blob/6f698fa4e24ef4637b2c83f43cb608df967a78b5/src/material/tabs/tab-config.ts#L8

[MurhafSousli]

Whoops, good catch! I didn't notice that import line.

[MurhafSousli]

We are still using IconProp interface from FontAwesome.

ngx-sharebuttons/projects/ngx-sharebuttons/src/lib/share-button.directive.ts

Line 17 in 30c3537

import { IconProp } from '@fortawesome/fontawesome-svg-core';

I added it as a dependency

ngx-sharebuttons/projects/ngx-sharebuttons/package.json

Lines 1 to 14 in 916105c

	{
	"name": "ngx-sharebuttons",
	"version": "15.0.0",
	"peerDependencies": {
	"@angular/common": ">=17.0.0",
	"@angular/core": ">=17.0.0",
	"@angular/cdk": ">=17.0.0"
	},
	"dependencies": {
	"tslib": "^2.3.0",
	"@fortawesome/fontawesome-svg-core": ">=6.5.0"
	},
	"sideEffects": false
	}

This mean the package will be installed behind the seen without the need to install it manually, is that fine?

I just publish a beta version 15.0.1-beta.0 try it out and tell me if that works well with you.

[janpapenbrock]

Thanks! I just tried it, works 👍

--

I believe though that the dependency is not really necessary for just importing that type information in the directive, as it will not be included in the compilation anyways, so I believe it would not fail even if I did not have that dependency installed.

You could also write this which would make it more explicit, I belive:

import type { IconProp } from '@fortawesome/fontawesome-svg-core';

Looking at the compiled directive seems to confirm this:

import { Directive, Input, Output, HostListener, inject, signal, effect, computed, input, EventEmitter, ElementRef } from '@angular/core';
import { ShareService } from './share.service';
import { SHARE_BUTTONS_CONFIG, } from './share.models';
import { DEFAULT_OPTIONS, SHARE_BUTTONS } from './share.defaults';
import { SHARE_BUTTONS_PROP } from './custom-share-button-provider';
import * as i0 from "@angular/core";
export class ShareButtonDirective {

The import from the external package does not show up. So I guess just splitting out the injection token would do the trick here.

But regardless of which solution you choose, great to see this working with the next release :)

[MurhafSousli]

@janpapenbrock I used the type imports and removed the dependency, could you try 15.0.1 and see if that works.

[janpapenbrock]

Works, thanks a lot!

[jcrespoven]

Hi @MurhafSousli , sorry to reopen this, but it seems that I'm experiencing the same problem as @janpapenbrock with version 15.0.2. I'm trying to use ShareButtonDirective with no icon but the following compilation error is being shown:

Error: node_modules/ngx-sharebuttons/lib/share-button.directive.d.ts:2:31 - error TS2307: Cannot find module '@fortawesome/fontawesome-svg-core' or its corresponding type declarations.

import type { IconProp } from '@fortawesome/fontawesome-svg-core';

I've just installed ngx-sharebuttons (npm i ngx-sharebuttons) and checked that no font-awesome dependencies where installed in the process (btw, I don't need them).

[sqrter]

The problem is still there in 15.0.3

[Oussemasahbeni]

Im experiencing the same problem usinga angular 18.0.1 and ngx-sharebuttons 15.0.3

[Oussemasahbeni]

any updates on this issue ?

[MurhafSousli]

Removed the type imports from the directive package in 15.0.4 15.0.6

[Oussemasahbeni]

i got this error after upgrading to the new version

this this is how I'm using the directive

<div *transloco="let t; prefix: 'share-buttons'">
    <button mat-icon-button type="button" [matMenuTriggerFor]="shareMenu">
        <mat-icon svgIcon="heroicons_outline:share" class="text-gray-600 dark:text-gray-200" />
    </button>

    <mat-menu #shareMenu="matMenu">
        <button type="button" mat-menu-item [shareButton]="'facebook'">
            <mat-icon [svgIcon]="'feather:facebook'" />
            <span>{{ t('shareOnFacebook') }}</span>
        </button>
        <button type="button" mat-menu-item [shareButton]="'x'">
            <mat-icon [svgIcon]="'feather:X'" />
            <span>{{ t('shareOnTwitter') }}</span>
        </button>
        <button type="button" mat-menu-item [shareButton]="'linkedin'" >
            <mat-icon [svgIcon]="'feather:linkedin'" />
            <span>{{ t('shareOnLinkedIn') }}</span>
        </button>
        <button type="button" mat-menu-item (click)="copyLink()">
            <mat-icon>link</mat-icon>
            <span>{{ t('copyLink') }}</span>
        </button>
    </mat-menu>
</div>

Ts code:

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatSnackBar } from '@angular/material/snack-bar';
import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
import { ShareButtonDirective } from 'ngx-sharebuttons';

@Component({
    selector: 'share-buttons',
    standalone: true,
    imports: [ShareButtonDirective, MatIconModule, MatButtonModule, MatMenuModule, TranslocoModule],
    templateUrl: './share-buttons.component.html',
    styleUrl: './share-buttons.component.scss',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ShareButtonsComponent {
    private readonly snackBar = inject(MatSnackBar);
    private readonly _translocoService = inject(TranslocoService);

    copyLink(): void {
        const url = window.location.href;
        navigator.clipboard.writeText(url).then(() => {
            this.snackBar.open(
                this._translocoService.translate('share-buttons.linkCopied'),
                this._translocoService.translate('share-buttons.close'),
                { duration: 2000 }
            );
        });
    }
}

[MurhafSousli]

@Oussemasahbeni Try v15.0.6

[Oussemasahbeni]

It works fine after upgrading to v15.0.6, thank you for your help