Angular2 QuickStart npm start无法正常工作

文件结构

我知道Angular2testing版刚刚发布，但我不能从他们的官方网站教程（ 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);

将package.json中的start字段从 

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

至 

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

为了让npm start为我运行，我必须确保我在全球安装了一些devDependencies。 你有没有尝试过：

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

首先你需要更新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" } }

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

以下是我在尝试所有这些不同的解决scheme几个小时之后如何解决问题 – （对于任何寻找另一种方式的人）。

在快速启动目录中打开2个cmd实例：

窗口＃1： 

 npm run build:watch

然后…

窗口＃2： 

 npm run serve

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

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

 npm run tsc

我能够通过删除node_modules文件夹并重新运行npm install来解决该问题。

这是我的一个惊喜，所以我做了两个文件夹之间的差异… 

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

有很多差异，很多'where'差异在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)

…我根本不懂。

哦，希望这有助于。

将package.json中的开始字段从以下位置更改： 

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

至： 

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

这确实有帮助。

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

在Ubuntu 15.10上，在terminal上运行Angular 2 Quick Start后，

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

显然它增加了可用File Watches的数量。

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

我遇到了同样的问题。 但是，以上的答案都不是适合我的解决办法。 事实certificate，这是因为我的开发环境，然后是任何版本的东西。

由于我使用了Visual Studio Code，因此我在VSC中设置了一个构build任务，将TypeScript作为一个观察器进行编译。 这是问题。 VSC已经为TSC启动了NPM任务，因此在执行教程的“开始”脚本时，VSC仍在运行TSC -w这一事实存在问题。

我停止了在VSC中的任务，并重新启动“脚本”，它工作得很好。

解决schemeA：停止和npm开始

  • VSC命令>任务：终止正在运行的任务
  • terminal$ npm开始

之后，把所有的东西一起工作，我把启动脚本改为启动服务器，而不是真的启动TSC。

解决schemeB：更改npm启动脚本

  • 更换

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

  • 同

    "start": "npm run lite"

解决schemeC：只需运行lite服务器命令 

 `npm run lite`

我通过以下链接解决了我的问题与快速启动程序。

Angular 2快速入门Live-server错误

更改Package.json脚本设置

“start”：“tsc && concurrently”npm run tsc：w \“\”npm run lite \“，

至

“start”：“同时”npm run tsc：w \“\”npm run lite \“”，

这个答案与吉姆·库珀（Jim Cooper）出色的Pluralsight课程“Angular 2 Fundamentals”有关。

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

以pipe理员身份启动git bash（按照video中的步骤）导航到项目目录（ 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/;

请注意，从shstring的末尾删除了$（将此解决scheme的原始作者信任给alfian777，他们在github上发布了解决scheme）

保存文件，然后进入你的git bash控制台并inputnpm start

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

最有可能的是你的NPM版本是旧的，我最近有一个在开发机器上工作，键入： 

 npm -v

如果它小于当前的稳定版本，你可以从这里更新你的Node.js安装https://nodejs.org/en/ 🙂

这工作，把/// <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);

注意： – 确保你提到了正确的参考path 。

  1. 在devDependencies打字是1.7.3，但你有1.7.5修复常见的一个。
  2. 在index.html中按照正确的顺序导入你的js文件。 欲了解更多信息，请参阅此资源库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>

这个答案仅适用于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行代替：

    “start”：“tsc＆concurrently”tsc -w“\”lite-server \“”

  • 或者，user60108的答案也适用，因为他没有使用＆符号：

    “开始”：“同时”npm run tsc：w \“\”npm run lite \“”

我可以重现步骤没有任何问题。

请尝试：

（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

尝试这个：

  1. 安装最新版本npm / nodejs我清除了我的npm安装
  2. 之后，安装tsd npm install -g tsd
  3. 然后克隆https://github.com/johnpapa/angular2-tour-of-heroes.git
  4. 最后npm i和npm start

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

相反，你可以用./node_modules/.bin你的npm脚本的前缀。 在你的情况下， 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" } }

我认为npm应该在默认情况下在该目录下的每个“脚本”命令前提供./node_modules/.bin ，这就是为什么原始的package.json看起来是这样的。 我不确定这个function是否在npm的每一个版本中，或者是否有一些你应该指定的configuration设置。 这是值得一看！

我有同样的问题，我们都忘了在这里包含组件's'： 

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

应该：

boot.js： 

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

我在OS X（节点v6.2.0和npm v3.9.3安装自制软件）上有同样的错误，并没有解决上述任何问题。 我不得不同时添加正在运行的命令的完整path。

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

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

卸载所有现有的节点包。 更新节点和npm。至less在节点v5.xx和npm 3.xx文档中给出，否则会导致错误。

做npm clean 。 然后执行npm install ， npm start 。

这为我解决了这个问题。

如果您使用代理，可能会导致此错误：

  1. npm config set代理http：//用户名：pass @ proxy：port

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

  3. 在包含的应用程序文件夹中创build一个名为.typingsrc的文件

代理=（步骤1上的值）https-proxy =（步骤1上的值）

  1. 运行npmcaching清理
  2. 运行npm install
  3. 运行npm typings安装
  4. 运行npm start

它会工作

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

这个改变后，它对我有用。

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

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

看起来angular2-quickstart可能有多种方法无法启动。 我在运行Angular2版本2.0.0的同一个问题下，在Windows 7上的6.6.0 / npm 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'. (...)

这个问题在angular度快速入门问题＃63中讨论，“typings”没有正确安装 。 那张票给修理作为 

 $ ./node_modules/.bin/typings install

哪些为我工作。 （我还不确定“正确”的方式来做到这一点。）

我快速入门教程，我经历了直到“npm开始”的步骤。 然后我得到这个错误。 然后我删除了angular-quickstart下的node_modules文件夹，然后再次运行npm install。 现在起作用了。

请确保名称正确，从而将boot.js中的components更改为components 。 在这里输入图像描述

转到https://github.com/npm/npm/issues/14075地址。; 并尝试juaniliska的答案。 也许帮助你。

npmconfiguration获取registry

npmcaching清理

npm安装

在我的情况下，我只需要添加一个虚拟的.ts文件。所以我创build了一个没有内容的test.ts文件，并运行npm start来解决问题。

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

Interesting Posts

如何在Angular2上使用onBlur事件？

Angular2代码中的TypeScript错误：无法find名称'模块'

angular-cli其中是webpack.config.js文件 – 新的2017年2月：ngpopup

如何将自举添加到angular度项目

如何捆绑一个angular度的应用程序的生产

Android – 仅在顶部绘制圆angular

Angular 2/4在服务和组件中使用pipe道

Angular：带有* ngClass的条件类

如何计算一条线和横轴之间的angular度？

本身recursion地使用组件来创build一棵树