ng serve issue persists even after resolving vulnerabilities

Can anyone assist me in resolving why I am unable to start my project after fixing 3 high vulnerabilities? I ran npm audit to identify the vulnerabilities and then used 

npm install --save-dev @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3d32371e6f6b706c706f">[email protected]</a>
to address them. However, when I try ng serve, nothing happens. So, I attempted to run npm start instead and encountered the following errors:

npm ERR! code ELIFECYCLE
npm ERR! errno 3
npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1b0b3b291e1ffe1ffe1">[email protected]</a> start: `ng serve`
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5949796b5c5dbc5dbc5">[email protected]</a> start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2023-03-07T17_32_14_773Z-debug.log

This information is available in the log.

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start'
1 verbose cli ]
2 info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="711f011c31475f40455f4046">[email protected]</a>
3 info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b45444f4e6b5d1a1f05191b051a">[email protected]</a>
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f0e0d0c2f5f415f415f">[email protected]</a>~prestart: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d7d4d5f68698869886">[email protected]</a>
...
... (remaining content omitted for brevity)
...
19 verbose npm  v6.14.17
20 error code ELIFECYCLE
21 error errno 3
22 error <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9c8cbcae99987998799">[email protected]</a> start: `ng serve`
22 error Exit status 3
23 error Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2a29280b7b657b657b">[email protected]</a> start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 3, true ]

Shown below is the current structure of package.json:

{
  "name": "abc",
  "version": "0.0.0",
  "scripts": {
    ...
    ... (scripts content omitted for brevity)
    ...
  },
  "private": true,
  "dependencies": {
    ...
    ... (dependencies list omitted for brevity)
    ...
  },
  "devDependencies": {
    ...
    ... (devDependencies list omitted for brevity)
    ...
  }
}

I have attempted deleting node_modules and package-lock.json followed by running npm install but the issue persists.

javascriptangulartypescriptnpm

Answer №1

The packages you have recently installed seem to be causing compatibility issues. To ensure smooth functioning, Angular requires all package versions to be compatible with each other. The discord between the packages you have installed is likely due to version mismatch.

You can resolve this issue by referring to this link. Make sure to align your package versions properly before running the npm start or ng serve command.

It is recommended to follow Angular's recommendations and update your project's package versions accordingly for optimal performance.

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

Why is Vite's hot reloading feature displaying unpredictable outcomes?

I have a unique setup consisting of Vite, Typescript, and Vue 3 SPA utilizing "script setup". This app is equipped with Urql to query data from a GraphQL endpoint. An interesting occurrence happens where the query results are only displayed after the comp ...

typescriptvue.jsviteurql

Retrieve the width of an element once the browser has finalized its dimensions

I am facing an issue with centering a pop-up box perfectly within the window using CSS properties. The code for the pop-up box styling is as follows: #pop_up { position: fixed; display: inline-block; border: 2px solid green; box-shadow: 0p ...

javascriptjquerycss

Include a novel item into the JSON string that is being received

Recently, I attempted to parse an incoming JSON string and insert a new object into it. The method I used looked like this: addSetting(category) { console.log(category.value); //Console.log = [{"meta":"","value":""}] category.value = JSON.parse(c ...

javascriptjson

React Native animation encountered a rendering issue: Invalid transform scaleDisliked value: { "scaleDisliked": 1 }

While working on my react native app, I encountered an issue when trying to apply a transform:scale effect to an Animated.View component. I am using interpolate for this purpose, but unfortunately, I keep receiving the following error message: Render error ...

javascriptreactjsreact-native

Ways to deactivate remaining buttons until a function call finishes after selecting one in a react render() function?

In order to prevent the overlap of results when multiple buttons are clicked simultaneously, I need to disable all toggle buttons until one function call is complete, including the reset button. Additionally, I'm looking for a way to display my functi ...

javascriptreactjs

Switching between play and pause for the video element using a component for the child

Trying to toggle the play/pause of a child video by clicking on a parent div can be challenging, especially when dealing with multiple instances of the same div and video. A normal function may only work for one specific video, as mentioned by @ken. I hav ...

javascripthtmlvue.jsvue-component

The sourcemap for a Vue file based on TypeScript is not available due to the presence of the lang="ts" attribute

I am facing an issue where I need to transition my vue files from JavaScript to TypeScript. Currently, they have a standard structure like this: <template> ... </template> <script> ... </script> To use them with TypeScript, I le ...

typescriptvue.jswebpackvue-componentsource-maps

Customize Input Values by Selecting an Option with jQuery-UI Autocomplete

Hello there, I am a newcomer to java-script and could really use some help. My goal is to have the data in the country field automatically populated when a user enters data into the city field. I have an xml file: <ROWSET> <ROW> <city>&l ...

javascriptjqueryjquery-uiautocompletejquery-ui-autocomplete

Uncheck the previous option selected in a multi-select dropdown using jQuery

Hey there, I've been facing an issue with my change handler when trying to add or remove values from an Array. It works fine until the last element is selected, at which point the change event does not fire properly. Has anyone else encountered this p ...

javascriptjqueryhtmlmultiple-select

What are alternative methods for creating a two-column form layout that do not involve the use of

When generating the html form, I am looping through the form variables as shown below: {% for field in form %} {{ LABEL }}{{ INPUT FIELD }} The labels and fields are going through a loop. A simple one-column layout can be generated using: {% for field ...

javascripthtmlcssformswebforms

How can I update a property within an object in a sequential manner, similar to taking turns in a game, using React.js?

I am currently working on a ReactJs project where I am creating a game, but I have encountered an issue. I need to alternate turns between players and generate a random number between 1 and 10 for each player, storing this random number inside their respec ...

javascriptreactjstypescriptobjectgame-physics

There was an issue when trying to create symlinks for the sprkl binaries in /usr/local/bin

I encountered an error while attempting to install this extension on WSL. Any suggestions on how to resolve this issue? I have already tried editing and adding PATH Variables. :~$ npx @sprkl/scripts install ...

node.jswindowsubuntunpmwindows-subsystem-for-linux

Using HTML and JavaScript, we can set two different color values - one for the background and one for the h1 title

I am trying to save two values, one for the h1 tag and one for the body background. I want the user to select color 1 and color 2. When I press the third button, all changes should be applied and the colors should change. I have attempted this but with no ...

javascripthtmlcss

Switch between various components using multiple buttons in Next.js

I am in the process of creating a component that will display different components depending on which button the user selects. Here are the available “pages”: ` const navigation = [ { name: "EOQ", return: "<EOQgraph />" }, { nam ...

javascriptcsstwitter-bootstrapnext.js

Utilizing JavaScript to Load and Showcase Images from a Temporary Image to imgsrc

How can I dynamically display images from the temporary image array 'tempimages' onto the 'img' element with the 'src' property? I have written a code that attempts to display temporary images from 'tempimages[]' on ...

javascriptjqueryhtml

error is not defined in the onsuccess function of the ajax.beginform partial view

Currently, I am working on an MVC5 project where a View is calling a Partial View. Within the Partial View, there is an Ajax.BeginForm that triggers a function on OnSuccess. However, during execution, I encounter an error stating that the function cannot ...

javascriptajaxasp.net-mvcpartial-views

Encountering an issue with a private npm registry while using a yarn workspace

Exploring the world of yarn workspaces and dealing with modules that have private dependencies - where I've added a line like this in the .npmrc file: //npm.pkg.github.com/:_authToken=this-is-some-fake-token The token is unique to each user. When run ...

npmyarnpkgyarn-workspaces

The React Component in Next.js does not come equipped with CSS Module functionality

I have been attempting to incorporate and apply CSS styles from a module to a React component, but the styles are not being applied, and the CSS is not being included at all. Here is the current code snippet: ./components/Toolbar.tsx import styles from & ...

javascriptcssnode.jstypescriptnext.js

Using Typescript and React to retrieve the type of a variable based on its defined type

Just getting started with Typescript and could use some guidance. Currently, I'm using React to develop a table component with the help of this library: Let's say there's a service that retrieves data: const { data, error, loading, refetc ...

reactjstypescriptdevexpress

Motion of the atoms

I recently came across an interesting effect on the IconArchive website, but I am unsure how to implement it. If anyone could help me understand the concept with a small example, that would be greatly appreciated. You can see the effect in action by visi ...

javascriptjqueryhtmlcss