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);
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
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
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:This issue is discussed in angular quickstart issue #63, "typings" not being installed correctly. That ticket gives the fix as
which worked for me. (I'm not sure of the "right" way to do this yet.)
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 solved my issue with the Quick Start program by following below link.
Angular 2 QuickStart Live-server error
Change the
Package.json
Scripts Settingsto:
Change the start field in package.json from:
To:
It really helped.
It's most likely that your NPM version is old, i recently had this on a developer machine at work, type:
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/ :)