Angular2 QuickStart NPM启动无法正常工作


105

档案结构

我知道Angular2测试版刚刚发布,但我无法从其官方网站教程(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 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 ]

我有:打字稿1.7.5版本节点0.12.2版本

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

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

您可以用文件编辑帖子吗?
罗曼2015年

您的文件夹结构是什么?index.html在app/它的内部还是外部?
the_critic 2015年

首先,你的文件boot.js必须是打字稿文件重命名它作为boot.ts。我没有看到其他似乎有问题的地方……正如the_critic所说,您能否给我们您的项目结构。
罗曼

它是boot.ts。我在stackoverflow上错误地输入了“ js”,抱歉。索引html位于根目录,例如package.json。它不在app /目录中。
Tomasz Ciunel 2015年

2
确保您的节点版本为>=4.2.1 <5,npm版本为DEVELOPER guide中>=2.14.7 <3.0指定的版本。我认为您可以使其与节点5一起使用,但我不知道如何操作。
埃里克·马丁内斯

Answers:


224

从以下位置更改startpackage.json中的字段

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

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

2
为什么他要运行两次tsc(tsctsc -w)?
smartmouse

9
有效!但为什么?开始对ng2感到灰心。
Maxim

9
在Pluralsight Ward Bell的“逐个播放角度2快速入门”课程中对此进行了解释。“ tsc”首先编译代码,因为如果没有这样的代码,则在更大的项目中,服务器可能在编译结束之前启动。在这种情况下,服务器将抛出错误,表明它不知道该怎么办。
Starceaker

1
在2017年,答案中的解决方法暴露了真正的问题,即应用代码中的打字稿中存在编译错误。当我修复了编译错误后,原始版本可以正常运行,而无需您采取任何解决方法。
CodeMed

1
很棒...“开始”:“同时\“ npm run tsc:w \” \“ npm run lite \”“对我
有用

86

为了帮助npm start我运行,我必须确保已全局安装了一些devDependencies。你有没有尝试过:

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

但我认为这lite-server是可选的,您也可以使用其他服务
Pardeep Jain

11
为我工作。sudo npm update -g && sudo npm install -g concurrently lite-server typescript
Sam Finnigan

6
不要忘记卸载本地版本:npm uninstall lite-server
Aurelien

1
在使用Udemy课程中的angular2-seed启动Web服务器时,我遇到了同样的问题。这解决了我的问题。
dance2die

是! 在Vagrant上对我来说,全局安装lite-server和卸载本地软件包终于成功了!非常感谢!
Yahya Uddin

48

首先,您需要更新npm,lite-server和打字稿:

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

从Angular项目目录中删除node_modules文件夹(如果存在)。下一轮:

npm install

之后,解决ENOSPC错误:

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

最后:

npm start

这是我的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"
  }
}


3
我投票赞成,因为这解决了我的问题。但是我很想了解如何将fs.inotify.max_user_watches添加到/ etc / sysctl来修复它。
约书亚·威尔逊

观察者似乎需要更多的内存,而这提供了这一点。
约书亚·威尔逊

我发现,当我首先删除模块时,它似乎工作得更好- rm -r node_modules/。无论如何,就像那个男人所说的,这让我走了。我很惊讶,fs.inotify.max_user_watches=524288但这对我来说似乎太过分了。风向有没有改善

值得补充的是,JavaScript快速入门可以立即使用。没有巨大的额外费用。并且当服务器停止网页时stays on screen。打字稿版本随着404

这救了我,谢谢。回声fs.inotify.max_user_watches = 524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
chintan adatiya

15

我在Windows 10上遇到了相同的错误。它看起来与并发npm软件包有关。我找到了2种解决此错误的方法:

  • 1.在2个单独的cmds中运行两个命令:

    • 在第一个运行中: npm run tsc:w
    • 在第二个中: npm run lite
  • 2.变更 package.json

    • 只需将开始选项更改为此: "start": "tsc && npm run tsc:w | npm run lite",

2
只是要注意。在Linux上:"start": "tsc && npm run tsc:w & npm run lite",
ACV

好吧,它对我来说是自动重新编译的。
dontHaveName

我指的是我的第一条评论:)在linux上不起作用
ACV 2016年

仅此解决方案对我有用。首先尝试(在2个单独的cmds中运行两个命令)。然后停止两个cmds中的进程。最后应用第二个(更改package.json),然后在一个cmd中单独运行“ npm start”。如果我更改一个文件,则localhost:3000会自动刷新并显示我的更改。非常感谢!
Andrew F.

13

经过数小时尝试所有这些不同解决方案的今天,这就是我今天解决问题的方式-(对于仍在寻找其他方式的任何人)。

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

窗口1:

npm run build:watch

然后...

窗口2:

npm run serve

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


9

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

npm run tsc

我可以通过删除node_modules文件夹并重新运行npm install来解决此问题。

这让我感到惊讶,因此我在两个文件夹之间进行了区别...

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

有很多差异,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"

...这是有道理的,但也有这样的事情:-

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)

...我一点都不明白。

哦,希望对您有所帮助。


5

将package.json中的起始字段更改为:

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

至:

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

真的有帮助。


5

该答案与Jim Cooper出色的Pluralsight课程“ Angular 2基础知识”有关。

如果像我一样,您在Windows 10计算机上开始运行命令npm start时遇到麻烦,那么我建议以下内容:

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

npm config get registry

npm cache clean

npm install

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

更改以下内容:

const DETECT_SH_REGEX = /sh$/;

对此:

const DETECT_SH_REGEX = /sh/;

注意从sh字符串的末尾删除的$(此修复程序alfian777的原始作者的版权归他所有,该解决方案发布在github上

保存文件,然后转到git bash控制台并键入npm start

您现在应该不会看到任何错误,并且localhost页面将在默认浏览器中启动(或者打开浏览器并导航至http:// localhost:8808 /)。


3

这些答案都没有对Ubuntu有所帮助。最后,我遇到了John Papa(轻服务器的作者)提出的解决方案。

在Ubuntu 15.10上,在终端上运行Angular 2快速入门后,它立即生效:

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

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

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


3

我遇到了同样的问题。但是,以上答案均不是我的正确解决方案。事实证明,这主要归功于我的开发环境,而不是任何事物的版本。

由于使用了Visual Studio Code,因此我在VSC中设置了构建任务,以将TypeScript编译为观察程序。这就是问题所在。VSC已经为TSC启动了NPM任务,因此在执行教程的“开始”脚本时,VSC仍在运行存在问题tsc -w

我在VSC中停止了该任务,然后重新运行了“开始”脚本,它运行良好。

解决方案A:停止并启动npm

  • VSC命令>任务:终止正在运行的任务
  • 终端$ npm start

之后,为了使所有内容协同工作,我将启动脚本更改为仅启动服务器,而不实际启动TSC。

解决方案B:更改npm启动脚本

  • 更换

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

  • "start": "npm run lite"

解决方案C:只需运行lite服务器命令

`npm run lite`


2

该答案仅适用于Windows 10用户,您将在下面看到,我怀疑问题仅针对这些用户:

要了解发生了什么,您可以在PowerShell上运行该命令,它将告诉您实际的问题是什么:

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

基本上,该消息说明令牌“ &&”在Windows 10上仍然无效。对于那些想知道的问题,同一命令用&代替&&告诉我们,&运算符保留供将来使用:

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

结论

  • 如果要从Powershell手动启动此命令,则可以改用以下命令:

    tsc“&”同时出现“ tsc -w”“ lite-server”

  • 如果要使用npm start启动应用程序,则将package.json中的开始行替换为:

    “ start”:“ tsc并发\” tsc -w \“ \” lite-server \“”

  • 或者,用户60108的答案也可以使用,因为他没有使用与号:

    “ start”:“同时\” npm run tsc:w \“ \” npm run lite \“”


1

您的NPM版本很旧,我最近在工作的开发人员机器上输入了以下内容:

npm -v

如果它比当前的稳定版本要低,您可以从这里https://nodejs.org/en/来更新Node.js安装:)


1

这对我有用,放在/// <reference path="../node_modules/angular2/typings/browser.d.ts" />引导文件的顶部。

例如:-

boot.ts中

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

bootstrap(AppComponent);

注意:-确保已提及正确的参考路径


1
  1. 在devDependencies中,打字稿是1.7.3,但您有1.7.5常见的修复程序。
  2. 在中以正确的顺序导入js文件index.html。有关更多信息,请参考此存储库https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html 或在此处参考我的存储库

    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> 

感谢您的重播,但无法解决我的问题:)
Tomasz Ciunel 2015年

就像@Eric所说的,检查您的节点版本应该在4 * 5之间,而npm版本应该在2 * 3之间。或发布您的项目结构,这将帮助我找出问题所在。
Pardeep Jain

谢谢!这对我有用。:此链接特别github.com/pkozlowski-opensource/ng2-play/blob/master/...
白兰度

不客气:)此链接对于在angular2 beta0.0中启动非常有用。
Pardeep Jain 2015年

0

我可以毫无问题地重现步骤。

请尝试:

(1)从index.html中删除这一行

<script src="node_modules/es6-shim/es6-shim.js"></script>

(2)修改文件:app.components.ts,在模板字段的行尾删除“,”

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

这是我的环境:

$ node -v
v5.2.0

$ npm -v
3.3.12

$ tsc -v
message TS6029: Version 1.7.5

请为我的工作参考此仓库:https : //github.com/AlanJui/ng2-quick-start


如果我们,在模板末尾使用我不会产生任何问题。以及如何在没有项目的情况下运行项目es6-shim
Pardeep Jain


0

全局安装软件包是这样做的一种方法,但这限制了您在使用软件包的所有项目中使用相同的版本。

相反,您可以在npm脚本前面加上./node_modules/.bin。在您的情况下,package.json将如下所示:

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

我认为./node_modules/.bin默认情况下,npm应该在该目录中的每个“脚本”命令之前提供,这就是为什么原始命令package.json看起来像以前那样。我不确定npm的每个发行版中是否都包含该功能,或者您是否应该指定一些配置设置。值得研究!


0

我遇到了同样的问题,我们都忘了在组件上包括“ s”:

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

应该:

boot.js:

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

bootstrap(AppComponent);

这是不正确的,在此示例之后,app.component上不应有“ s”
Brad Woods

0

我在OS X上遇到了相同的错误(节点上安装了自制软件的v6.2.0和npm v3.9.3),上述任何方法都无法解决。我必须为并发运行的命令添加完整路径。

在package.json中,我对此进行了更改:

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

对此:

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

当然,您将需要根据节点全局二进制文件的存储位置来更新正确的路径。请注意,我不需要将路径添加到第一个tsc命令。似乎仅同时需要指定的完整路径。


0

我遇到了同样的错误。经过大量搜索,我终于找到了这个:Angular2应用程序通过package.json安装和运行。然后我试图更换

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

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

希望它能帮助谁得到相同的错误。

PS:我的错误与Tomasz不同,这是我的npm版本是3.7.3,节点版本是5.9.1。



0

对于Ubuntu 16.x用户,安装最新版本5.x解决了我在ubuntu中的问题

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

0

似乎有多种方法可以使angular2-quickstart无法启动。我有运行相同的问题Angular2版本2.0.0全新安装下节点6.6.0 / NPM在Windows 7 3.10.3在我的情况下运行的npm start甩一吨的打字稿的错误:

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

角度快速入门问题#63中讨论了此问题,“类型”未正确安装。那张票给解决方法

$ ./node_modules/.bin/typings install

对我有用。(我不确定执行此操作的“正确”方法。)


0

请确保名称是正确的,从而改变componentboot.jscomponents在此处输入图片说明



0

在package.json文件中,我删除了具有的行"prestart": "npm run build"。这似乎是一个阻塞命令,发生在(npm)启动之前,从而阻止了其他启动命令。


0

将angular.json中的start更改为"start": "ng serve --host 0.0.0.0""start": "lite-server"并运行。还要检查是否已正确安装angular / cli。


0

在快速入门教程中,我逐步完成了直到npm start。然后我得到了这个错误。然后我删除了node_modules下面的文件夹,angular-quickstart然后npm install再次运行。现在可以了。


0

如果您使用代理,则可能导致此错误:

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

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

  3. .typingsrc在您的应用程序文件夹中创建一个包含以下内容的文件:

    • proxy =(第1步的值)
    • https-proxy =(步骤1的值)
  4. npm cache clean

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

然后它将工作


不,仍然得到:错误TS5023:未知的编译器选项'moduleResolution'。
ChristofKälin'16
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.