質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • Angular2

    192questions

Angular2でソースファイル変更時の自動コンパイルが動かない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,188

kodai

score 678

Angular2のチュートリアルを始めたのですが、ソースファイルを更新しても自動検知・再コンパイルしてくれません。
npm start を実行したときに以下のエラーが出ていて、おそらくファイルの更新チェック用モジュールがエラーになっていると思われるのですが、解決策がわかりません・・・。どなたか教えてください。

node_modules/の削除や再インストールはなんどか実行してみましたが変わりませんでした。
サーバ(lite-server?)は起動して、コンテンツ自体は表示されています。起動したままソースファイルを編集・保存しても反映されず、サーバを停止・再起動すると反映されます。

$ node -v
v6.4.0
$ npm -v
3.10.3
$ head package.json
{
        "name": "angular2-quickstart",
        "version": "1.0.0",
        "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"
$ npm start
> angular2-quickstart@1.0.0 start ~/src/angular2-quickstart/tour-of-heros
> tsc && concurrently "npm run tsc:w" "npm run lite"

[0]
[0] > angular2-quickstart@1.0.0 tsc:w ~/src/angular2-quickstart/tour-of-heros
[0] > tsc -w
[0]
[1]
[1] > angular2-quickstart@1.0.0 lite ~/src/angular2-quickstart/tour-of-heros
[1] > lite-server
[1]
[0] fs.js:1431
[0]     throw error;
[0]     ^
[0]
[0] Error: watch ~/src/angular2-quickstart/tour-of-heros ENOENT
[0]     at exports._errnoException (util.js:1026:11)
[0]     at FSWatcher.start (fs.js:1429:19)
[0]     at Object.fs.watch (fs.js:1456:11)
[0]     at addDirWatcher (~/src/angular2-quickstart/tour-of-heros/node_modules/typescript/lib/tsc.js:1036:39)
[0]     at Object.addFile (~/src/angular2-quickstart/tour-of-heros/node_modules/typescript/lib/tsc.js:1051:21)
[0]     at Object.watchFile (~/src/angular2-quickstart/tour-of-heros/node_modules/typescript/lib/tsc.js:1172:48)
[0]     at Object.executeCommandLine (~/src/angular2-quickstart/tour-of-heros/node_modules/typescript/lib/tsc.js:34546:44)
[0]     at Object.<anonymous> (~/src/angular2-quickstart/tour-of-heros/node_modules/typescript/lib/tsc.js:34877:4)
[0]     at Module._compile (module.js:556:32)
[0]     at Object.Module._extensions..js (module.js:565:10)
[0]
[0] npm
[0]  ERR! Darwin 15.6.0
[0] npm ERR! argv "~/.nodebrew/node/v6.4.0/bin/node" "~/.nodebrew/node/v6.4.0/bin/npm" "run" "tsc:w"
[0] npm ERR! node v6.4.0
[0] npm ERR! npm  v3.10.3
[0] npm ERR! code ELIFECYCLE
[0] npm ERR! angular2-quickstart@1.0.0 tsc:w: `tsc -w`
[0] npm
[0] ERR! Exit status 1
[0] npm ERR!
[0] npm
[0]  ERR!
[0]  Failed at the angular2-quickstart@1.0.0 tsc:w script 'tsc -w'.
[0] npm ERR! Make sure you have the latest version of node.js and npm installed.
[0] npm ERR! If you do, this is most likely a problem with the angular2-quickstart package,
(...snip...)
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

Error: watch ~/src/angular2-quickstart/tour-of-heros ENOENT

「なので、エラーとしてはそのディレクトリが見つからない」になるんですけど、
他の行見ると、そこにnode_modulesがあるので不明ですね。

QuickStartのStep 6までやってみましたが普通に動きました。
Node 6.3.1

ディレクトリは ~/src/angular2-quickstart/app  
となるような構成です。

angular2-quickstartの下にtour-of-heros があるのが少し気にはなりますが。
( angular2-quickstart はディレクトリ以外(package.jsonとか)ないですよね?)

気になったのは私の環境だとログにはディレクトリはチルダではなく展開されて表示されています。
bashでもzshでも同様でした。

$ npm start

> angular2-quickstart@1.0.0 start /Users/xxxxx/src/angular2-quickstart
> tsc && concurrently "npm run tsc:w" "npm run lite"

[0]
[0] > angular2-quickstart@1.0.0 tsc:w /Users/xxxxx/src/angular2-quickstart
[0] > tsc -w
[0]
[1]
[1] > angular2-quickstart@1.0.0 lite /Users/xxxxx/src/angular2-quickstart
[1] > lite-server
[1]
[1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
[1] ** browser-sync config **

環境面では私は Nodebrew使ってないという違いはあります。

実行ユーザーが変わって ~ の指す場所が見えないぐらいしか思いつかないですね。
/tmpなど、フルパスで指定されそうなディレクトリにコピーしてみて実行したらどうなるかみてみるといいかもしれません。

あまりお力になれませんが参考まで。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/29 00:59

    試して頂いてありがとうございます。このチュートリアルの他の前にも別のチュートリアルをやっているのでディレクトリ構成はたしかに差異があります。

    > 「なので、エラーとしてはそのディレクトリが見つからない」になるんですけど、

    このエラー内容は理解できてなかったので参考になります。この辺りを中心に見てみます!

    キャンセル

  • 2016/08/29 01:25

    原因不明ですがパス名が全て小文字になっており /Users/xxxxx なのに /users/xxxxx を見て ENOENT になっていたようです。
    package.json などにもパスを指定する項目がなかったので、なぜこうなっているか不明ですが、とりあえず ln -s で /users を作って解決しました。ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Angular2

    192questions