What causes npm start to fail in Angular 6 after incorporating social login functionality?

I am currently working on integrating Social Login functionality into my app.

I have attempted to incorporate the following:

npm install --save angular-6-social-login-fixed
npm install --save angular-6-social-login
npm install --save angular-6-social-login-v2

However, upon running >npm start

added 1 package from 1 contributor, removed 36 packages, updated 1 package and audited 23664 packages in 9.355s
found 45 vulnerabilities (12 low, 27 moderate, 6 high)
  run `npm audit fix` to fix them, or `npm audit` for details

(without making any changes to my code) I encountered the error:

error TS2307: Cannot find module 'moment'.

In addition, I came across several errors related to my existing modules such as:

error TS2315: Type 'CalendarEvent' is not generic.
error TS2339: Property 'id' does not exist on type 'CalendarEvent'.
calendarUtils"' has no exported member 'GetWeekViewArgs'.

This is a list of my dependencies versions:

  "@angular/cdk": "github:angular/cdk-builds",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/elements": "^7.2.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "github:angular/material2-builds",

Can anyone help me identify what could be missing?

angulartypescriptangular6

Answer №1

After discovering the solution, I am still puzzled by the root cause of this issue. Simply duplicate a functional project, execute npm install --save angular-6-social-login, and then overwrite this project with your previously created backup.

Unfortunately, this method does not resolve the underlying problem caused by (npm install). I am yet to determine why using npm install (with any -social-login) leads to modifications in your project's packages, components, and other modules. Nonetheless, it allows you to successfully run your project without errors while utilizing -social-login components.

*If anyone can shed light on why npm install triggers these changes and removes properties from other components, please provide an explanation.

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

What is the rationale behind Angular's decision to use cdr.markForCheck() instead of cdr.detectChanges() in the async

Regarding Angular, I have a question: Why does the Angular async pipe use cdr.markForCheck() instead of cdr.detectChanges()? I have noticed two main differences between these two approaches: markForCheck() marks the path all the way up to the root compo ...

angularangular-changedetectionngzoneangular-ngzone

Discovering the Type Inference of Function Composition Method (Chaining) in TypeScript

I'm working on implementing a function that can add a chainable method for function composition. Here's what I have so far: Also see: TypeScript playground { const F = <T, U>(f: (a: T) => U) => { type F = { compose: <V ...

typescriptfunctionfunctional-programmingfunction-composition

Incompatibility issues between NestJS and socket.io package

After diligently following the documentation, I attempted to install and work with socket.io on nestjs. However, I encountered multiple issues when installing packages. Despite trying different methods to update the package, nothing seemed to resolve the i ...

typescriptsocketsnestjs

Detecting changes in input text with Angular and Typescript

Searching for a straightforward and practical method to identify changes in my textfield has been challenging. Avoiding the use of (keypress) is necessary, as users may occasionally paste values into the field. The (onchange) event only triggers when the u ...

angulartypescriptonchangewatch

Is there a way to verify whether a key within an Interface corresponds to a class that is a subclass of a specific Parent

Is there a method in typescript to ensure that a property in an interface must be of type "child subclass C, which extends class P"? example.ts import { P } from '/path/to/types' class C extends P { ... } types.ts // `C` cannot be accessed ...

classtypescriptprototype

Guide on utilizing the express server in developer mode within the Angular 17 application development tool

The guidelines provided in the documentation () explain that: Angular CLI will generate an initial server setup specifically for rendering your Angular application on the server side. This server can be customized to handle additional functionalities lik ...

angularangular-ssr

Firebase and Angular 7 encountered a CORS policy block while trying to access an image from the origin

I am attempting to convert images that are stored in Firebase storage into base64 strings in order to use them in offline mode with my Angular 7/Ionic 4 application! (I am using AngularFire2) However, I encountered an error message stating: Access to i ...

javascriptangularfirebaseangularfire2cross-origin-read-blocking

Invoke Observable.subscribe() sequentially

I have an array of objects and need to iterate over each element, making a request to the service for each one. However, I want to ensure that the next iteration only occurs when the current request is successfully completed, or block any further requests. ...

angularrxjsobservable

Issues with the Angular Global Messaging service and how to tackle them

I am currently developing a web application using Angular 7 and I have implemented an API interceptor to show alerts when errors occur. Everything was working fine until I added a messaging service and messaging component. When I tried pushing the error me ...

angularangular-services

How to simulate loadStripe behavior with Cypress stub?

I am struggling to correctly stub out Stripe from my tests CartCheckoutButton.ts import React from 'react' import { loadStripe } from '@stripe/stripe-js' import useCart from '~/state/CartContext' import styles from '. ...

javascripttypescriptstripe-paymentscypress

Ways to adjust the color dynamics of a mat-slider

I am looking to dynamically change the color of a mat-slider. In my app, users have the ability to select any color from a color palette, and I want to display that selected color as the slider color. While I know you can add custom color names in the col ...

angularangular-material

Angular2+ does not return any elements when using .getElementsByClassName() even if they are present

I have a question that seems simple, but I can't seem to find the answer anywhere. I've looked through past questions but still haven't found a solution... In my Angular template, there is a large amount of text inside a div, and some parts ...

javascriptangular

What alternative approach can be used to substitute initEvent in typescript?

I am interested in manually triggering a MouseEvent in typescript, but I have discovered that the initEvent method is deprecated. var clickEvent =document.createEvent('MouseEvent'); clickEvent.initEvent('mouseup',true,true); https://i. ...

javascripttypescript

Is it possible to use an object's attribute as a switch case in TypeScript with useReducer?

I am attempting to convert switch case String into an object, but for some reason typescript is misunderstanding the switch case within useReducer: Prior to version update, everything was functioning correctly: export const LOGIN_USER = "LOGIN_USER&qu ...

reactjstypescript

What strategies can be employed to mitigate the activation of the losing arm in a Promise.race?

My current task involves sending the same query to multiple identical endpoints (about five) across various Kubernetes clusters. The goal is to aggregate the results without any delays and report failures to the user while continuing with the process seaml ...

javascripttypescriptpromisecancellation

Snackbar and RTK Query update trigger the error message: "Warning: Cannot update during an existing state transition."

I've built a basic ToDos application that communicates with a NodeJS backend using RTK Query to fetch data, update state, and store cache. Everything is functioning properly as expected with the communication between the frontend and backend. Recently ...

reactjstypescriptrtk-querysnackbarnotistack

Utilizing Form Validation in Angular 4

In the process of developing a straightforward Angular application that utilizes Twitter Bootstrap and jQuery to showcase employee data. I have hardcoded 4 sets of data which are displayed in a table, as shown in the attached image. The addition of an "Add ...

jqueryangularvalidationtwitter-bootstrap-3

Loop through every element in the Angular2 template

I am working with the following template and I need to access all the elements within it. Using ViewChildren only gives me a reference to one element, most likely because no two elements are the same and I am not using the same directive/component inside t ...

angular

Issue [ERR_MODULE_NOT_FOUND]: The module 'buildapp' could not be located within buildserver.js

I am currently working on a node project using typescript. The project's structure is organized in the following way: --src |-- server.ts |-- app.ts --build |-- server.js |-- app.js In server.ts: import { app } from &q ...

javascriptnode.jstypescript

Angular and Firestore, when combined, present a unique challenge as the queries

After upgrading the code of an outdated project to the latest versions of Angular and RxJs, I made every effort to update the code as thoroughly as possible. Here is a link to my previous code However, I am now encountering the issue of receiving undefin ...

angulartypescriptfirebaserxjs