Encountering an error in Angular 10/11 when integrating ngx-sharebuttons: "The import of 'ɵɵFactoryTarget' (alias 'i0') from '@angular/core' was not found."

As I work on enhancing my angular app, I am looking to incorporate social media share buttons. I came across ngx-sharebuttons, which seems to offer the functionality I desire.

However, I am facing issues while trying to build my angular application using the command:

npm i ngx-sharebuttons @angular/cdk

Here is the list of dependencies:

 "dependencies": {
    "@angular-devkit/core": "11.2.14",
    "@angular/animations": "~11.2.14",
    ...

The Angular version being used is:

Angular CLI: 11.2.14
Node: 14.16.1
OS: linux x64

Angular: 11.2.14
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.14
@angular-devkit/build-angular   0.1102.14
...

When trying to run the app using "ng serve", I encounter the following errors:


Error: ./node_modules/ngx-sharebuttons/fesm2015/ngx-sharebuttons-buttons.js 95:10-28
...

I am following this tutorial:

typescriptangular11

Answer №1

If you've come across this issue, it may be due to the ngx-sharebuttons version not being compatible with your Angular version. While the latest version is made for Angular 12, if you are using Angular 11 like myself, you may encounter the same problem.

To fix this, I installed ngx-sharebuttons version 8.0.5.

Hopefully, this solution can assist someone else facing the same issue.

Answer №2

To resolve this issue, it is important to ensure compatibility between the versions of Angular and ngx-sharebuttons.

After encountering problems with the latest version of ngx-sharebuttons while using Angular 11, I uninstalled that version. I then installed version 8.1, restarted the server, and found that everything now functions seamlessly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular Bootstrap Datepicker provides us with a date object, but I need it in the Date format

My desired date format is "Wed Aug 07 2019 16:42:07 GMT+0530 (India Standard Time)", but instead I am receiving { year: 1789, month: 7, day: 14 } from ngbDatepicker. Any assistance on resolving this issue would be greatly appreciated. ...

htmlangulartypescriptbootstrap-4angular6

Vue: Simple ways to retrieve state data in MutationAction

I'm having trouble accessing the state inside @MutationAction Here is the setup I am using: Nuxt.js v2.13.3 "vuex-module-decorators": "^0.17.0" import { Module, VuexModule, MutationAction } from 'vuex-module-decorators' ...

javascripttypescriptvue.jsvuex

What is the best way to pass a state within a route component in react-router?

... import { useNavigate, NavigateFunction } from "react-router"; ... function Form(): JSX.Element { const navigateToCountry = (country: string) => { // Code to navigate to country page with the given country } const [selectedCount ...

javascriptreactjstypescriptreact-hooksreact-router

Angular offers pre-determined values that cannot be altered, known as "

I am currently learning Angular and TypeScript, and I came across a task where I need to create an object or something similar that allows me to define a readable but not editable attribute. In Java, I would have achieved this by doing the following: publ ...

typescript

Using Jest and Supertest for mocking in a Typescript environment

I've been working on a mock test case using Jest in TypeScript, attempting to mock API calls with supertest. However, I'm having trouble retrieving a mocked response when using Axios in the login function. Despite trying to mock the Axios call, I ...

typescriptjestjssupertest

Can a type name be converted into a string representation for use as a template literal type?

Is there a way to retrieve the string representation of a type name in order to return a more concise compile error message from a type function? I came across this solution (unfortunately, the article does not have anchor links so you will need to search ...

typescripttypescript-generics

Utilize Angular2 to dynamically add new routes based on an array register

Currently, I am utilizing Angular2 for the frontend of my project and I am faced with the task of registering new Routes from an array. Within my application, there is a service that retrieves data from a server. This data is then stored in a variable wit ...

typescriptangularroutes

Guide to TypeScript, RxJS, web development, and NodeJS: A comprehensive manual

Looking for recommendations on advanced web development books that focus on modern techniques. Digital resources are great, but there's something special about reading from a physical book. I don't need basic intros or overviews - consider me an ...

node.jstypescriptrxjs

Troubleshooting Angular 2 Typescript: Component not displaying as expected

I am currently in the process of learning Angular 2. Despite encountering numerous error messages, I have successfully set up the routes and can now display the desired component. My next challenge is to incorporate a navbar component into my homepage comp ...

typescriptangular

Exploring the world of chained JavaScript Promises for automatic pagination of an API

Dealing with a paged API that requires fetching each page of results automatically has led me to construct a recursive promise chain. Surprisingly, this approach actually gives me the desired output. As I've tried to wrap my head around it, I've ...

javascripttypescriptrecursiones6-promise

Troubleshooting ASP.NET MVC Core 2 and Angular 5 for Beginners: Component Display Issue Resolved with App-Root

Currently, I am facing an issue while trying to set up a simple ASP.NET Core 2 & Angular 5 web application. The problem arises when a component fails to display unless the app-root component is also included. The issue manifests when I add the app-root in ...

typescriptangular5asp.net-core-2.0

Having trouble getting my specialized pipe (filter) to function properly in Angular 2

I have implemented a custom pipe for filtering data in my table. Oddly, when I enter a search string into the input box, it correctly prints 'found' in the console but no rows are displayed in the table. However, if I remove the pipe altogether, ...

angulartypescriptangular2-pipe

Retrieve the data from the mat-checkbox

My goal is to retrieve a value from a mat-checkbox, but the issue is that we only get boolean expression instead of the string value. Here's an example snippet of what I'm looking for: <mat-checkbox formControlName="cb2" <strong&g ...

angulartypescript

Next.js 14 useEffect firing twice upon page load

Having an issue with a client component in next js that is calling an API twice at page load using useEffect. Here's the code for the client component: 'use client'; import { useState, useEffect } from 'react'; import { useInView ...

javascripttypescriptnext.jsreact-hooks

Dynamic property access using optional chaining in JavaScript

My attempt to utilize optional chaining, a feature provided by TypeScript for safely accessing dynamic properties, seems to be invalid. export const theme = { headers: { h1: { }, h6: { color: '#828286' }, }, } console.in ...

javascripttypescriptstyled-componentsoptional-chaining

Error Encountered: Visual Studio cannot locate the file 'COMPUTE_PATHS_ONLY.ts' during the build process

Upon fixing my visual studio 2015, an error was thrown that I haven't encountered before. Error Build: File 'COMPUTE_PATHS_ONLY.ts' not found. I did not add COMPUTE_PATHS_ONLY.ts to my Git repository. The other files in the repo rema ...

visual-studiotypescript

defining initial state values for a React class component using TypeScript

Here is the current state of the component: class Feed extends Component<FeedProps, FeedState> { constructor(props) { super(props); this.state = { isEditing: false, posts: [], totalPosts: 0, editPost: null, sta ...

reactjstypescript

Using TypeScript's `async await` within a nested function invocation

I am having trouble extracting the 'assigned suspect' from the callbacks, as it is showing up as undefined. Strangely, it works fine within an if statement. I believe the issue is related to the await/async functionality. Any assistance would be ...

typescript

The React component fails to load due to the discrepancies in the data retrieved from various asynchronous requests

Creating a travel-related form using React with TypeScript. The initial component TravelForm utilizes multiple async-await requests within useEffect hook to update the state of the subsequent component TravelGuideFields However, the values of props a ...

typescriptasync-awaitreact-hookspromiseuse-effect

What is the best way to import a data type from another file into a `.d.ts` file without converting it into a module?

Recently encountered a peculiar scenario involving d.ts files and namespaces. I have some d.ts files where I define and merge a namespace called PROJECT. Take a look at how it's declared and automatically merged (across multiple files) below: file1 ...

typescriptimportnamespacestypescript-typings