Angular2 QuickStart npm start is not working correctly

File structure

I know Angular2 beta has just been released but I can't reproduce the steps from their official site tutorial ( https://angular.io/guide/quickstart ). Maybe someone has had similar issues and knows what to do in order to fix the this? When I try to start the application with npm start command I get output like this:

0 info it worked if it ends with ok
1 verbose cli [ 'node', '/usr/local/bin/npm', 'start' ]
2 info using npm@2.7.4
3 info using node@v0.12.2
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info prestart angular2-quickstart@1.0.0
6 info start angular2-quickstart@1.0.0
7 verbose unsafe-perm in lifecycle true
8 info angular2-quickstart@1.0.0 Failed to exec start script
9 verbose stack Error: angular2-quickstart@1.0.0 start: `concurrent "npm run tsc:w" "npm run lite" `
9 verbose stack Exit status 127
9 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:213:16)
9 verbose stack     at EventEmitter.emit (events.js:110:17)
9 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:14:12)
9 verbose stack     at ChildProcess.emit (events.js:110:17)
9 verbose stack     at maybeClose (child_process.js:1015:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
10 verbose pkgid angular2-quickstart@1.0.0
11 verbose cwd /Users/tmrovsky/Documents/angular2/angular2-quickstart
12 error Darwin 13.4.0
13 error argv "node" "/usr/local/bin/npm" "start"
14 error node v0.12.2
15 error npm  v2.7.4
16 error code ELIFECYCLE
17 error angular2-quickstart@1.0.0 start: `concurrent "npm run tsc:w" "npm run lite" `
17 error Exit status 127
18 error Failed at the angular2-quickstart@1.0.0 start script 'concurrent "npm run tsc:w" "npm run lite" '.
18 error This is most likely a problem with the angular2-quickstart package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error     concurrent "npm run tsc:w" "npm run lite"
18 error You can get their info via:
18 error     npm owner ls angular2-quickstart
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

I had: typescript 1.7.5 version node 0.12.2 version

Maybe someone could help solve the problem :) ?

package.json:

{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}

index.html:

<html>


<head>
<title>Angular 2 QuickStart</title>


<!-- 1. Load libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>


<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>


</head>


<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>


</html>

app.components.ts:

import {Component} from 'angular2/core';


@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>',
})


export class AppComponent {}

boot.js:

import {bootstrap} from 'angular2/platform/browser'
import  {AppComponent} from './app.component'


bootstrap(AppComponent);
117252 次浏览
  1. In devDependencies typescript is 1.7.3 but you have 1.7.5 fix common one.
  2. Import your js files in the correct order in index.html. for more info refer this repository https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html or refer to my repository here

    https://github.com/MrPardeep/Angular2-DatePicker

index.html

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>


<script>
System.config({
defaultJSExtensions: true,
map: {
rxjs: 'node_modules/rxjs'
},
packages: {
rxjs: {
defaultExtension: 'js'
}
}
});
</script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>


<script>
System.import('dist/bootstrap');
</script>

In order to get npm start running for me, I had to make sure I had globally installed some of the devDependencies. Have you tried:

  • npm install -g concurrently
  • npm install -g lite-server
  • npm install -g typescript

I had a similar problem after copying the angular2-quickstart folder (including node_modules) to create the angular2-tour-of-heroes folder. This was wierd because the original was compiling fine but the copy was not...

npm run tsc

I was able to resolve the issue by deleting the node_modules folder and re-running npm install.

This was a surprise to me, so I did a diff between the 2 folders...

diff -rw angular2-quickstart/node_modules/ angular2-tour-of-heroes/node_modules/

there were a LOT of differences, a lot of 'where' diffs in the package.json files like this:-

diff -rw angular2-quickstart/node_modules/yargs/package.json angular2-tour-of-heroes/node_modules/yargs/package.json
5c5
<       "/Users/michael/Tutorials/angular2/angular2-quickstart/node_modules/lite-server"
---
>       "/Users/michael/Tutorials/angular2/angular2-tour-of-heroes/node_modules/lite-server"

...which kind of makes sense but there were also some like this:-

diff -rw angular2-quickstart/node_modules/utf-8-validate/build/gyp-mac-tool angular2-tour-of-heroes/node_modules/utf-8-validate/build/gyp-mac-tool
607c607,608
<       return {k: self._ExpandVariables(data[k], substitutions) for k in data}
---
>       return dict((k, self._ExpandVariables(data[k],
>                                             substitutions)) for k in data)

...which I don't understand at all.

Oh well, Hope this helps.

Try this:

  1. Install Latest versions npm/nodejs I purged my npm installation
  2. After that, install tsd npm install -g tsd
  3. Then clone https://github.com/johnpapa/angular2-tour-of-heroes.git
  4. Finally npm i and npm start

First you need update npm, lite-server and typescript:

sudo npm update -g && sudo npm install -g concurrently lite-server typescript

Delete node_modules folder from your Angular project directory (if exist). Next run:

npm install

After that resolve ENOSPC errors:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Finally:

npm start

This is my package.json file:

{
"name": "reservationsystem",
"version": "0.0.1",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"dependencies": {
"a2-in-memory-web-api": "~0.1.0",
"angular2": "2.0.0-beta.3",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"systemjs": "0.19.17",
"zone.js": "0.5.11"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^2.0.1",
"typescript": "^1.7.5"
}
}

None of these answers helped with Ubuntu. Finally I ran across a solution from John Papa (lite-server's author).

On Ubuntu 15.10 the Angular 2 Quick Start sprang to life after running this at the terminal:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Apparently it increases the number of available File Watches.

Answer Source: https://github.com/johnpapa/lite-server/issues/9

Just: npm install -g lite-server

And then relaunch: npm start

Installing the packages globally is one way to do it, but this restricts you to using the same version across all projects in which they are used.

Instead, you can prefix your npm scripts with ./node_modules/.bin. In your case, the package.json would look like this:

{
"name": "reservationsystem",
"version": "0.0.1",
"scripts": {
"tsc": "./node_modules/.bin/tsc",
"tsc:w": "npm run tsc -w",
"lite": "./node_modules/.bin/lite-server",
"start": "./node_modules/.bin/concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"dependencies": {
"a2-in-memory-web-api": "~0.1.0",
"angular2": "2.0.0-beta.3",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"systemjs": "0.19.17",
"zone.js": "0.5.11"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^2.0.1",
"typescript": "^1.7.5"
}
}

I think npm is supposed to supply the ./node_modules/.bin in front of each "script" command that's in that directory by default, which is why the original package.json looked the way it did. I am not sure if that feature is in every release of npm, or if there's some config setting you're supposed to specify. It'd be worth looking into!

It's most likely that your NPM version is old, i recently had this on a developer machine at work, type:

npm -v

If it's anything less than the current stable version, and you can just update your Node.js install from here https://nodejs.org/en/ :)

This worked me, put /// <reference path="../node_modules/angular2/typings/browser.d.ts" /> at the top of bootstraping file.

For example:-

In boot.ts

/// <reference path="../node_modules/angular2/typings/browser.d.ts" />
import {bootstrap} from 'angular2/platform/browser'
import  {AppComponent} from './app.component'


bootstrap(AppComponent);

Note:- Make sure you have mention the correct reference path.

Change the start field in package.json from

"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" "

to

"start": "concurrently \"npm run tsc:w\" \"npm run lite\" "

I had the same problem, we both forgot to include the 's' on components here:

import  {AppComponent} from './app.component'

Should be:

boot.js:

import {bootstrap} from 'angular2/platform/browser'
import  {AppComponent} from './app.components'


bootstrap(AppComponent);

I had the same error on OS X (node v6.2.0 and npm v3.9.3 installed with homebrew) and it was not solved by any of the above. I had to add full paths to the commands being run by concurrently.

In package.json, I changed this:

"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",

to this:

"start": "tsc && concurrently \"/Users/kyen/.node/bin/npm run tsc:w\" \"/Users/kyen/.node/bin/npm run lite\" ",

You will, of course, need to update the correct paths based on where your node global binaries are stored. Note that I didn't need to add the path to the first tsc command. It seems only concurrently needs the full paths specified.

I encountered this same issue. However, none of the above answers were proper solutions for me. It turns out it was due more to my dev environment then any of the versions of things.

Since I used Visual Studio Code, I set up a build task in VSC to compile TypeScript as a watcher. This was the issue. VSC had already started a NPM task for TSC and so when executing the tutorial's 'start' script, it was having issues with the fact that VSC was still running tsc -w.

I stopped the task in VSC and reran the 'start' script and it worked just fine.

Solution A: Stop and npm Start

  • VSC Command>Tasks: Terminate running tasks
  • Terminal $ npm start

After that to bring everything working together I change the start script to just start the server and not actually launch TSC.

Solution B: Change npm start script

  • Replace

    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "

  • with

    "start": "npm run lite"

Solution C: Just run the lite server command

`npm run lite`

I met the same error. And after a lot search, I finally found this one: Angular2 application install & run via package.json. Then I tried to replace

"scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, to

"scripts": { "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" },

Hope it helps who get the same error.

PS: My error is not the same as Tomasz, which is my npm version is 3.7.3 and node version is 5.9.1.

Uninstall all existing node packages. Update node and npm.As it is given in documentation as at least node v5.x.x and npm 3.x.x else it will cause errors .

Do npm clean. Then do npm install, npm start.

This solved the issue for me.

If you use proxy it may cause this error:

  1. npm config set proxy http://username:pass@proxy:port

  2. npm config set https-proxy http://username:pass@proxy:port

  3. create a file named .typingsrc in your application folder that includes:

    • proxy = (value on step 1)
    • https-proxy = (value on step 1)
  4. run npm cache clean

  5. run npm install
  6. run npm typings install
  7. run npm start

it will work then

Add the following section in tsconfig.json:

"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}

and in \node_modules\typings\typings.json:

"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim /es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
}

After these changes it works for me.

I solved my issue with the Quick Start program by following below link.

Angular 2 QuickStart Live-server error

Change the Package.json Scripts Settings

"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\",

to:

"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",

I had the same error on windows 10. It looks like it's problem with concurrently npm package. I found 2 options how to solve this error:

  • 1. Run both commands in 2 separate cmds:

    • in the first one run: npm run tsc:w
    • in the second one: npm run lite
  • 2. Change package.json

    • just change the start option to this: "start": "tsc && npm run tsc:w | npm run lite",

For Ubuntu 16.x users, installing latest version 5.x solves my issue in ubuntu

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -
sudo apt-get install -y nodejs

Seemingly there is more than one way in which angular2-quickstart can fail to start. I had the same issue running Angular2 version 2.0.0 under a fresh install of node 6.6.0 / npm 3.10.3 on Windows 7. In my case running npm start dumped a ton of typescript errors:

c:\git\angular2-quickstart>npm start


> angular2-quickstart@1.0.0 start c:\git\angular2-quickstart
> tsc && concurrently "npm run tsc:w" "npm run lite"


node_modules/@angular/common/src/directives/ng_class.d.ts(46,34): error TS2304: Cannot find name 'Set'.
node_modules/@angular/common/src/pipes/async_pipe.d.ts(39,38): error TS2304: Cannot find name 'Promise'.
(...)

This issue is discussed in angular quickstart issue #63, "typings" not being installed correctly. That ticket gives the fix as

$ ./node_modules/.bin/typings install

which worked for me. (I'm not sure of the "right" way to do this yet.)

I the quick start tutorial I went through the steps up until npm start. Then i got this error. Then I deleted the node_modules folder under angular-quickstart and ran npm install again. Now it works.

Please make sure the names are correct, thus changing component in boot.js to components. enter image description here

Go to https://github.com/npm/npm/issues/14075 address. And try juaniliska's answer. Maybe help you.

npm config get registry

npm cache clean

npm install

Here's how I solved the problem today after hours of trying all of these different solutions - (for anyone looking for another way still).

Open 2 instances of cmd at your quickstart dir:

window #1:

npm run build:watch

then...

window #2:

npm run serve

It will then open in the browser and work as expected

In my case ,I just needed to add a dummy .ts file.So I created a test.ts file with no contents and ran npm start to solve the problem.

Change the start field in package.json from:

"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" "

To:

"start": "concurrently \"npm run tsc:w\" \"npm run lite\" "

It really helped.

In the package.json file, I removed the line which had "prestart": "npm run build". This appears to be a blocking command, and occurs before (npm) start, thus preventing the other start commands.

This answer is in relation to the excellent Pluralsight course "Angular 2 Fundamentals" by Jim Cooper.

If like me you are having trouble getting started running the command npm start on a Windows 10 machine then I suggest the following:

Start git bash as administrator (follow the steps in the video) Navigate to the project directory (ng2-fundamentals) and then type the following commands:

npm config get registry


npm cache clean


npm install

Once the installation is complete you will need to modify the get-shell.js file located in the spawn-default-shell module inside the node_modules folder as follows:

Change the following:

const DETECT_SH_REGEX = /sh$/;

to this:

const DETECT_SH_REGEX = /sh/;

Note the $ removed from the end of the sh string (credit to the original author of this fix alfian777 who posted the solution on github)

Save the file and then go to your git bash console and type npm start

You shouldn't see any errors now and the localhost page will start up in your default browser (alternatively open your browser and navigate to http://localhost:8808/).

This answer is for Windows 10 users only and as you'll see below, I suspect the problem is happening only for those users:

To find out what is happening, you can run the command on PowerShell and it will tell you what is the actual problem:

PS C:\Users\Laurent-Philippe> tsc && concurrently "tsc -w" "lite-server"
At line:1 char:5
+ tsc && concurrently "tsc -w" "lite-server"
+     ~~
The token '&&' is not a valid statement separator in this version.
+ CategoryInfo          : ParserError: (:) [], ParentContainsErrorRecordException
+ FullyQualifiedErrorId : InvalidEndOfLine

Basically, the message explains that the token "&&" is not yet valid with Windows 10. And for those wondering, the same command replacing && with &, informed us that the ampersand operator is reserved for future use:

 (&) character is not allowed. The & operator is reserved for future use; wrap an ampersand in double quotation marks ("&") to pass it as part of a string.

Conclusions:

  • if you want to manually launch this command from the powershell, you can use this instead:

    tsc "&" concurrently "tsc -w" "lite-server"

  • if you want to launch your application with npm start, replace the start line in your package.json by:

    "start": "tsc & concurrently \"tsc -w\" \"lite-server\" "

  • alternatively, the answer of user60108 also works because he is not using the ampersand:

    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" "

Change start in angular.json to either "start": "ng serve --host 0.0.0.0" or "start": "lite-server" and run.Also check if you've installed angular/cli properly or not.