Angular2 QuickStart npm start无法正常工作

uet 发布于 2019-08-06 angular 最后更新 2019-08-06 13:49 369 浏览

File structure 我知道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);
已邀请:

ysequi

赞同来自:

尝试这个:

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

nsit

赞同来自:

我通过以下链接解决了Quick Start程序的问题。 Angular 2 QuickStart Live-server error 更改Package.json脚本设置 “开始”:“tsc&&并行”npm运行tsc:w \“\”npm run lite \“, 至 “start”:“并发”npm run tsc:w \“\”npm run lite \“”,

gminus

赞同来自:

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

"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" "
至:
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" "
它确实有帮助。

mut

赞同来自:

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

  1. npm config set proxy http://username:pass@proxy:port
  2. npm config set https-proxy http://username:pass@proxy:port
  3. 在您的应用程序文件夹中创建一个包含
  4. 的文件命名.typingsrc
proxy =(第1步的值) https-proxy =(第1步的值)
  1. 运行npm cache clean
  2. 运行npm install
  3. 运行npm typings install
  4. run npm start
它会工作的

quo_et

赞同来自:

看起来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
这对我有用。 (我不确定这样做的“正确”方法。)

frerum

赞同来自:

卸载所有现有节点包。 更新节点和npm。因为它在文档中至少作为node v5.x.x和npm 3.x.x,否则会导致错误。 做npm clean。 然后执行npm installnpm start。 这解决了我的问题。

inemo

赞同来自:

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

jneque

赞同来自:

复制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)
......我根本不明白。 哦,希望这会有所帮助。

svelit

赞同来自:

以下是我在尝试所有这些不同的解决方案后解决问题的方法 - (对于任何寻找另一种方式的人来说)。 在快速入门目录中打开2个cmd实例: 窗口#1:

npm run build:watch
然后... 窗口#2:
npm run serve
然后它将在浏览器中打开并按预期工作

tin

赞同来自:

我在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命令的路径。它似乎只需要同时需要指定的完整路径。

uqui

赞同来自:

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

npm config get registry npm cache clean npm install

cvelit

赞同来自:

请确保名称正确,从而将boot.js中的component更改为componentsenter image description here

caut

赞同来自:

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

malias

赞同来自:

这对我有用,把/// <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);
注意: - 确保您提到了正确的参考路径。

bmagni

赞同来自:

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

nin

赞同来自:

我遇到了同样的问题。但是,上述答案都不适合我。事实证明,这更多是由于我的开发环境,然后是任何版本的东西。 由于我使用了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`

pnon

赞同来自:

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

mex

赞同来自:

只是: npm install -g lite-server 然后重新启动npm start

jautem

赞同来自:

全局安装软件包是一种方法,但这限制了您在使用它们的所有项目中使用相同的版本。 相反,您可以使用./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看起来像它的方式。我不确定该功能是否在每个npm版本中,或者是否有一些配置设置你应该指定。值得研究一下!

qenim

赞同来自:

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

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

hquas

赞同来自:

你的NPM版本很可能是旧的,我最近在工作的开发者机器上有这个版本,输入:

npm -v
如果它比当前的稳定版本少,你可以从这里更新你的Node.js安装https://nodejs.org/en/ :)

nerror

赞同来自:

我可以毫无问题地重现步骤。 请尝试: (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

ysit

赞同来自:

这些答案都没有帮助Ubuntu。最后,我遇到了John Papa(lite-server的作者)的解决方案。 在Ubuntu 15.10上,Angular 2 Quick Start在终端上运行之后栩栩如生:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
显然它增加了可用文件监视的数量。 答案来源:https://github.com/johnpapa/lite-server/issues/9

xatque

赞同来自:

我快速入门教程我经历了直到“npm start”的步骤。然后我得到了这个错误。然后我删除了angular-quickstart下的node_modules文件夹并再次运行npm install。现在它有效。

snihil

赞同来自:

这个答案与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/)。

reum

赞同来自:

在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"
  }
在此更改后,它适用于我。

uculpa

赞同来自:

  1. 在devDependencies中,typescript是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> 

rtotam

赞同来自:

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

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

asaepe

赞同来自:

从中更改package.json中的start字段

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

hculpa

赞同来自:

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

import  {AppComponent} from './app.component'
应该: boot.js:
import {bootstrap} from 'angular2/platform/browser'
import  {AppComponent} from './app.components'
bootstrap(AppComponent);

yet

赞同来自:

我遇到了同样的错误。经过大量搜索,我终于找到了这个: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。

zomnis

赞同来自:

这个答案仅适用于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中尚未生效。对于那些想知道,同样的命令替换&& with&,告诉我们&符号运算符保留供将来使用:
 (&) 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 "&" concurrently "tsc -w" "lite-server"
  • 如果要使用npm start启动应用程序,请将package.json中的起始行替换为:
    "start": "tsc & concurrently \"tsc -w\" \"lite-server\" "
  • 或者,user60108的答案也有效,因为他没有使用&符号:
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" "