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 inpm 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 installnpm 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)启动之前发生,从而阻止其他启动命令。