Angular 2 QuickStart npm startが正しく機能していません
Angular 2ベータ版がリリースされたばかりだが、公式サイトのチュートリアル（ 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 [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info prestart [email protected]
6 info start [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec start script
9 verbose stack Error: [email protected] 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 [email protected]
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 [email protected] start: `concurrent "npm run tsc:w" "npm run lite" `
17 error Exit status 127
18 error Failed at the [email protected] 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 ]
TypeScript 1.7.5バージョンnode 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 concurrentlynpm install -g lite-servernpm 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"
}
}私は窓10上で同じエラーがありました。それはそれが同時にnpmパッケージに問題があるように見えます。このエラーを解決する方法は2つあります。
1。 2つの別々のコマンドで両方のコマンドを実行します。
最初のものでは、npm run tscを実行します。
- 2番目のnpmでliteを実行します。
2。 package.jsonを変更します
-just起動オプションをこれに変更します。
"start": "tsc && npm run tsc:w | npm run lite",
これらのさまざまな解決策をすべて試して何時間も経った後、私は今日この問題を解決しました。
クイックスタートディレクトリでcmdのインスタンスを2つ開きます。
画面＃1：
npm run build:watch
それで….
ウィンドウ＃2：
npm run serve
その後ブラウザで開き、期待通りに動作します。
Angular2-quick-startフォルダ（node_modulesを含む）をコピーしてangular2-tour-of-heroesフォルダを作成した後も、同様の問題がありました。オリジナルはうまくコンパイルされていましたが、コピーはされていなかったのでこれは奇妙でした...
npm run tsc
私はnode_modulesフォルダを削除してnpm installを再実行することで問題を解決することができました。
これは私にとって驚きだったので、2つのフォルダ間の差分をとりました...
diff -rw angular2-quickstart/node_modules/ angular2-tour-of-heroes/node_modules/
たくさんの違いがありました、たくさんの 'where' diffがこのような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\" "
本当に助かりました。
この答えはジムクーパーによる優れたPluralsightコース「Angular 2 Fundamentals」に関連しています。
私と同じように、Windows 10マシンでnpm startコマンドを実行するのに問題がある場合は、次のことをお勧めします。
管理者としてgit bashを起動します（ビデオの手順に従います）。プロジェクトディレクトリ（ ng2-basis ）に移動し、次のコマンドを入力します。
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文字列の末尾から$が削除されていることに注意してください（ソリューションを github に投稿したこの修正の最初の作者alfian777の功績によるものです）。
ファイルを保存してgit bashコンソールに移動し、npm startと入力します。
これでエラーは表示されず、localhostページがデフォルトのブラウザで起動します（または、ブラウザを開いて http：// localhost：8808 / に移動します）。
これらの答えのどれも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
どうやらそれは利用可能なファイルウォッチの数を増やします。
私はこれと同じ問題に遭遇しました。しかし、上記の答えのどれも私にとって適切な解決策ではありませんでした。それは私の開発環境よりも物事のバージョンのいずれかによるものであることが判明しました。
私はVisual Studio Codeを使ったので、TypeScriptをウォッチャーとしてコンパイルするためにVSCでビルドタスクを設定しました。これが問題でした。 VSCはすでにTSC用のNPMタスクを開始していたため、チュートリアルの 'start'スクリプトを実行すると、VSCがまだTSC -wを実行しているという問題がありました。
私はVSCでタスクを止めて 'start'スクリプトを再実行しました、そしてそれはちょうどうまくいきました。
解決策A：停止してnpm開始
- VSCコマンド>タスク：実行中のタスクを終了
- ターミナル$ npm開始
その後、すべてを連携させるために、起動スクリプトを変更してサーバーを起動し、実際にはTSCを起動しないようにします。
解決策B：npm起動スクリプトを変更する
交換する
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "と
"start": "npm run lite"
解決策C：liteサーバーコマンドを実行するだけです
`npm run lite`
私は以下のリンクをたどることによってクイックスタートプログラムで私の問題を解決しました。
Angular 2 QuickStart Live-serverエラー
Package.jsonスクリプト設定を変更する
"start"： "tsc &&同時に\" npmを実行tsc：w\"\" npmをliteで実行 ""、
に
"start"： "同時に\" npmを実行tsc：w\"\" npmをliteを実行\ ""、
この答えは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と同時に\" tsc -w\"\" lite-server\""
あるいは、user60108の答えは、彼がアンパサンドを使用していないために機能します。
"start"： "同時に\" npm実行tsc：w\"\" npm実行lite\""
おそらくあなたのNPMのバージョンは古いのでしょう。私は最近これを開発中のマシンで試していました。
npm -v
もしそれが現在の安定版よりも小さいもので、Node.jsのインストールをここから更新することができます https://nodejs.org/ja/ :)
これでうまくいきました、ブートストラップファイルの先頭に/// <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);
注： - 正しい参照パスを記載していることを確認してください。
- DevDependenciesではTypeScriptは1.7.3ですが、一般的なものは1.7.5で修正されています。
- Jsファイルを
index.htmlの正しい順序でインポートします。詳細については、このリポジトリを参照する 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>
問題なくステップを再現できます。
してみてください：
（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
Angular.jsonのstartを"start": "ng serve --Host 0.0.0.0"または"start": "lite-server"に変更して実行します。Angular/cliが正しくインストールされているかどうかも確認します。
Ubuntu 16.xユーザーのために、最新のバージョン5.xをインストールすることはubuntuの私の問題を解決します
curl -sL https://deb.nodesource.com/setup_5.x | Sudo -E bash -
Sudo apt-get install -y nodejs
これを試して：
- 最新バージョンをインストールするnpm/nodejs npmインストールをパージした
- その後、tsd
npm install -g tsdをインストールしてください。 - それからクローン https://github.com/johnpapa/angular2-tour-of-heroes.git
- 最後に
npm iとnpm start
私は同じ問題を抱えていた、私達は両方ともここにコンポーネントの 's'を含めるのを忘れていた：
import {AppComponent} from './app.component'
する必要があります：
boot.js：
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.components'
bootstrap(AppComponent);
私は同じエラーに会いました。そして、たくさんの検索の結果、私はついにこれを見つけました。 Angular 2アプリケーションのインストールと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" },
それが誰かが同じエラーを受け取るのを助けることを願っています。
シモンズ：私のエラーは私のnpmのバージョンが3.7.3とノードのバージョンが5.9.1であるTomaszと同じではありません。
私は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コマンドにパスを追加する必要はありませんでした。指定されたフルパスのみが同時に必要とされるようです。
私は "npm start"までのステップを経たクイックスタートチュートリアルです。それから私はこのエラーを得ました。それからAngular-quickstartの下のnode_modulesフォルダを削除し、再度npm installを実行しました。今それは働きます。
パッケージをグローバルにインストールすることがその方法の1つですが、これは、それらが使用されているすべてのプロジェクトで同じバージョンを使用することを制限します。
代わりに、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"
}
}
私はnpmがデフォルトでそのディレクトリにあるそれぞれの "script"コマンドの前に./node_modules/.binを供給することになっていると思います、それがオリジナルのpackage.jsonがそれをしたように見えた理由です。その機能がnpmの各リリースに含まれているのか、それともあなたが指定すべき設定があるのか私にはわからない。調べる価値があるでしょう。
プロキシを使用している場合、このエラーが発生する可能性があります。
npm config set proxy http：// username：pass @ proxy：port
npm設定https-proxy http：// username：pass @ proxy：port
アプリケーションフォルダに.typingsrcという名前のファイルを作成します。
proxy =（ステップ1の値）https-proxy =（ステップ1の値）
- npm cache cleanを実行します
- npm installを実行します。
- npm typings installを実行する
- npm startを実行します。
それはうまくいくでしょう
既存のすべてのノードパッケージをアンインストールします。 nodeとnpmを更新します。ドキュメントでは少なくともnode v5.x.xとnpm 3.x.xとして示されているので、そうしないとエラーが発生します。
npm cleanをしてください。その後、npm install、npm startを実行します。
これで問題は解決しました。
どうやら angular2-quickstart が起動しない可能性がある方法は複数あります。私は同じ問題をWindows 7上のノード6.6.0/npm 3.10.3のフレッシュインストールの下で Angular2バージョン2.0.0 を実行していましたnpm startを実行すると、大量のTypeScriptエラーが発生しました。
c:\git\angular2-quickstart>npm start
> [email protected] 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で「タイピング」が正しくインストールされていない で説明されています。そのチケットは次のように修正されます。
$ ./node_modules/.bin/typings install
それは私のために働きました。 （私はまだこれを行うための「正しい」方法がわからない。）
名前が正しいことを確認して、boot.jsのcomponentをcomponentsに変更してください。 
Package.jsonファイルで、"prestart": "npm run build"を含む行を削除しました。これはブロッキングコマンドのように見え、（npm）起動の前に行われるため、他の起動コマンドは実行できません。
https://github.com/npm/npm/issues/14075 アドレスにアクセスしてください。そしてjuaniliskaの答えを試してみてください。たぶんあなたを助けます。
npm configがレジストリを取得する
npmキャッシュクリーン
npmインストール
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"
}
これが変わった後、それは私のために働きます。