Angular2 QuickStart npm start无法正常工作
我知道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 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 ]
也许有人可以帮忙解决问题:)？
的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);
32 个答案:
答案 0 :(得分：223)
从
更改package.json中的start字段
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" "
到
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" "
答案 1 :(得分：86)
为了让npm start为我跑，我必须确保全局安装了一些devDependencies。你试过了吗？
-
npm install -g concurrently -
npm install -g lite-server -
npm install -g typescript
答案 2 :(得分：48)
首先你需要更新npm，lite-server和typescript：
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 :(得分：15)
我在Windows 10上遇到了同样的错误。看起来它与npm包同时存在问题。我找到了2个选项来解决这个错误：
<强> 1。在两个单独的cmds中运行这两个命令：
- 在第一次运行npm run tsc：w
- 在第二个npm run lite
<强> 2。更改package.json
- 只需更改开始选项：
"start": "tsc && npm run tsc:w | npm run lite",
答案 4 :(得分：13)
以下是我在尝试所有这些不同的解决方案之后如何解决问题 - （对于任何寻找其他方式的人）。
在快速启动目录中打开2个cmd实例：
窗口＃1：
npm run build:watch
...然后
窗口＃2：
npm run serve
然后它将在浏览器中打开并按预期工作
答案 5 :(得分：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/
有很多差异，很多＆＃39;其中＆＃39; package.json文件中的差异如下： -
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)
......我根本不懂。
哦，好吧，希望这有帮助。
答案 6 :(得分：5)
更改package.json中的起始字段：
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" "
要：
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" "
真的有帮助。
答案 7 :(得分：4)
这个答案与Jim Cooper出色的Pluralsight课程“Angular 2 Fundamentals”有关。
如果像我一样，您在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/）。
答案 8 :(得分：3)
这些答案都没有帮助 Ubuntu 。最后，我遇到了John Papa（lite-server的作者）的解决方案。
在Ubuntu 15.10上，Angular 2快速入门在终端上运行之后栩栩如生：
echo fs.inotify.max_user_watches = 524288 | sudo tee -a /etc/sysctl.conf ＆安培;＆安培; sudo sysctl -p
显然它增加了可用文件监视的数量。
答案 9 :(得分：3)
我遇到了同样的问题。但是，上述答案都不适合我。事实证明，这更多地取决于我的开发环境以及任何版本的事物。
由于我使用了Visual Studio Code，因此我在VSC中设置了一个构建任务，以便将TypeScript编译为观察者。这就是问题所在。 VSC已经开始为TSC开展NPM任务，因此在执行教程时开始了#C脚本，它存在VSC仍在运行TSC -w这一事实的问题。
我在VSC中停止了任务并重新启动了“开始”。脚本，它工作得很好。
解决方案A：停止和npm开始
- VSC命令＆gt;任务：终止正在运行的任务
- 终端$ npm start
之后，为了让所有内容协同工作，我将启动脚本更改为只启动服务器，而不是实际启动TSC。
解决方案B：更改npm开始脚本
-
替换
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" " -
与
"start": "npm run lite"
解决方案C：只需运行lite服务器命令
`npm run lite`
答案 10 :(得分：3)
我通过以下链接解决了快速启动计划的问题。
Angular 2 QuickStart Live-server error
更改Package.json脚本设置
“开始”：“tsc＆amp;＆amp;并行”npm运行tsc：w \“\”npm run lite \“，
到
“start”：“并发”npm运行tsc：w \“\”npm run lite \“”，
答案 11 :(得分：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
基本上，该消息解释了令牌“＆amp;＆amp;”对于那些想知道的人，同样的命令替换了＆amp;＆amp;与＆amp;通知我们＆符号运算符保留供将来使用：
(&) 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“＆amp;”同时“tsc -w”“lite-server”
-
如果要使用npm start启动应用程序，请将package.json中的起始行替换为：
“start”：“tsc＆amp; concurrently”tsc -w \“\”lite-server \“”
-
或者，user60108的答案也有效，因为他没有使用＆符号：
“start”：“并发”npm run tsc：w \“\”npm run lite \“”
答案 12 :(得分：1)
这对我有用，将/// <reference path="../node_modules/angular2/typings/browser.d.ts" />放在bootstraping文件的顶部。
例如： -
在 boot.ts
中/// <reference path="../node_modules/angular2/typings/browser.d.ts" />
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
注意： - 确保您提及了正确的参考路径。
答案 13 :(得分：1)
- 在devDependencies中，typescript是1.7.3，但你有1.7.5修复常见的。
- 在
index.html中以正确的顺序导入您的js文件。 有关更多信息，请参阅此存储库https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html 或者在这里参考我的存储库
的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>
答案 14 :(得分：0)
在package.json文件中，我删除了"prestart": "npm run build"的行。这似乎是一个阻塞命令，发生在（npm）start之前，因此阻止了其他启动命令。
答案 15 :(得分：0)
将angular.json中的start更改为"start": "ng serve --host 0.0.0.0"或"start": "lite-server"并运行。还要检查是否已正确安装angular / cli。
答案 16 :(得分：0)
转到https://github.com/npm/npm/issues/14075地址。并尝试juaniliska的回答。也许帮助你。
npm config get registry
npm cache clean
npm install
答案 17 :(得分：0)
请确保名称正确无误，从而将 boot.js 中的component更改为components。
答案 18 :(得分：0)
我快速入门教程我经历了直到第34天开始的步骤＆＃34;。然后我得到了这个错误。然后我删除了angular-quickstart下的node_modules文件夹并再次运行npm install。现在它有效。
答案 19 :(得分：0)
似乎angular2-quickstart无法启动的方式不止一种。我在Windows 7上以全新安装的节点6.6.0 / npm 3.10.3运行Angular2 version 2.0.0时遇到了同样的问题。在我的情况下，运行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'.
(...)
angular quickstart issue #63, "typings" not being installed correctly中讨论了此问题。那张票给出了修复
$ ./node_modules/.bin/typings install
对我有用。 （我不确定＆＃34;正确＆＃34;这样做的方式。）
答案 20 :(得分：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
答案 21 :(得分：0)
在tsconfig.json中添加以下部分
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
和\ node_modules \ typings \ typings.json
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim
/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
}
在此更改后，它对我有用。
答案 22 :(得分：0)
如果使用代理，可能会导致此错误：
-
npm config set proxy http://username:pass@proxy:port
-
npm config set https-proxy http://username:pass@proxy:port
-
在您的应用程序文件夹中创建一个名为.typingsrc的文件，其中包含
- 运行npm cache clean
- 运行npm install
- 运行npm typings install
- run npm start
proxy =（第1步的值） https-proxy =（第1步的值）
它会起作用
答案 23 :(得分：0)
卸载所有现有节点包。 更新节点和npm。因为它在文档中至少作为node v5.x.x和npm 3.x.x，否则会导致错误。
npm clean。
然后执行npm install，npm start。
这解决了我的问题。
答案 24 :(得分：0)
我遇到了同样的错误。经过大量搜索后，我终于找到了这个：Angular2 application install & run via 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。
答案 25 :(得分：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命令的路径。它似乎只需要同时需要指定的完整路径。
答案 26 :(得分：0)
我遇到了同样的问题，我们都忘了包含“＆＃39;在这里的组件：
import {AppComponent} from './app.component'
应该是：
boot.js：
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.components'
bootstrap(AppComponent);
答案 27 :(得分：0)
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!
答案 28 :(得分：0)
试试这个：
- 安装最新版本npm / nodejs我清除了我的npm安装
- 之后，安装tsd
npm install -g tsd - 然后克隆https://github.com/johnpapa/angular2-tour-of-heroes.git
- 最后
npm i和npm start
答案 29 :(得分：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
答案 30 :(得分：-1)
在我的情况下，我只需要添加一个虚拟.ts文件。所以我创建了一个没有内容的test.ts文件并运行npm start来解决问题。
答案 31 :(得分：-2)
只是： npm install -g lite-server
然后重新启动npm start
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？