Issue after Angular 9 upgrade #429

crooksey · 2020-02-07T11:24:40Z

I am submitting a

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 · 2020-02-09T09:21:48Z

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

MurhafSousli · 2020-02-09T23:17:23Z

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 · 2020-02-10T07:45:52Z

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 · 2020-02-10T10:25:20Z

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

AnkitSharma-007 · 2020-02-10T18:43:00Z

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 · 2020-02-18T09:30:09Z

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 · 2020-02-20T02:17:46Z

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

yasminSalah · 2020-02-25T08:52:41Z

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 · 2020-02-27T19:01:39Z

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 · 2020-02-29T12:26:52Z

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 · 2020-02-29T19:24:32Z

@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 · 2020-03-01T08:48:33Z

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

xjose97x · 2020-03-02T15:13:18Z

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

Thanks for your great work!

ThePatzen · 2020-03-09T18:09:25Z

@MurhafSousli i really like your work!! Thanks!

Looking forward to the new version!!

Best Regards,

David

bjfisher-cbg · 2020-03-13T18:49:09Z

+1

bjornharvold · 2020-03-17T11:32:53Z

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

Josvds · 2020-03-20T05:52:46Z

+1

fromage9747 · 2020-03-20T06:12:06Z

+1

iMrLopez · 2020-03-22T06:22:12Z

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

fromage9747 · 2020-03-22T08:27:01Z

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 · 2020-03-22T09:18:36Z

@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 · 2020-03-22T10:02:10Z

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

fromage9747 · 2020-03-22T10:03:41Z

@neaptolem What issues are you still having?

neaptolem · 2020-03-22T10:10:06Z

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

fromage9747 · 2020-03-22T10:12:01Z

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

iMrLopez · 2020-03-22T15:43:36Z

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

MartinBeeyouriot · 2020-03-29T13:11:07Z

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 · 2020-04-07T09:41:55Z

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

fromage9747 · 2020-04-07T09:51:29Z

@davidtoral
I decided to wait for @MurhafSousli to merge and release version 8 as I couldn't get anything to work.
#432

So far there are some failures on the Travis build.

MurhafSousli · 2020-04-07T11:08:09Z

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 · 2020-04-07T11:12:09Z

@MurhafSousli Thank you!

Jrbebel · 2020-04-07T14:51:13Z

@MurhafSousli nice !!

cervelliriccardo · 2020-04-09T07:30:03Z

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 · 2020-04-09T13:16:25Z

@cervelliriccardo please add reproduction using the beta version stackblitz

sameretto · 2020-04-09T13:55:08Z

@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 · 2020-04-09T14:59:07Z

@sameretto indeed!

fromage9747 · 2020-04-10T10:24:39Z

~~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 · 2020-04-20T13:13:28Z

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

chhaymenghong · 2020-04-21T07:23:24Z

very nice. confirmed it is fixed

schankam · 2020-05-03T15:34:58Z

Confirming that the beta works for me.

karincayazilim · 2020-05-04T12:18:12Z

help please angular 9

fromage9747 · 2020-05-04T12:54:23Z

@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 · 2020-06-01T09:21:58Z

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.

MurhafSousli added @ngx-share/button @ngx-share/buttons bug labels Feb 9, 2020

MurhafSousli mentioned this issue Apr 3, 2020

Version 8 #432

Merged

MurhafSousli added this to the Version 8 milestone Apr 3, 2020

sumpton mentioned this issue Apr 23, 2020

Fix your website sebholstein/angular-google-maps#1809

Closed

MurhafSousli closed this as completed in #432 May 31, 2020

Issue after Angular 9 upgrade #429

Issue after Angular 9 upgrade #429

Comments

crooksey commented Feb 7, 2020

I am submitting a

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

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

Which versions are you using for the following packages?

Is there anything else we should know?

AnkitSharma-007 commented Feb 9, 2020

MurhafSousli commented Feb 9, 2020

AnkitSharma-007 commented Feb 10, 2020

MurhafSousli commented Feb 10, 2020

AnkitSharma-007 commented Feb 10, 2020

crooksey commented Feb 18, 2020

sameretto commented Feb 20, 2020

yasminSalah commented Feb 25, 2020

FotoramaMX commented Feb 27, 2020

neaptolem commented Feb 29, 2020

MurhafSousli commented Feb 29, 2020

neaptolem commented Mar 1, 2020

xjose97x commented Mar 2, 2020

ThePatzen commented Mar 9, 2020

bjfisher-cbg commented Mar 13, 2020

bjornharvold commented Mar 17, 2020

Josvds commented Mar 20, 2020

fromage9747 commented Mar 20, 2020

iMrLopez commented Mar 22, 2020 • edited Loading

fromage9747 commented Mar 22, 2020 • edited Loading

fromage9747 commented Mar 22, 2020

neaptolem commented Mar 22, 2020

fromage9747 commented Mar 22, 2020

neaptolem commented Mar 22, 2020

fromage9747 commented Mar 22, 2020

iMrLopez commented Mar 22, 2020

MartinBeeyouriot commented Mar 29, 2020

davidtoral commented Apr 7, 2020

fromage9747 commented Apr 7, 2020

MurhafSousli commented Apr 7, 2020 • edited Loading

UPDATE

fromage9747 commented Apr 7, 2020

Jrbebel commented Apr 7, 2020

cervelliriccardo commented Apr 9, 2020

MurhafSousli commented Apr 9, 2020 • edited Loading

sameretto commented Apr 9, 2020 • edited Loading

MurhafSousli commented Apr 9, 2020

fromage9747 commented Apr 10, 2020 • edited Loading

crooksey commented Apr 20, 2020

chhaymenghong commented Apr 21, 2020

schankam commented May 3, 2020

karincayazilim commented May 4, 2020

fromage9747 commented May 4, 2020

Xplosive06 commented Jun 1, 2020 • edited Loading

iMrLopez commented Mar 22, 2020 •

edited

Loading

fromage9747 commented Mar 22, 2020 •

edited

Loading

MurhafSousli commented Apr 7, 2020 •

edited

Loading

MurhafSousli commented Apr 9, 2020 •

edited

Loading

sameretto commented Apr 9, 2020 •

edited

Loading

fromage9747 commented Apr 10, 2020 •

edited

Loading

Xplosive06 commented Jun 1, 2020 •

edited

Loading