CODEWITHSUNDEEP
node.jsangularnpm
Tomasz Ciunel
Tomasz Ciunel

Reputation: 1079

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 [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info prestart [email protected]
6 info start [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec start script
9 verbose stack Error: [email protected] 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 [email protected]
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 [email protected] start: `concurrent "npm run tsc:w" "npm run lite" `
17 error Exit status 127
18 error Failed at the [email protected] 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);

Upvotes: 107

Views: 118222

Answers (30)

Saliya Wicky
Saliya Wicky

Reputation: 23

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\" ",

Upvotes: 3

Amit Kumar Trivedi
Amit Kumar Trivedi

Reputation: 543

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.

Upvotes: 0

Cl&#233;mentine
Cl&#233;mentine

Reputation: 11

Just: npm install -g lite-server

And then relaunch: npm start

Upvotes: -2

kubra
kubra

Reputation: 1

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

Upvotes: 0

Itanex
Itanex

Reputation: 1714

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`

Upvotes: 3

dontHaveName
dontHaveName

Reputation: 1937

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",

Upvotes: 15

Edi
Edi

Reputation: 66

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.

Upvotes: 0

Alekya
Alekya

Reputation: 243

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.

Upvotes: 0

Laurent-Philippe Albou
Laurent-Philippe Albou

Reputation: 326

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\" "

Upvotes: 2

Trevor
Trevor

Reputation: 1604

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/).

Upvotes: 5

SimonInOz
SimonInOz

Reputation: 11

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.

Upvotes: 0

Joseph
Joseph

Reputation: 51

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.

Upvotes: 5

Srajan Soni
Srajan Soni

Reputation: 86

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.

Upvotes: -1

DeclanPossnett
DeclanPossnett

Reputation: 376

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

Upvotes: 13

barış &#231;ıracı
barış &#231;ıracı

Reputation: 1043

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

Upvotes: 0

Pardeep Jain
Pardeep Jain

Reputation: 86790

  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>

Upvotes: 1

skipper
skipper

Reputation: 171

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

Upvotes: 0

Robert Calhoun
Robert Calhoun

Reputation: 5153

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

> [email protected] 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.)

Upvotes: 0

Subrata Mazumder
Subrata Mazumder

Reputation: 1

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

Upvotes: 0

user60108
user60108

Reputation: 3462

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\" "

Upvotes: 226

Ajith Thomas
Ajith Thomas

Reputation: 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.

Upvotes: 0

Beck
Beck

Reputation: 77

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.

Upvotes: 0

kyen99
kyen99

Reputation: 535

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.

Upvotes: 0

Jim Factor
Jim Factor

Reputation: 1535

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);

Upvotes: 0

vineet
vineet

Reputation: 14256

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.

Upvotes: 1

NewZeroRiot
NewZeroRiot

Reputation: 552

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/ :)

Upvotes: 1

BrianRT
BrianRT

Reputation: 1972

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!

Upvotes: 0

Paul Lockwood
Paul Lockwood

Reputation: 4553

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

Upvotes: 3

Felipez
Felipez

Reputation: 468

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

Upvotes: 0

Tomek Miszczyk
Tomek Miszczyk

Reputation: 761

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"
  }
}

Upvotes: 48

Related Questions