I am implementing the ngx-sharebuttons for social share button like facebook, whatsapp.
this is what I tried
installed package
npm i cdk
npm i ngx-sharebuttons
npm i #fortawesome/fontawesome-svg-core #fortawesome/angular-fontawesome #fortawesome/free-solid-svg-icons #fortawesome/free-brands-svg-icons
import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
import { ShareIconsModule } from 'ngx-sharebuttons/icons';
ShareButtonsModule.withConfig({
debug: true
}),
ShareIconsModule
<share-buttons [theme]="'material-dark'"
[include]="['facebook','twitter','linkedin','pinterest','reddit','mix','vk','telegram','messenger','whatsapp','xing','line','sms','email','copy']"
[show]="9"
[size]="1"
[url]="'https://www.eduforbetterment.com/generate-qr-code-in-angular/'"
[image] ="'https://www.eduforbetterment.com/wp-content/uploads/2020/08/qrcode.jpg'"
[autoSetMeta]="false"
></share-buttons>
everything is working but I am not able to see the social icons for share like facebook, twitter, whatsapp and so on.
I followed this link
As you can see in the image share button is creating but icons are not creating.
below is my package.json file
"#angular-devkit/core": "10.0.1",
"#angular/animations": "^10.0.2",
"#angular/cdk": "^11.0.0",
"#angular/cli": "^10.0.1",
"#angular/common": "10.0.2",
"#angular/compiler": "10.0.2",
"#angular/core": "10.0.2",
"#angular/flex-layout": "^9.0.0-beta.29",
"#angular/forms": "10.0.2",
"#angular/localize": "^10.0.2",
"#angular/material": "^8.2.3",
"#angular/platform-browser": "10.0.2",
"#angular/platform-browser-dynamic": "10.0.2",
"#angular/router": "10.0.2",
"#fortawesome/angular-fontawesome": "^0.8.0",
"#fortawesome/fontawesome-svg-core": "^1.2.32",
"#fortawesome/free-brands-svg-icons": "^5.15.1",
"#fortawesome/free-solid-svg-icons": "^5.15.1",
"#ng-bootstrap/ng-bootstrap": "^7.0.0",
"bootstrap": "^4.5.2",
"chartist": "^0.11.4",
"core-js": "^2.6.11",
"hammerjs": "^2.0.8",
"ng-chartist": "4.1.0",
"ngx-sharebuttons": "^8.0.4",
"ngx-spinner": "^10.0.1",
"node-sass": "^4.13.1",
"rxjs": "^6.6.0",
"rxjs-compat": "^6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
Please help me where I am doing wrong.
I used fontawesome icons instead (you import what you need)
import { faFacebookF, faTwitter } from '#fortawesome/free-brands-svg-icons';
import { FaIconLibrary } from '#fortawesome/angular-fontawesome';
constructor(
iconLibrary: FaIconLibrary,
) {
iconLibrary.addIcons(faTwitter, faFacebookF);
}
Try this one
[shareButton] is a directive that converts its host element to a share button.
https://ngx-sharebuttons.netlify.app/#/share-button-directive
Related
for the update of an ionic app from 5.3.4 to 6.1.13, also the ionic storage package changed from #ionic/storage (version 2) to #ionic/storage-angular (version 3). The whole app works fine, however I am unable to get already saved data with the new storage-module:
Old App (Ionic 5)
package.json:
"#angular/core": "~9.1.6",
"#ionic/angular": "^5.3.4",
"#ionic/storage": "^2.3.1",
app.module:
import { IonicStorageModule } from '#ionic/storage';
#NgModule({
...
imports: [
IonicModule.forRoot(),
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['sqlite', 'websql', 'indexeddb'],
}),
...
New App (Ionic 6, new angular-storage module)
package.json:
"#angular/core": "^14.0.5",
"#ionic/angular": "^6.1.13",
"#ionic/storage-angular": "^3.0.6",
app.module:
import { Drivers } from '#ionic/storage';
import { IonicStorageModule } from '#ionic/storage-angular';
#NgModule({
...
imports: [
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: [CordovaSQLiteDriver._driver, Drivers.IndexedDB, Drivers.LocalStorage],
}),
...
I even tried to downgrade to the old storage package (same version as in old app), still I am unable to retrieve the already saved data:
New App (Ionic 6, old storage module)
package.json:
"#angular/core": "^14.0.5",
"#ionic/angular": "^6.1.13",
"#ionic/storage": "2.3.1",
app.module:
import { IonicStorageModule } from '#ionic/storage';
#NgModule({
...
imports: [
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['sqlite', 'websql', 'indexeddb'],
}),
...
I would appreciate any insights / tips, the database name did not change and the data is still there, because if I install the old version again all data is retrieved successfully. But If I try to get the data (same key) with the updated ionic app, regardless of old or new storage package, I can't retrieve the data
Saving / retrieving new data with the new storage module works fine as well!
Testes with both IOS and Android
I want to detect the device orientation change event.
I need to change the image while orientation change in the device.
I tried some of the examples but it is not working at all.
I also tried the screen-orientation plugin but it also not working.
Plugin which I used
ionic cordova plugin add cordova-plugin-screen-orientation
npm install #ionic-native/screen-orientation
These are in my package.json.
"#ionic-native/app-preferences": "^4.18.0",
"#ionic-native/call-number": "^4.18.0",
"#ionic-native/core": "~4.17.0",
"#ionic-native/file": "^5.0.0",
"ionic-angular": "3.9.2"
Have you tried that with the screen-orientation plugin, that you have:
import { ScreenOrientation } from '#ionic-native/screen-orientation/ngx';
constructor(private screenOrientation: ScreenOrientation) { }
...
this.screenOrientation.onChange().subscribe(
() => {
console.log("Orientation changed to " + this.screenOrientation.type);
}
);
I continue to get:
App.jsx:11 Uncaught ReferenceError: regeneratorRuntime is not defined
on any line that does an async. I don't what that polyfill, but I am having a hard time getting rid of it:
app.jsx:11)
const fetcher = (async () => {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"#types/react": "^16.8.17",
"babel-preset-env": "^1.7.0"
here is the .babelrc
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"chrome": ">70",
},
"exclude": ["transform-regenerator"]
},
"#babel/preset-react"
]
]
}
If you want to use async, await with (ES6 or ES Next) then you must need to install #babel/polyfill but you don't need to write anything in babelrc file. Just install
npm install --save #babel/polyfill
From the documentation:
Because this is a polyfill (which will run before your source code),
we need it to be a dependency, not a devDependency
And finally you need to import #bable/polyfill in your mainJS (App.js) file like:
import "#babel/polyfill";
This appears to be a bug in the parcel js bundler.
https://github.com/babel/babel/issues/9971
I'm writing a meteor/angular2 app, and I have just upgraded to rc5. I get an error when I try to show a list of messages based on a mongo cursor in my component. I have tried to distill the code down, please let me know, if you need something more.
Here is the component:
import { Component, OnInit } from '#angular/core';
import { Mongo } from 'meteor/mongo';
import template from './messages-list.component.html';
#Component({
selector: 'messages-list',
template
})
export class MessagesListComponent implements OnInit {
messages: Mongo.Cursor<string>;
collection: Mongo.Collection<string>
ngOnInit() {
// just create an empty local collection for brevity, but it also fails with a named client/server collections
this.collection = new Mongo.Collection<string>(null);
this.messages = this.collection.find();
}
}
Here is the html template:
<ul>
<li *ngFor="let message of messages">
{{message}}
</li>
</ul>
This fails with a long stacktrace when I try to view the page, and several nested errors, but I think this seems to be the root of it:
Unhandled Promise rejection: (7)
"EXCEPTION: Error in ./MessagesListComponent class MessagesListComponent - inline template:0:10
ORIGINAL EXCEPTION: TypeError: undefined is not an object (evaluating 'async_1.ObservableWrapper.subscribe')
I can make the code work again by either changing the view or the component code as follows:
View:
<ul>
<!-- avoid iterating over messages -->
<!--li *ngFor="let message of messages">
{{message}}
</li-->
</ul>
Code:
// use a normal array instead of a cursor
export class MessagesListComponent implements OnInit {
messages: string[]
ngOnInit() {
this.messages = []
}
}
Here are the dependencies of my package.json:
"dependencies": {
"#angular/common": "2.0.0-rc.5",
"#angular/compiler": "2.0.0-rc.5",
"#angular/core": "2.0.0-rc.5",
"#angular/forms": "0.3.0",
"#angular/platform-browser": "2.0.0-rc.5",
"#angular/platform-browser-dynamic": "2.0.0-rc.5",
"#angular/router": "3.0.0-rc.1",
"angular2-meteor": "0.6.2",
"angular2-meteor-auto-bootstrap": "0.6.0",
"angular2-meteor-polyfills": "0.1.1",
"angular2-meteor-tests-polyfills": "0.0.2",
"es6-shim": "0.35.1",
"material-design-lite": "^1.2.0",
"meteor-node-stubs": "0.2.3",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12"
}
Does anyone have an idea how to solve this?
I am facing quite the same issue, as you can see here.
First I had the error message "NgFor only supports binding to Iterables such as Arrays.", as I tried to iterate over a Mongo.Cursor.
The only idea I found was to fetch the cursor and to use an array instead. But the array did not contain any data, so I concluded that maybe there is no data available on client side and it's a Meteor issue. Maybe I am wrong and there is just an another way to transform the data from the cursor.
Today I also tried to solve this issue according to this file, but setting up this project failed.
Unfortunately, I did not find any useful and working examples according Angular 2 RC 5 and meteor mongo cursors, but I continue searching.
I'm having significant frustration with JSPM, this is just the latest problem out of many.
I've installed angularfire2 via JSPM via - sudo jspm install npm:angularfire2 (Yes, SUDO. Doesn't work without SUDO!!) which should have installed #angular dependencies. The generated package json looks like this-
"jspm": {
"dependencies": {
"angularfire2": "npm:angularfire2#^2.0.0-beta.2"
},
"devDependencies": {
"typescript": "npm:typescript#^1.8.10"
}
}
And the generated config looks like this-
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "typescript",
typescriptOptions: {
"emitDecoratorMetadata": true
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
packages: {
"app": {
"main": "./app.ts",
"defaultExtension": "ts"
}
},
map: {
"angularfire2": "npm:angularfire2#2.0.0-beta.2",
"typescript": "npm:typescript#1.8.10",
...
"npm:angularfire2#2.0.0-beta.2": {
"#angular/common": "npm:#angular/common#2.0.0-rc.2",
"#angular/compiler": "npm:#angular/compiler#2.0.0-rc.2",
"#angular/core": "npm:#angular/core#2.0.0-rc.2",
"#angular/platform-browser": "npm:#angular/platform-browser#2.0.0-rc.2",
"#angular/platform-browser-dynamic": "npm:#angular/platform-browser-dynamic#2.0.0-rc.2",
"firebase": "npm:firebase#3.0.5",
"rxjs": "npm:rxjs#5.0.0-beta.6"
}
...
}
});
So when I refresh the page of the application I see it imports angularfire2.js correctly, then tries to import #angular/platform-browser-dynamic.js. But the address it is trying to import at is- http://localhost:8000/#angular/platform-browser-dynamic.js which is the wrong path! I imagine it's because the first line of my app.ts (and the starting point of the application) has this line- import { bootstrap } from '#angular/platform-browser-dynamic';. But what WHY doesn't JSPM map this correctly? Do I need to install these packages separately? If so- WHY is there such a thing as package dependencies?
Expected: When resolving this import, the /jspm_packages/npm/** address should be resolved.
Got: SystemJS attempts to load package from the web root /.
You have to manually add the following in the map.
"#angular/common": "npm:#angular/common#2.0.0-rc.2",
"#angular/compiler": "npm:#angular/compiler#2.0.0-rc.2",
"#angular/core": "npm:#angular/core#2.0.0-rc.2",
"#angular/platform-browser": "npm:#angular/platform-browser#2.0.0-rc.2",
"#angular/platform-browser-dynamic": "npm:#angular/platform-browser-dynamic#2.0.0-rc.2",
Not sure if that's the real solution but it works. The future is here.