Issue after Angular 9 upgrade

[crooksey]

I am submitting a

• [x] Bug Report

What is the expected behavior?

No errors

What is the current behavior?

ERROR TypeError: Cannot read property 'shareButton' of undefined

What are the steps to reproduce?

<share-buttons [theme]="'modern-dark'" [include]="['facebook','twitter','linkedin','pinterest','whatsapp','email','copy']" [show]="5" [url]="currentURL">

What is the use-case or motivation for changing an existing behavior?

Angular 9 support

Which versions are you using for the following packages?

Angular: 9 Angular CDK:9 Angular CLI:9.0.1 Angular-fontawesome: 0.5.0 Share buttons: 4.1.4

Is there anything else we should know?

Code was working fine in Angular 8, have checked documentation and code seems correct, cannot work our why since upgrading to 9.x this throws an error.

[AnkitSharma-007]

I am also facing the same issue after updating to v9. The code was working on v8.

[MurhafSousli]

This error is only thrown when using the packages @ngx-share/button and @ngx-share/buttons.

For now, you can use the share directive with angular 9 from the package @ngx-share/core without any problems.

I will release a new version in the upcoming days!

[AnkitSharma-007]

How can we set up the custom config with @ngx-share/core

This is my current implementation in app.module.ts

import { ShareButtonsModule } from '@ngx-share/buttons';

const customConfig: ShareButtonsConfig = {
  include: ['facebook', 'twitter', 'linkedin', 'reddit', 'whatsapp', 'telegram', 'print', 'email'],
  theme: 'circles-dark',
  autoSetMeta: true,
  twitterAccount: 'ankitsharma_007'
};

imports: [
    ShareButtonsModule.withConfig(customConfig),
]

Is it possible to change this using @ngx-share/core.

[MurhafSousli]

@AnkitSharma-007 Same way ShareModule.withConfig(customConfig)

[AnkitSharma-007]

Yes this is working. Need to do some changes in the code.

Earlier :

app.module.ts

import { ShareButtonsModule } from '@ngx-share/buttons';

const customConfig: ShareButtonsConfig = {
  include: ['facebook', 'twitter', 'linkedin', 'reddit', 'whatsapp', 'telegram', 'print', 'email'],
  theme: 'circles-dark',
  autoSetMeta: true,
  twitterAccount: 'ankitsharma_007'
};

imports: [
    ShareButtonsModule.withConfig(customConfig),
]

component.html

<share-buttons></share-buttons>

Now:

app.module.ts

import { ShareButtonsConfig, ShareModule } from '@ngx-share/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

const customConfig: ShareButtonsConfig = {
  autoSetMeta: true,
  twitterAccount: 'ankitsharma_007'
};

imports: [
   ShareModule.withConfig(customConfig),
]

component.html

<button mat-fab shareButton="facebook" [style.backgroundColor]="share.prop.facebook.color">
    <fa-icon [icon]="share.prop.facebook.icon" size="lg"></fa-icon>
</button>
<button mat-fab shareButton="twitter" [style.backgroundColor]="share.prop.twitter.color">
    <fa-icon [icon]="share.prop.twitter.icon" size="lg"></fa-icon>
</button>
<button mat-fab shareButton="linkedin" [style.backgroundColor]="share.prop.linkedin.color">
    <fa-icon [icon]="share.prop.linkedin.icon" size="lg"></fa-icon>
</button>

component.ts

import { ShareService } from '@ngx-share/core';
constructor(public share: ShareService) {  }

Here is my repo with working code in Angular 9

https://github.com/AnkitSharma-007/blogging-app-with-Angular-CloudFirestore

[crooksey]

I have to agree, that when using @ngx-share/core although I can get it to work, the themes/styles do not apply in the same way. It would be helpful (if possible) to provide a working stackblitz using core.

[sameretto]

@MurhafSousli Any progress on this? Has this been resolved?

[yasminSalah]

Yes this is working. Need to do some changes in the code.

Earlier :

app.module.ts

import { ShareButtonsModule } from '@ngx-share/buttons';

const customConfig: ShareButtonsConfig = {
  include: ['facebook', 'twitter', 'linkedin', 'reddit', 'whatsapp', 'telegram', 'print', 'email'],
  theme: 'circles-dark',
  autoSetMeta: true,
  twitterAccount: 'ankitsharma_007'
};

imports: [
    ShareButtonsModule.withConfig(customConfig),
]

component.html

<share-buttons></share-buttons>

Now:

app.module.ts

import { ShareButtonsConfig, ShareModule } from '@ngx-share/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

const customConfig: ShareButtonsConfig = {
  autoSetMeta: true,
  twitterAccount: 'ankitsharma_007'
};

imports: [
   ShareModule.withConfig(customConfig),
]

component.html

<button mat-fab shareButton="facebook" [style.backgroundColor]="share.prop.facebook.color">
    <fa-icon [icon]="share.prop.facebook.icon" size="lg"></fa-icon>
</button>
<button mat-fab shareButton="twitter" [style.backgroundColor]="share.prop.twitter.color">
    <fa-icon [icon]="share.prop.twitter.icon" size="lg"></fa-icon>
</button>
<button mat-fab shareButton="linkedin" [style.backgroundColor]="share.prop.linkedin.color">
    <fa-icon [icon]="share.prop.linkedin.icon" size="lg"></fa-icon>
</button>

component.ts

import { ShareService } from '@ngx-share/core';
constructor(public share: ShareService) {  }

Here is my repo with working code in Angular 9

https://github.com/AnkitSharma-007/blogging-app-with-Angular-CloudFirestore

can u guide me in angular 8 how make it work

[FotoramaMX]

This stop working since update to angular 9 too, but i have this issue:

main.bdc9eac2d3e9e47d38c5.js:1 ERROR TypeError: Cannot read property 'prop' of undefined at Object.updateDirectives (12.516fb781619496a755f4.js:1) at Object.updateDirectives (main.bdc9eac2d3e9e47d38c5.js:1) at fb (main.bdc9eac2d3e9e47d38c5.js:1) at Sb (main.bdc9eac2d3e9e47d38c5.js:1) at wb (main.bdc9eac2d3e9e47d38c5.js:1) at fb (main.bdc9eac2d3e9e47d38c5.js:1) at Sb (main.bdc9eac2d3e9e47d38c5.js:1) at Cb (main.bdc9eac2d3e9e47d38c5.js:1) at fb (main.bdc9eac2d3e9e47d38c5.js:1) at Sb (main.bdc9eac2d3e9e47d38c5.js:1)

Any Idea about this?

Best!

[neaptolem]

Hi @MurhafSousli do you need some help with resolving the issue? It looks like it is a problem in ngx-button select ref with @ViewChild.

[MurhafSousli]

@neaptolem I currently don't have an internet connection at home due to my relocation, if you can give me a fix PR. I can publish it from work.

[neaptolem]

@MurhafSousli I try update project to Angular 9 version. But I don't have permission to push the branch with the update.

[xjose97x]

@MurhafSousli when can we expect a fix for this issue?

Thanks for your great work!

[ThePatzen]

@MurhafSousli i really like your work!! Thanks!

Looking forward to the new version!!

Best Regards,

David

[bjfisher-cbg]

+1

[bjornharvold]

@MurhafSousli Great project. Looking forward to Angular 9 support.

[Josvds]

+1

[fromage9747]

+1

[iMrLopez]

+1 its sad to see that this amazing project is some sort of abandoned

[fromage9747]

Grabbed the CSS from the module and used the example HTML from Chrome dev tools to try and work around this but just get the below:

Twitter Icon is with all the classes and the Facebook icon is without.

[fromage9747]

@neaptolem Please can you let me know what code changes you did to make this work. I would like to apply them manually. Cheers

[neaptolem]

@fromage9747 I just updated the library to angular 9, but I still have problems with the build.

[fromage9747]

@neaptolem What issues are you still having?

[neaptolem]

@fromage9747 I have made fork https://github.com/neaptolem/ngx-sharebuttons branch update-to-ng9

[fromage9747]

@neaptolem Thanks! I will give it a try later on today.

[iMrLopez]

Can we get a PR with that fork please? @MurhafSousli

[MartinBeeyouriot]

Here is my fork based off @neaptolem that I got working with angular 9.1.

Main issue was fixes adding viewChild {static: true} in @ngx-share/core/share-button.directive.ts and fixing some of the material imports. Bumped versions and enabled ivy. Here is the compiled file against @angular/9.1 that were produced by npm run init-build && npm run build-all

I am using those files with @angular/9.1 package.json:

    "@ngx-share/button": "file:dist-share-buttons/button",
    "@ngx-share/buttons": "file:dist-share-buttons/buttons",
    "@ngx-share/core": "file:dist-share-buttons/core",

Module import

import { ShareButtonsModule } from 'dist-share-buttons/buttons';
import { ShareButtonModule } from 'dist-share-buttons/button';
... 
  imports: [CommonModule, FormsModule, FontAwesomeModule, ShareButtonsModule, ShareButtonModule],

dist-share-buttons.zip

[davidtoral]

How to install and use it with npm? @Martin-Bee @MurhafSousli

[fromage9747]

@davidtoral I decided to wait for @MurhafSousli to merge and release version 8 as I couldn't get anything to work. https://github.com/MurhafSousli/ngx-sharebuttons/pull/432

So far there are some failures on the Travis build.

[MurhafSousli]

UPDATE

I published a beta release, please install using npm i ngx-sharebuttons@8.0.0-beta.1, for now see the changelog on #432 . I will update the docs incrementally with time.

Here is a stackblitz using the latest beta version

[fromage9747]

@MurhafSousli Thank you!

[Jrbebel]

@MurhafSousli nice !!

[cervelliriccardo]

this is the code part that raise an exception: ctx.ref.shareButton -> ctx.ref is undefined

ShareButton.ɵfac = function ShareButton_Factory(t) { return new (t || ShareButton)(ɵngcc0.ɵɵdirectiveInject(ɵngcc1.ShareService)); }; ShareButton.ɵcmp = ɵngcc0.ɵɵdefineComponent({ type: ShareButton, selectors: [["share-button"]], viewQuery: function ShareButton_Query(rf, ctx) { if (rf & 1) { ɵngcc0.ɵɵviewQuery(ShareDirective, true); } if (rf & 2) { var _t; ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx.ref = _t.first); } }, hostVars: 2, hostBindings: function ShareButton_HostBindings(rf, ctx) { if (rf & 2) { ɵngcc0.ɵɵclassMap(ctx.buttonClass); } }, inputs: { showIcon: "showIcon", showText: "showText", showCount: "showCount", size: "size", theme: "theme", createButton: ["button", "createButton"], setUrl: ["url", "setUrl"], title: "title", description: "description", image: "image", tags: "tags", autoSetMeta: "autoSetMeta", text: "text", icon: "icon" }, outputs: { count: "count", opened: "opened", closed: "closed" }, decls: 6, vars: 19, consts: [[1, "sb-wrapper", 3, "shareButton", "url", "image", "title", "description", "tags", "autoSetMeta", "getCount", "count", "opened", "closed"], [1, "sb-inner"], [1, "sb-content"], ["class", "sb-icon", 4, "ngIf"], ["class", "sb-text", 4, "ngIf"], ["class", "sb-count", 4, "ngIf"], [1, "sb-icon"], [3, "icon", "fixedWidth"], [1, "sb-text"], [1, "sb-count"]], template: function ShareButton_Template(rf, ctx) { if (rf & 1) { ɵngcc0.ɵɵelementStart(0, "button", 0); ɵngcc0.ɵɵlistener("count", function ShareButton_Template_button_count_0_listener($event) { return ctx.onCount($event); })("opened", function ShareButton_Template_button_opened_0_listener($event) { return ctx.opened.emit($event); })("closed", function ShareButton_Template_button_closed_0_listener($event) { return ctx.closed.emit($event); }); ɵngcc0.ɵɵelementStart(1, "div", 1); ɵngcc0.ɵɵelementStart(2, "div", 2); ɵngcc0.ɵɵtemplate(3, ShareButton_div_3_Template, 2, 2, "div", 3); ɵngcc0.ɵɵtemplate(4, ShareButton_div_4_Template, 2, 1, "div", 4); ɵngcc0.ɵɵelementEnd(); ɵngcc0.ɵɵtemplate(5, ShareButton_div_5_Template, 4, 3, "div", 5); ɵngcc0.ɵɵelementEnd(); ɵngcc0.ɵɵelementEnd(); } if (rf & 2) { ɵngcc0.ɵɵstyleProp("font-size", (1 + ctx.size / 20) * 14, "px"); ɵngcc0.ɵɵclassProp("sb-show-icon", ctx.showIcon)("sb-show-text", ctx.showText)("sb-show-count", ctx.showCount && ctx.shareCount); ɵngcc0.ɵɵproperty("shareButton", ctx.button)("url", ctx.url)("image", ctx.image)("title", ctx.title)("description", ctx.description)("tags", ctx.tags)("autoSetMeta", ctx.autoSetMeta)("getCount", ctx.showCount); ɵngcc0.ɵɵadvance(3); ɵngcc0.ɵɵproperty("ngIf", ctx.showIcon && ctx.ref.shareButton); ɵngcc0.ɵɵadvance(1); ɵngcc0.ɵɵproperty("ngIf", ctx.showText && ctx.ref.shareButton); ɵngcc0.ɵɵadvance(1); ɵngcc0.ɵɵproperty("ngIf", ctx.showCount && ctx.shareCount); } }, directives: [ɵngcc1.ShareDirective, ɵngcc2.NgIf, ɵngcc3.FaIconComponent], pipes: [ɵngcc1.ShareCountPipe], styles: [".sb-button, .sb-group{display:inline-flex;align-items:flex-start} .sb-group{flex-wrap:wrap} .sb-button{margin:.3125em} .sb-wrapper{font-size:inherit;cursor:pointer;position:relative;outline:0;min-width:4.125em;height:2.5em;border:none;border-radius:1px;padding:0;line-height:2.571em;background-color:transparent} .sb-wrapper .sb-count, .sb-wrapper .sb-icon, .sb-wrapper .sb-text{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .sb-wrapper .sb-inner{display:flex;flex:1;width:100%;height:100%} .sb-wrapper .sb-content{display:flex;height:100%;width:100%} .sb-wrapper .sb-text{padding:0 .7em;flex:1;height:100%;white-space:nowrap} .sb-wrapper .sb-icon{text-align:center;width:100%;height:100%;font-size:1.2em;min-width:2em} .sb-wrapper .sb-count{font-size:.9em;padding:0 .7em} .sb-wrapper .sb-count, .sb-wrapper .sb-text{font-weight:700} .sb-show-text .sb-icon{width:2em} .sb-show-count{min-width:5.333em}"], changeDetection: 0 });

[MurhafSousli]

@cervelliriccardo please add reproduction using the beta version stackblitz

[sameretto]

@MurhafSousli using the beta I get this: failed to compile. ./node_modules/ngx-sharebuttons/__ivy_ngcc__/fesm5/ngx-sharebuttons-icons.js 42:16-29 "export 'FaIconLibrary' was not found in '@fortawesome/angular-fontawesome'

Edit do i need to have angular-fontawesome to make it work?

[MurhafSousli]

@sameretto indeed!

[fromage9747]

~~Well, this is disappointing. I upgraded to v8 beta and I am still getting the same issue. Can anyone confirm that the beta release has fixed the issue in their app? ~~

Edit: This was my fault. Trying to replicate the issue in a stackblitz example assisted me in rectifying the issue. I have gotten the icons to load again. Now I just need to resolve a new issue of the ShareDirective.push being undefined when using create.

[crooksey]

I can confirm this is fixed in the Beta, thanks.

[chhaymenghong]

very nice. confirmed it is fixed

[schankam]

Confirming that the beta works for me.

[karincayazilim]

help please angular 9

[fromage9747]

@karincayazilim try and replicate what you are trying to do in a stackblitz example. You will locate the issue whilst doing it. That is what I did and it helped me.

[Xplosive06]

Hi, I'm using the beta version 8, but when I import the ShareIconsModule I'm getting :

core.js:4117 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(BlogContentModule)[ShareIconsModule -> InjectionToken SHARE_BUTTONS_ICONS -> InjectionToken SHARE_BUTTONS_ICONS -> InjectionToken SHARE_BUTTONS_ICONS -> InjectionToken SHARE_BUTTONS_ICONS]: NullInjectorError: No provider for InjectionToken SHARE_BUTTONS_ICONS!

My code :

`import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router';

import { BlogContentComponent } from './blog-content.component'; import { ShareButtonsModule } from 'ngx-sharebuttons/buttons'; import { NgBusyModule } from 'ng-busy'; import { ShareIconsModule } from 'ngx-sharebuttons/icons';

export const routes = [ { path: '', component: BlogContentComponent, pathMatch: 'full' } ];

@NgModule({ imports: [ CommonModule, RouterModule.forChild([ {path: '', component: BlogContentComponent} ]), ShareButtonsModule, NgBusyModule, ShareIconsModule ], declarations: [ BlogContentComponent ] }) export class BlogContentModule { }`

Any idea?

Edit: added :

providers: [ {provide: ShareIconsModule, useValue: {}} ]

In my module.