search

MurhafSousli / ngx-sharebuttons

Angular Share Buttons ☂
https://ngx-sharebuttons.netlify.app/
MIT License
525 stars 126 forks source link

Trying to import { ShareModule } from '@ngx-share/core and use Share Buttons #301

Closed sunpasup closed 6 years ago

sunpasup commented 6 years ago

My App Module

` import { BrowserAnimationsModule } from '/animations'; import { NgModule } from ''; import { FormsModule } from ''; import { HttpModule } from ''; import { RouterModule } from ''; import { ShareButtonModule } from ''; import { ShareModule } from ''; import { FontAwesomeModule } from '';

import { AppRoutingModule } from './app.routing'; import { ComponentsModule } from './components/components.module';

import { AppComponent } from './app.component';

import { DashboardComponent } from './dashboard/dashboard.component'; import { UserProfileComponent } from './user-profile/user-profile.component'; import { TableListComponent } from './table-list/table-list.component'; import { TypographyComponent } from './typography/typography.component'; import { IconsComponent } from './icons/icons.component'; import { MapsComponent } from './maps/maps.component'; import { NotificationsComponent } from './notifications/notifications.component'; import { UpgradeComponent } from './upgrade/upgrade.component'; import { AgmCoreModule } from ''; import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';

@NgModule({ imports: [ BrowserAnimationsModule, ShareButtonModule.forRoot(), ShareModule.forRoot(), FontAwesomeModule, FormsModule, HttpModule, ComponentsModule, RouterModule, AppRoutingModule, AgmCoreModule.forRoot({ apiKey: 'YOUR_GOOGLE_MAPS_API_KEY' }) ], declarations: [ AppComponent, AdminLayoutComponent,

], providers: [], bootstrap: [AppComponent] }) export class AppModule { } `

My Template

`

<figure *ngFor="let cards of twitterData">

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

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

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

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

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

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

`

My Template TS

`import { Component, OnInit } from ''; import { sampleData} from '../twitterData'; import { faFacebookSquare } from '/faFacebookSquare'; import { faTwitterSquare } from '/faTwitterSquare'; import { faPinterest } from '/faPinterest'; import { ShareButtons } from ''; import { FontAwesomeModule } from '';

@component({ selector: 'app-icons', templateUrl: './icons.component.html', styleUrls: ['./icons.component.css'] }) export class IconsComponent implements OnInit {

fbIcon = faFacebookSquare; pinIcon = faPinterest; tweetIcon = faTwitterSquare; public twitterData:any = sampleData;

constructor(public share: ShareButtons, public fa: FontAwesomeModule) { } ngOnInit() { }

} `

**Below is the Error i get..

screen shot 2018-06-19 at 8 04 57 am

**

MurhafSousli commented 6 years ago

Your code has several errors

  1. Import only one share module 
    ShareButtonModule.forRoot(), // keep this line
ShareModule.forRoot(), // <- remove this line
  2. Import HttpClientModule, not HttpModule
// HttpModule
HttpClientModule // add this instead
  1. Use the icons you just imported in the template. you are mixing between 2 different examples! 
    
import { Component, OnInit } from '@angular/core';
import { sampleData} from '../twitterData';
import { faFacebookSquare } from '@fortawesome/free-brands-svg-icons/faFacebookSquare';
import { faTwitterSquare } from '@fortawesome/free-brands-svg-icons/faTwitterSquare';
import { faPinterest } from '@fortawesome/free-brands-svg-icons/faPinterest';

@component({ selector: 'app-icons', templateUrl: './icons.component.html', styleUrls: ['./icons.component.css'] }) export class IconsComponent implements OnInit {

fbIcon = faFacebookSquare; pinIcon = faPinterest; tweetIcon = faTwitterSquare; public twitterData:any = sampleData;

constructor(public fa: FontAwesomeModule) { } ngOnInit() { }

}

```html
<share-button button="facebook" [icon]="fbIcon"></share-button>
<share-button button="twitter" [icon]="tweetIcon"></share-button>
<share-button button="pinterest" [icon]="pinIcon"></share-button>
sunpasup commented 6 years ago

Changed all the things as you said.

below is the Error I Get.

screen shot 2018-06-19 at 11 39 01 am

which is same Error.

FYI below is My Package.json

{ "name": "XXXXXX", "version": "2.1.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@agm/core": "1.0.0-beta.2", "@angular/animations": "5.2.9", "@angular/cdk": "5.2.4", "@angular/common": "5.2.9", "@angular/compiler": "5.2.9", "@angular/core": "5.2.9", "@angular/forms": "5.2.9", "@angular/http": "5.2.9", "@angular/material": "5.2.4", "@angular/platform-browser": "5.2.9", "@angular/platform-browser-dynamic": "5.2.9", "@angular/platform-server": "5.2.9", "@angular/router": "5.2.9", "@fortawesome/angular-fontawesome": "0.1.0-10", "@fortawesome/fontawesome-svg-core": "^1.2.0-14", "@fortawesome/free-brands-svg-icons": "^5.1.0-11", "@fortawesome/free-solid-svg-icons": "^5.1.0-11", "@ngx-share/button": "^6.0.0", "@ngx-share/core": "^6.0.1", "ajv": "6.4.0", "arrive": "2.4.1", "bootstrap": "4.1.0", "bootstrap-material-design": "4.1.1", "bootstrap-notify": "3.1.3", "chartist": "0.11.0", "classlist.js": "1.1.20150312", "core-js": "2.4.1", "googleapis": "28.1.0", "hammerjs": "2.0.8", "jquery": "3.2.1", "moment": "2.18.1", "perfect-scrollbar": "1.1.0", "popper.js": "1.14.3", "rxjs": "^6.2.1", "rxjs-compat": "^6.2.1", "web-animations-js": "2.3.1", "zone.js": "0.8.4" }, "devDependencies": { "@angular/cli": "1.7.4", "@angular/compiler-cli": "5.2.9", "@angular/language-service": "5.2.9", "@types/bootstrap": "3.3.32", "@types/chartist": "0.9.34", "@types/googlemaps": "^3.30.8", "@types/jasmine": "2.5.38", "@types/jquery": "1.10.31", "@types/node": "6.0.73", "codelyzer": "4.2.1", "jasmine-core": "3.1.0", "jasmine-spec-reporter": "4.2.1", "karma": "2.0.0", "karma-chrome-launcher": "2.2.0", "karma-cli": "1.0.1", "karma-coverage-istanbul-reporter": "1.4.2", "karma-jasmine": "1.1.1", "protractor": "5.3.1", "ts-node": "5.0.1", "tslint": "5.9.1", "typescript": "2.4.2" } }

MurhafSousli commented 6 years ago

It seems that you are using the share buttons in a child module. Currently you have imported ShareButtonModile in your AppModule, if you have any child module that uses the share buttons then you need to import again it like https://murhafsousli.github.io/ngx-sharebuttons/#/faq

For further help, please reproduce your issue in a stackblitz

sheshankdebugged commented 4 years ago

2020-06-26_1545

app.module.ts:-

import { ShareButtonsModule } from 'ngx-sharebuttons/buttons'; import { ShareIconsModule } from 'ngx-sharebuttons/icons';

@NgModule({ declarations: [ ], imports: [ ShareButtonsModule.withConfig({ debug: true }), ShareIconsModule ], providers: [{ provide: HTTP_INTERCEPTORS, useClass: HttpTokenInterceptor, multi: true }, AlertConfig,], bootstrap: [AppComponent] }) export class AppModule { }

package.json :- "dependencies": { "@angular/animations": "~9.1.6", "@angular/common": "~9.1.6", "@angular/compiler": "~9.1.6", "@angular/core": "~9.1.6", "@angular/forms": "~9.1.6", "@angular/localize": "^9.1.9", "@angular/platform-browser": "~9.1.6", "@angular/platform-browser-dynamic": "~9.1.6", "@angular/router": "~9.1.6", "@auth0/angular-jwt": "^4.1.2", "@ng-bootstrap/ng-bootstrap": "^6.1.0", "@ng-select/ng-select": "^3.6.0", "@syncfusion/ej2-angular-richtexteditor": "^18.1.54", "angular-counter": "^0.2.1", "angular-tilt": "^1.2.0", "countup.js-angular2": "^7.3.0", "jquery": "^3.5.1", "mammoth": "^1.4.9", "ng2-search-filter": "^0.5.1", "ngx-bootstrap": "^5.6.1", "ngx-bootstrap-modal": "^2.0.1", "ngx-doc-viewer": "^1.1.0", "ngx-duration-picker": "^3.2.0", "ngx-flip": "^9.0.0", "ngx-sharebuttons": "^8.0.0", "rxjs": "~6.5.4", "tslib": "^2.0.0", "zone.js": "~0.10.2" },

nicovigari commented 3 years ago

ERROR in The target entry-point "ngx-sharebuttons/buttons" has missing dependencies:

MurhafSousli commented 3 years ago

@nicovigari you need to install the package npm i @angular/cdk