問題タブ [angular-universal]

現在 angular 2.0 をサポートしているすべてのプラグインは、Angular Universal をサポートしていないようです。直接DOMアクセスによるエラーが表示されます。DOMangular 2の方法でアクセスコードを変更したい。queryselector()ウィンドウ、ドキュメント、、、、、などquerySelectorAll()の角度document.getElementsByTagname()のある2つの方法を誰でも提案できますか?getElementsByClassName()

条件に基づいてモジュールをインポートすることは可能ですか? angular 2ユニバーサルアプリがサーバーではなくブラウザーでレンダリングされている場合にのみ、外部モジュールを具体的にインポートします。

この質問は、ブラウザーの機能に依存し、ブラウザーでのみレンダリングできる一部の PrimeNG モジュールに関連しています。カレンダーやその他のコンポーネントは SEO にとってそれほど重要ではないため、サーバー レンダリングでそれらを省略した方がよいでしょう。

現在、サーバー レンダリングをオフにすると、Calendar コンポーネントをレンダリングできます。しかし、app.module.ts に以下のコードを含めてサーバー レンダリングをオンにすると、サーバーは button.js で 'ReferenceError: Event is not defined' というエラーを生成します。

angular によって提供される isBrowser 条件があります。

しかし、条件付きインポートに使用する方法がわかりません。モジュールに対してそれを行う方法は本当にありますか？

私は現在、Angular 2 + Universal (サーバー側レンダリング) プロジェクトでの i18n サポートに苦労しています。言語ごとに異なるバンドル ファイルが必要です (例: /server/bundle_EN.js と /server/bundle_DE.js)。

クライアント側のレンダリングでは機能しますが、サーバー側のレンダリングで同じことを行う方法がわかりません。ノード サーバーは一度起動すると、別のテンプレート ファイルを使用する必要があるためです (現在のクライアント言語によって異なります)。

AoT と個別の言語フォルダーを使用してプロジェクトをプリコンパイルし、それらをサーバーで使用することは可能ですか?

ありがとう！

ng2-bootsrap カルーセルに問題があります。ページ内のカルーセル コードがコメント アウトされている場合、ページ (/home2) は正常に読み込まれます。しかし、カルーセル コードが実行されている場合、ブラウザはサーバーがページを提供するのを待ち続け (サーバーは決してそうしません)、ページが空になります。参考までに、Angular Universal Starter プロジェクトを使用しています。

home2 コンポーネントで myInterval を 5000 に設定したカルーセル コードを次に示します。

サーバー側（エクスプレス）の出力は次のとおりです。

サーバー上のコンソール ログ ステートメントは次のとおりです。

Angular Universal がループに陥っているように見えます。実装は次のとおりです。無限ループを回避するために間隔を無効にしたインテリア デザインのアイデア。誰かがこれを修正する方法を教えていただければ幸いです。任意の提案をいただければ幸いです。

ありがとう

現在、このコード スニペットを使用して視差効果を取得しています。

jquery プラグインを使用する別の方法があり、isBrowser を使用してすべてのコンポーネントを検証する必要がないかどうかを知りたい

angular Universal をセットアップしました。4 つの静的ルートと各アイテムに 1 つのルートを持つ小さなプロジェクトがあります ( /products/:id)。

SSR を処理している nodeJS サーバーがあるため、これは全体像にどのように適合しますか?

以前はindex.html、Apache サーバーに angular 2 js コードしかありませんでした。ノードjsサーバーでユニバーサルを使用しているので、これはどのように方程式に適合しますか? 私はこの分野についてあまり知りません。

私の質問も明確かどうかわからないので、これに関する意見をいただければ幸いです。

アプリで使用している関数があり、関数のパラメーターの 1 つがオブジェクトです。

ただし、プロジェクトを提供するときに受け取る唯一のエラーは次のとおりです。

ReferenceError: オブジェクトに localStorage が定義されていません。(/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:4145:23) webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30)でオブジェクトで。(/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:4119:67) webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30)でオブジェクトで。(/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1728:69) webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30)でオブジェクトで。(/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1803:70) webpack_requireで(/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30) オブジェクトで。(/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1509:79) webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30)で

localStorage が存在するかどうかを確認するにはどうすればよいですか?

angular cli プロジェクトで angular Universal をインストールした経験のある人はいますか?

私はこのガイドに従おうとしました：

https://universal.angular.io/quickstart/

しかし、私がこれをした後：

エラーが発生します：

angular Universal で Angular の公式国際化ツールを使用しようとしています。これまでのところ、次の手順を使用してクライアント側のレンダリングを変換できます (この回答に感謝https://stackoverflow.com/a/40930110/1110635 ):

テンプレートのドキュメントに記載されているように、「i18n」属性を追加します。

./src/+app/about/about.component.html :

次に実行します：

ベースのmessages.xlfファイルを生成します。

次に、サポートしたいロケールごとにこのファイルを「messages.[locale].xlf」として「locale」フォルダーにコピーします。準備ができたら、コンテンツのエクスポートされた文字列を含む xlf ファイルごとに「 messages.[locale].ts 」を作成します。

./locale/messages.fr.ts:

最後に、client.tsファイルは次のようになります。

./src/client.ts:

これは機能し、「クライアント側」アプリケーションを期待どおりに機能させます。「について」は「提案」に置き換えられます。しかし、クライアント側のブートストラップが完了するまでテキストは翻訳されません。

そのため、最初にページに移動すると、約 1 秒間「 About 」が表示されてから、クライアント側で「 A propos」に置き換えられます。

サーバー側で翻訳サービスを実行するだけです。しかし、私はそれを行う方法がわかりません。

私のserver.tsは次のようになります：

./src/server.ts

クライアント側のように、 bootstrapModuleメソッドに直接アクセスすることはできません。「 createEngine」パラメーター オブジェクトのprovidersキーは、元のserver.tsコードに既に存在していました。

私は何が欠けていますか？