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:

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

Is there a way to conditionally redirect to a specific page using NextAuth?

My website has 2 points of user login: one is through my app and the other is via a link on a third-party site. If a user comes from the third-party site, they should be redirected back to it. The only method I can come up with to distinguish if a user is ...

javascripttypescriptnext.jsnext-auth

Angular with RxJS: Observable with synchronous data flow

One of the services I have includes a method called foo. In this method, I am subscribing to an observable (http-client). foo () : boolean { let ret : false; this.http.get ("/blabla").subscribe ( (resp) => { ret = true; } return ret; ) ...

angularrxjs

Do you have any suggestions on how to fix this npm SQLite installation issue?

Could use some help with an SQLite installation error I'm encountering. Any ideas on what the issue might be and how to resolve it? C:\Users\jacka\Downloads\discord-emoji-stealer-master\discord-emoji-stealer-master>npm i & ...

javascriptnode.jsnpm

`Unable to update the checked prop in MUI switch component`

The value of RankPermission in the switchPermission function toggles from false to true, but for some reason, the MUI Switch component does not update in the browser. I haven't attempted any solutions yet and am unsure why it's not updating. I&ap ...

reactjstypescriptmaterial-ui

Guide on implementing a cordova plugin in a TypeScript cordova application

In my Cordova project, which utilizes Angular and Typescript, I am facing issues with implementing the juspay-ec-sdk-plugin for Cordova. I have explored possible solutions on StackOverflow related to integrating Cordova plugin in an Angular 4 Typescript ...

angulartypescriptcordova

Generating a random number to be input into the angular 2 form group index can be done by following these

One interesting feature of my form is the dynamic input field where users can easily add more fields by simply clicking on a button. These input fields are then linked to the template using ngFor, as shown below: *ngFor="let data of getTasks(myFormdata); ...

javascriptangulartypescript

When working with TypeScript, it's important to note that an implicit 'any' type may occur when trying to use an expression of type 'string' to index a specific type

Currently, I'm attempting to transfer a custom hook used in Vue for handling i18n from JavaScript to TypeScript. However, I am encountering a persistent error message: An element is implicitly assigned the type 'any' due to an expression o ...

typescriptvue.js

Is it possible to define a namespaced external module in TypeScript?

Currently, I am dealing with some legacy js modules that are either namespaced on window or define'd if the page is using AMD. Here's an example: // foo/bar.js (function (root, factory) { if (typeof define === "function" && define.am ...

typescriptamd

When utilizing a personalized Typescript Declaration File, encountering the error message 'Unable to resolve symbol (...)'

I'm having trouble creating a custom TypeScript declaration file for my JavaScript library. Here is a simplified version of the code: App.ts: /// <reference path="types.d.ts" /> MyMethods.doSomething() // error: Cannot resolve symbol "MyMetho ...

typescriptvisual-studio-2015resharper

Tips and techniques for updating the form value in Angular 4 Material while maintaining binding characteristics

import {Component,ViewChild} from '@angular/core'; import {NgForm} from '@angular/forms' @Component({ selector: 'checkbox-configurable-example', templateUrl: 'checkbox-configurable-example.html', styleUrls: [& ...

angularangular-material2

Tips for identifying and logging out a dormant user from the server side using Angular 2 Meteor

I'm currently diving into Angular 2 Meteor and working on a project that requires logging out the user when they close their browser window. I also need them to be redirected to the login page when they reopen the app. After searching online, I could ...

javascriptangularmeteorangular2-meteor

encountered an error stating module '@angular/compiler-cli/ngc' could not be located while attempting to execute ng serve

Here is the content of my package.json file: { "name": "cal-euc", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build&qu ...

angularnpm

Oops! Looks like there's an issue with the type error: value.forEach is

I am working on creating an update form in Angular 6 using FormArray. Below is the code snippet I have in editfrom.TS : // Initialising FormArray valueIngrident = new FormArray([]); constructor(private brandService: BrandService, private PValueInfoSe ...

javascriptangulartypescriptangular6

Guide to deploying Angular application on a weblogic server using a WAR/EAR file

I am facing difficulties deploying an Angular application on a WeblogicApplication server. My current approach is not yielding successful results: This is what I have done: 1) Built my Angular application using exec-maven-plugin and placed the result i ...

angularmavenweblogicweblogic12c

Issue encountered while attempting to enclose a function within another function in Typescript

I'm attempting to wrap a function within another function before passing it to a library for later execution. However, I'm encountering various Typescript errors while trying to utilize .apply() and spread arguments. The library mandates that I ...

reactjstypescript

Error when trying to add style-loader in Vue.js 2 due to webpack installation issue

My task is to set up the style-loader in order to load import 'bootstrap-icons/font/bootstrap-icons.css'. However, when I run npm install style-loader, I encounter the following error message: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to re ...

vue.jsnpmwebpackvuejs2webpack-style-loader

Error in node: nodenv could not locate any specified version for use

Following a successful installation of Node, I encountered the following error message: $ npm nodenv: couldn't find any version specified for use $ node nodenv: couldn't find any version specified for use Does anyone have insight into where thi ...

node.jsinstallationnpm

Can you explain the concept of F-Bounded Polymorphism in TypeScript?

Version 1.8 of TypeScript caught my attention because it now supports F-Bounded Polymorphism. Can you help me understand what this feature is in simple terms and how it can be beneficial? I assume that its early inclusion signifies its significance. ...

javascripttypescript

What might be causing my observable to fail to return a value?

I'm currently utilizing an API known as ngx-pwa localstorage, which serves as a wrapper for an indexeddb database. Within my Angular project, I have a service that interacts with this database through a method called getItem: getItem(key: string) { ...

angulartypescript

Brand new Angular 9 application encountering the error message "ERROR in Cannot read property 'flags' of undefined" when running "ng build" on a Mac device

I set up a fresh Angular 9 project on my MacBook by executing ng new demo (no routing, CSS) cd demo ng build However, I encountered the following error: ERROR in Cannot read property 'flags' of undefined When running "ng version", here's ...

angulartypescript