Angular2 QuickStart npm start is not working corre

2020-01-23 15:05发布

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

30条回答
来,给爷笑一个
2楼-- · 2020-01-23 15:50

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`
查看更多
地球回转人心会变
3楼-- · 2020-01-23 15:50

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

查看更多
▲ chillily
4楼-- · 2020-01-23 15:51

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
查看更多
小情绪 Triste *
5楼-- · 2020-01-23 15:51

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\" ",
查看更多
\"骚年 ilove
6楼-- · 2020-01-23 15:52

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.

查看更多
我想做一个坏孩纸
7楼-- · 2020-01-23 15:53

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

查看更多
登录 后发表回答