ユニバーサル スターターの例を使用して、Angular2 を使用したサーバー レンダリングについて学習しようとしています。webpack の代わりに gulp を使用したいと考えています。問題は、私が持っているサーバーの起動時です:

追加するように言った投稿をいくつか見ましたimport 'reflect-metadata';が、それでも問題は解決しません:(何かが足りないと思いますが、それが何であるかわかりません...これが私が使用するコードですhttps://github.com/ jaumard/trails-angular2-同形

私はAngular 2 Universalを使用した同形アプリケーションの開発に取り組んでいますが、頭の中で明確にできないことがあります。

バックとフロントを別々のモジュールに置くのは良い習慣だと私は理解していますが、MEANアプリケーションで作業する場合、それは一般的なパターンではないようです。

そのため、スケーリングできるプロジェクトを開始しようとしています。将来的にはサーバー側のレンダリングを実装したいと考えていますが、どのアプローチを採用すべきかわかりません。正直なところ、バックエンドとフロントエンドの両方を別々に保持する方が快適だと思いますが、そうであれば、後でサーバー側のレンダリングを実装することは可能でしょうか?

index.htmlその上、両側で複製すると仮定すると、最初のサーバーレンダリングが完了したときに、サーバーはクライアントに制御を委任できますか? つまり、彼らが同じプロジェクトに属していないという事実を考えると、その委任がどのように機能するか想像できません。

前もって感謝します。

Angular2、typescript、スタイラス (css 用)、および pug (html テンプレート用) を使用してアプリを構築しようとしています。

しかし、Angular2 Universal では動作しません。

問題はts-node、サーバー コードを実行するために使用していて、App コンポーネントをインポートするたびにエラーが発生することです。

server.ts (ノード/エクスプレス):

エラーが発生します：

app/modules/app/app.styl:2 margin-bottom: 10px ^ SyntaxError: 予期しないトークン:

app.ts

app.style

別の方法は、ビルド コード (webpack によって生成された) を実行することです。webpackjsonpしかし、コードは関数でラップされているため、どうすればよいでしょうか。

私は Angula2 + Universal をローンチ当初から使用してきましたが、今日では実際の動作について混乱しています。

彼らの例では、server.ts ファイルに次のものがあります。

アプリを実行し、右クリックしてページ ソースを表示すると、ソース コードに「この偽のデータはサーバーから送信されました」と表示されます。これは、ページがサーバーでレンダリングされたことを意味します。（ これは正しいです ？ ）

これまでのところ、とても素晴らしいです。

次は app.ts にあります。次のものが見つかります。

繰り返しますが、このテキストはページのソースにもあります。

ここに私にとって奇妙な部分があります：

何らかの理由で、次のようにサーバーの待ち時間を増やした場合:

この方法では、ページ ソースはテキストを取得しませんが、次のようにすると:

これは、サーバーでテキストを見つけることができます.!!!!!!!!

これまでのテストに基づいて、ajax 呼び出しの待ち時間が長すぎる場合 (1 秒以上だと思いますか?)、サーバー側のレンダリングのメリットはないと思います。

しかし ：

ただし、app.component.ts で timeOut を増やすと、次のようになります。

サーバー側のレンダリングは引き続き取得でき、ソース ページにはテキストがレンダリングされます。

ここで何が起こっているのですか？

明らかに、すべての ajax 呼び出しが 1 秒未満になるわけではありません。とにかく、ユニバーサルを使用する利点は何ですか?

でサーバーレンダリングをしようとしていますangular2-universal。公式リポジトリhttps://github.com/angular/universal/tree/master/examples/src/universal/todoのサンプル todo アプリをコピーして、自分の Trails/Express サーバーに貼り付けます。

なんとかサーバーを起動できましたが、呼び出すhttp://localhost:3000と次のエラーが発生しました。

ユニバーサルレポの例は機能しているので、なぜ機能しないのかわかりません。angular2 ソースでは何も変更しません。

私のコードはすべてhttps://github.com/jaumard/trails-angular2-isomorphicにあり、構成は https://github.com/jaumard/trails-angular2-isomorphic/blob/master/api/controllers/ViewController にあります。ルートはjs#L58、テンプレート エンジンはこちらhttps://github.com/jaumard/trails-angular2-isomorphic/blob/master/config/web.js#L76

Angular2 Universal はある種の黒魔術のように思えます。この言語を最初から学べる場所が見つからず、公式 Web サイトにも言語の紹介がなく、ドキュメントしかありません。これはどこで学べますか？ありがとうございました。

Angular2 は<script>テンプレートからタグを自動的に削除し、人々がこの機能を「貧乏人」ローダーとして使用するのを阻止します。

ここでの問題は、スクリプト タグには現在、コードやその他のスクリプト ファイルをロードするだけでなく、より多くの用途があることです。<script>今後、タグに関する追加機能が導入される可能性もあります。

現在の用途の 1 つは、次の形式を取る JSON-LD です。

一般的に提案されている回避策は、スクリプト タグをフックを介してドキュメントに動的に追加することngAfterViewInitですが、これは明らかに適切な ng2 プラクティスではなく、JSON-LD が明らかにできる必要があるサーバー側では機能しません。

<script>angular2 テンプレートにタグを含めるために使用できる他の回避策はありますか(タグがブラウザー内で不活性であっても)、またはこれはフレームワークがあまりにも独断的である場合ですか? この状況が angular2 で解決できない場合、他にどのような解決策が存在する可能性がありますか?

Java バックエンド (Tomcat) で angular 2 を使用します。POC にサーバー側レンダリングを実装しようとしています。angular Universal が（クライアント側で）私を助けることができるかどうか疑問に思っていました。前もってお詫び申し上げます。私はAngular AND nodejsを初めて使用します。

ユニバーサルでのサーバー側レンダリングを理解するために、 https ://github.com/angular/universal-starter/tree/masterとhttps://github.com/alexpods/angular2-universal-starterを見てみましょう。

まず第一に、これらのプロジェクトで観察した動作が正常かどうか疑問に思っています。

最初のものでは、プリブートが機能していないようです（main.node.tsでプリブートフラグをtrueに設定しました）：入力フィールドに何かを入力すると、angularがロードされると削除されます...

2 つ目については、サーバー レンダリングが実際に機能するかどうか疑問に思います。クロム オプションにスロットリングを追加しても、読み込み時間が長く、その後にページが表示されるためです (すべてのアセットのダウンロード後にクライアント レンダリングされたかのように)。

また、私のPOCは今のところ素朴で単純かもしれないと言わざるを得ませんが、それらのプロジェクトのエントリポイントを理解するのは難しいです.私のものは単純です:

html :

systemjs :

main.ts (js でコンパイル)

多分私はいくつかのnodejsの理解を見逃しています。

最後に、ページのサーバーレンダリングとクライアントレンダリングバージョンの正確な違いは何ですか?

どうもありがとう！

ユニバーサル サーバー サイド レンダリングの動作を理解しようとしています。

https://github.com/angular/universal-starter/tree/angular-connectプロジェクトを見てください。

私の最初の理解は、サーバー側でレンダリングされたバージョンは、angular によって生成されたすべての動的 html 属性から解放され、angular がその動的属性を必要に応じて透過的に設定する必要があるということでした。

実際、サーバー側で生成されたインデックスが直接「角度注釈付き」になっていることがわかります。例えば：

(属性名は定数ではありません)。

この属性はサーバー側で（nodejsによって）生成されたと思いますか？

この属性の有用性は何ですか?

クライアント側でどのように使用されますか?

私の最終的な目標は、Java バックエンド (nodejs なし) を使用することです: この種の属性を生成し、それらをセッションまたはそのようなものに保持するには、いくつかの戦略に従う必要がありますか?

読んでくれてありがとう！