node.js Angular2 QuickStart npm start 无法正常工作

Question

提问by Tomasz Ciunel

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 startcommand I get output like this:

我知道 Angular2 beta 刚刚发布，但我无法从他们的官方网站教程 ( https://angular.io/guide/quickstart) 中重现这些步骤。也许有人遇到过类似的问题并且知道该怎么做才能解决这个问题？当我尝试使用npm start命令启动应用程序时，我得到如下输出：

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

我有：打字稿 1.7.5 版节点 0.12.2 版

Maybe someone could help solve the problem :) ?

也许有人可以帮助解决问题:)？

package.json:

包.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：

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

启动.js：

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

bootstrap(AppComponent);

Answer 1

回答by user60108

Change the startfield in package.json from

将startpackage.json 中的字段从

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

to

到

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

Answer 2

回答by Derek Lawless

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

为了让npm start我跑起来，我必须确保我已经全局安装了一些 devDependencies。你有没有尝试过：

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

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

Answer 3

回答by Tomek Miszczyk

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

首先你需要更新 npm、lite-server 和 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:

从 Angular 项目目录中删除 node_modules 文件夹（如果存在）。下一次运行：

npm install

After that resolve ENOSPC errors:

之后解决 ENOSPC 错误：

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:

这是我的 package.json 文件：

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

Answer 4

回答by dontHaveName

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:

我在 Windows 10 上遇到了同样的错误。看起来它是并发 npm 包的问题。我找到了 2 个选项来解决这个错误：

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

1. 在 2 个单独的 cmds 中运行这两个命令：
- 在第一次运行中： npm run tsc:w
- 在第二个： npm run lite
2. 改变 package.json
- 只需将启动选项更改为： "start": "tsc && npm run tsc:w | npm run lite",

Answer 5

回答by DeclanPossnett

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:

在您的快速入门目录中打开 2 个 cmd 实例：

window #1:

窗口#1：

npm run build:watch

then...

然后...

window #2:

窗口#2：

npm run serve

It will then open in the browser and work as expected

然后它将在浏览器中打开并按预期工作

Answer 6

回答by Michael Dausmann

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

在复制 angular2-quickstart 文件夹（包括 node_modules）以创建 angular2-tour-of-heroes 文件夹后，我遇到了类似的问题。这很奇怪，因为原件编译得很好，但副本不是......

npm run tsc

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

我能够通过删除 node_modules 文件夹并重新运行 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:-

有很多差异，package.json 文件中有很多“where”差异，如下所示：-

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.

哦，好吧，希望这会有所帮助。

Answer 7

回答by Joseph

Change the start field in package.json from:

将 package.json 中的 start 字段更改为：

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

To:

到：

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

It really helped.

它真的很有帮助。

Answer 8

回答by Tahir Khalid

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

这个答案与 Jim Cooper 出色的 Pluralsight 课程“Angular 2 Fundamentals”有关。

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

如果像我一样在 Windows 10 机器上开始运行命令 npm start 时遇到问题，那么我建议如下：

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

以管理员身份启动 git bash（按照视频中的步骤）导航到项目目录 ( ng2-fundamentals)，然后键入以下命令：

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:

安装完成后，您需要修改位于 node_modules 文件夹内 spawn-default-shell 模块中的 get-shell.js 文件，如下所示：

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)

请注意从 sh 字符串末尾删除的 $ （归功于此修复程序的原始作者 alfian777，他在github上发布了解决方案）

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

保存文件，然后转到您的 git bash 控制台并键入 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/).

您现在应该不会看到任何错误，本地主机页面将在您的默认浏览器中启动（或者打开您的浏览器并导航到http://localhost:8808/）。

Answer 9

回答by Saliya Wicky

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

我通过以下链接解决了 Quick Start 程序的问题。

Angular 2 QuickStart Live-server error

Angular 2 QuickStart Live-server 错误

Change the Package.jsonScripts Settings

更改Package.json脚本设置

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

to:

到：

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

Answer 10

回答by Paul Lockwood

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

这些答案都没有帮助Ubuntu。最后，我遇到了 John Papa（lite-server 的作者）的解决方案。

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

在 Ubuntu 15.10 上，Angular 2 快速入门在终端运行后立即生效：

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

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

Apparently it increases the number of available File Watches.

显然，它增加了可用文件监视的数量。

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

答案来源：https: //github.com/johnpapa/lite-server/issues/9

node.js Angular2 QuickStart npm start 无法正常工作

提问by Tomasz Ciunel

回答by user60108

回答by Derek Lawless

回答by Tomek Miszczyk

回答by dontHaveName

回答by DeclanPossnett

回答by Michael Dausmann

回答by Joseph

回答by Tahir Khalid

回答by Saliya Wicky

回答by Paul Lockwood

相关推荐

最近更新

标签

node.js Angular2 QuickStart npm start 无法正常工作

提问by Tomasz Ciunel

回答by user60108

回答by Derek Lawless

回答by Tomek Miszczyk

回答by dontHaveName

回答by DeclanPossnett

回答by Michael Dausmann

回答by Joseph

回答by Tahir Khalid

回答by Saliya Wicky

回答by Paul Lockwood

相关推荐

node.js 使用 Gitlab CI 将每个构建部署到服务器

node.js 在 npm 包全局安装上获取“npm ERR！code EPEERINVALID”

node.js NVM 全局模块文件夹

node.js Windows 上的全局 npm 安装位置？

相关推荐

最近更新

标签