Failed to execute start script 'ng serve' in npm start

Let me make it clear: I'm brand new to AngularJS and pretty much any Web Technology. I consider myself a novice in the realm of Web Development.

I attempted to install AngularJS, and truth be told, after numerous "Mysterious Button Clicks", I might have caused some chaos, or perhaps not.

I followed the AngularJS Website's Tutorial for installing Angular and then decided to hit that "Red Button":

npm start

But lo and behold, an error popped up:

https://i.sstatic.net/Iw3hF.png

Real-Time Debugging_Log here:

0 info it worked if it ends with ok
1 verbose cli [ '/home/apanpie/.nvm/versions/node/v7.4.0/bin/node',
1 verbose cli   '/home/apanpie/.nvm/versions/node/v7.4.0/bin/npm',
1 verbose cli   'start' ]
2 info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86e8f6ebc6b2a8b6a8b3">[email protected]</a>
3 info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d737279785d6b2a3329332d">[email protected]</a>
4 verbose config Skipping project config: /home/apanpie/.npmrc. (matches userconfig)
5 verbose run-script [ 'prestart', 'start', 'poststart' ]
6 info lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a0b1a0b041a030f2a5a445a445a">[email protected]</a>~prestart: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="533223323d233a3613637d637d63">[email protected]</a>
7 silly lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1c0d1c130d14183d4d534d534d">[email protected]</a>~prestart: no script for prestart, continuing
8 info lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dabbaabbb4aab3bf9aeaf4eaf4ea">[email protected]</a>~start: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89988999688919db8c8d6c8d6c8">[email protected]</a>
...
25 verbose exit [ 1, true ]

After scouring the vastness of Google, I came up empty handed.

Furthermore, I'm unsure if this is related, but within my TypeScript code:

import { View, Component } from '@angular2/core';
[... Components Here ... ]

an error pops up:

Cannot find module '@angular2/core'

If someone could shed some light on this, I would greatly appreciate it!

angulartypescriptnpmnpm-start

Answer №1

For those who are new to Angular 2, follow these steps outlined on the official Angular website to get started:

1) Download the starter project from this link and save it to a local folder (e.g., c:\test\): https://github.com/angular/quickstart.git. This is all you need for your first "Hello World" app.

2) Open the command prompt and navigate to the c:\test directory. 3) Make sure to install Node.js if it's not already installed. 4) Run npm install. 5) Finally, run npm start.

Following these steps will help you create your first Angular 2 "Hello World" app.

This website is highly recommended for learning Angular 2: https://angular.io/docs/ts/latest/guide/setup.html

Answer №2

It is important to note that the versions of node/npm and angular/cli might not align perfectly. For a detailed comparison, refer to this comprehensive Check list to identify your Angular version and verify the node/npm version you currently have installed.

Answer №3

It may seem a bit odd, but it's important to name the root folder correctly following this pattern, such as my-app or tour-of-heroes.

Just earlier today, I encountered an issue when I mistakenly copied my-app like this: sudo cp -rv my-app tourOfHeroes and then tried running npm start inside tourOfHeroes only to receive an error.

After some hours of troubleshooting, I decided to try: sudo cp -rv my-app tour-of-heroes followed by running npm start inside tour-of-heroes and like magic, everything worked perfectly and I was back in business.

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

Global registration of router directives with Angular router RC3 is required

I'm trying to avoid registering the Router_Directives for each individual component. Instead, I would like to apply it globally similar to how I did before: import { RouterConfig ,Router, ActivatedRoute, ROUTE_PROVIDERS} from '@angular/router&a ...

angularangular2-router3

React Bootstrap Forms: The <Form.Control.Feedback> element is failing to display when the validation is set to false

Problem: I am facing difficulties with displaying the React Bootstrap <Form.Control.Feedback></Form.Control.Feedback> when the validation is false in my form implementation. Steps to Recreate: Upon clicking the Send Verification Code button, ...

reactjstypescriptbootstrap-4react-bootstrap

Utilizing the NPM cluster module to spread server load across multiple instances, each

I have noticed numerous examples showcasing the use of the cluster npm module with Express web servers. For instance: However, a question that arises is if you create a new web server 'for each core' using the cluster module, wouldn't each ...

node.jsexpressnpm

What is the function return type in a NextJS function?

In my project using NextJS 13, I've come across a layout.tsx file and found the following code snippet: export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html> <head /> <body&g ...

typescriptnext.js

The transition to CDK version 2 resulted in a failure of our test cases

After upgrading my CDK infrastructure code from version 1 to version 2, I encountered some failed test cases. The conversion itself was successful without any issues. The only changes made were updating the references from version 1 to version 2, nothing ...

typescriptamazon-web-servicesaws-cdk

Issue encountered with JavaScript function within TypeScript file connected to HTML code

I am currently working on a simple SharePoint web part and encountering an issue with using a function from another module file in my main file. Snippet from the JSFunctions.module.js file (where I define my function): function getApi(){ [my code]... }; ...

javascripthtmltypescript

The error property is not found in the type AxiosResponse<any, any> or { error: AxiosError<unknown, any>; }

As a beginner with typescript, I am encountering some issues with the following code snippet import axios, { AxiosResponse, AxiosError } from 'axios'; const get = async () => { const url = 'https://example.com'; const reques ...

javascriptnode.jstypescript

Error when running end-to-end tests in Angular CLI using the ng e2e

Recently, I created a new Angular 4 project using the Angular CLI. Upon running ng e2e, the sample end-to-end test worked flawlessly. However, when I later added a subfolder named services in the app folder and generated a service within it, the ng e2e com ...

angulartypescripttestingangular-cliangular-e2e

What methods can I employ to trace anonymous functions within the Angular framework?

I'm curious about how to keep track of anonymous functions for performance purposes. Is there a way to determine which piece of code an anonymous function is associated with? Here's an example of my code: <button (click)="startTimeout()&q ...

angulartypescriptanonymous-function

Upgrading Angular from version 8 to 9: Dealing with Compilation Errors in Ivy Templates

After successfully upgrading my Angular application from version 8 to version 9 following the Angular Update Guide, I encountered some issues in the ts files and managed to resolve them all. In version 8, I was using the View Engine instead of Ivy, which ...

javascriptangulartypescriptangular9angular-upgrade

Tips for sending a String[] to my Angular 2 HTML template

In the export class of my component, I have a string array variable declared like this; barChartLabel:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; To display t ...

javascripthtmlcssangular

Encountering issues while attempting to import Realm in my project. Error message says: "Missing Realm constructor. Have you executed 'pod install'? (Working on a Windows machine)"

I've been working on a mobile app project using React Native and I wanted to integrate Realm (MongoDB) into it. After running: npm install realm I noticed that Realm was successfully added in the "node_modules" folder. When I tried to import Realm wi ...

react-nativenpmexporealm

Fixing Angular minification issue with class names within 5 minutes

Who has encountered the issue of minification affecting class names in Angular 5+ and knows how to resolve it? I have a few classes: class FirstClass { } class SecondClass{ } And a check-function like this: function checkFunction() { const isEqual ...

angularminify

Using ng-bootstrap with Bootstrap 4 beta as an npm dependency

After updating my npm dependencies in package.json to Bootstrap 4 beta and ng-bootstrap to 1.0.0-beta.5, I encountered an "UNMET PEER DEPENDENCY" for popper.js when running npm install due to its new addition as a dependency in Bootstrap 4 beta. Despite th ...

angularnpmbootstrap-4ng-bootstrap

I'm encountering difficulties running my application server with the "npm start" command on my Ubuntu operating system. The error message is pointing to issues with the start script

I am currently working on a PERN stack project involving PostgreSQL, Express, React.JS, and Node.JS. After downloading the necessary files from a repository on Github, I opened them in VS Code and attempted to start the server by running the command below. ...

node.jsnpm

Is there a way to invoke a client-side function from the server?

Is there a way to display an alert at the top of the browser if the SQL query returns empty results? I tried using the "alert" function, but I'm struggling with customizing its appearance. I have a function in my HTML code that triggers an alert, but ...

htmltypescriptexpress

Send parameters from npm command to shell script

script.js: "scripts": { "test": "bash test.sh" }, test.sh: #!/bin/bash for x in "$@" do case $x in -l=*|--loc=*) LOCPATH="${x#*=}" shift # past argument=value ;; --default) DEFAULT=YES shift # past argument with no value ...

bashnpm

Changing return values with Jest mocks in TypeScript

Here I am again with a very straightforward example. In summary, I require a different response from the mocked class. Below is my basic class that returns an object: class Producer { hello() { return { ...

javascripttypescriptunit-testingjestjs

Troubleshooting steps for opening a port in ExpressJS and resolving issues with port execution

Check out the code snippet below. var express = require('express'); var bodyParser = require('body-parser'); var path = require('path'); var app = express(); app.listen(9000, function() { console.log('Hello World ...

node.jsexpressnpm

Retrieving information from a JSON object in Angular using a specific key

After receiving JSON data from the server, I currently have a variable public checkId: any = 54 How can I extract the data corresponding to ID = 54 from the provided JSON below? I am specifically looking to extract the values associated with KEY 54 " ...

javascriptarraysjsonangulartypescript