0

Angular2 の Socially アプリの angular-meteor チュートリアルに従いました。基本的には機能しますが (パッケージの依存関係を修正するためのいくつかの手動手順の後など)、Chrome Dev Tools でクライアント側のコードをデバッグできません。*.ts ファイルのソースに移動すると、次のようなものしか表示されません

module.export("default",exports.default=("<div> <ul> <li *ngFor=\"let party of parties\"> {{party.name}} <p>{{party.description}}</p> <p>{{party.location}}</p> </li> </ul> </div>"));

開発ツールのその他の奇妙な点: app.ts が空白です。!raw サフィックスが付いた html ファイルが表示されます.... (例: app.html!raw)。!raw サフィックスとは何ですか? その原因は何ですか? ここに画像の説明を入力

タイプスクリプトをデバッグするにはどうすればよいですか?

4

1 に答える 1

1

あなたの質問の一部をお手伝いできるかもしれません。

使用している流星のバージョンについては言及していませんが、バージョン 1.4 または 1.4.0.1 を想定しています。これらのバージョンの Meteor では、Typescript ファイルのソースマップに問題があるように見えます (おそらく、複数のトランスパイル手順を実行する必要があるため)。バグが正確にどこにあるのかはまだわかりません (Meteor または Typescript コンパイラ パッケージ)。これに関する github の問題は次のとおりです: https://github.com/barbatus/typescript/issues/23

更新: この問題は修正されました。

今のところ、Meteor の 1.3.xx バージョンに戻すことをお勧めします。Socially チュートリアルのようなものでは、作成時に Meteor リリースを指定するのが最も簡単なオプションです。

$ meteor create --release 1.3.5.1 Socially

(リリースのリストはhttps://github.com/meteor/meteor/releasesにあります)

「app.html」および「app.html!raw」ファイルは、templateUrl および meteor ビルド プロセスの使用に関する問題を回避する方法として、meteor angular コンパイラによって生成されます。私の理解では、推奨されるアプローチは、インライン テンプレートを使用するか、次のようにテンプレートをインポートすることです。

// This import loads the content of the html file into 'template'
import template from './app.html';

@Component({
  selector: 'app',
  // Instead of templateUrl, use:
  template,      // <--- 'template,' is syntactic sugar for: 'template: template,'
  directives ... etc.

import ステートメントは少し変わっています。この魔法は、すべての html および css ファイルを 2 つの js ファイルに変換する meteor angular プリコンパイラによって実現されます。それがapp.htmlとapp.html!rawの奇妙なところです。

最初のアプリ フォルダーの変な文字はバグのようです。Meteor はコンピューターの絵文字を生成しようとしますが、これが正しく処理されないことがあります。これが Chrome のバグなのか、ChromeDevTools なのか Meteor なのかはわかりません。（個人的には、絵文字を捨ててほしい）。

于 2016-08-10T20:53:41.410 に答える