2017-03-14 22 views
3

Angular UniversalはCLIでかなり長い間使用されることはないので、SEOを正しく動作させるにはprerender.ioを使用する必要があります。しかし、いくつかのテストの後では、それが怠け者のロードされたモジュールを待つように見えないので、SEOがまだ失敗するので、すべてうまく動作しないようです。 this locationで自分のサイト上でAngular 2 - lazy loadingと一緒にprerender.ioを使用する方法

、彼らがこれを言う:

はあなたのページには、部分的にしかレンダリングされますか?

プレレンダリングサーバーは、ページが完了した時点を判断するために、飛行中のリクエストの数を数えて計算します。 飛行中のリクエスト数 がゼロになったら、短時間待って を保存してからHTMLを保存します。ページの保存が遅すぎる場合は、 window.prerenderReadyフラグを使用して、ページが に保存される準備ができていることをサーバーに通知できます。

あなたのHTMLにこれを入れて:

<script> window.prerenderReady = false; </script> 

我々はwindow.prerenderReadyがfalseに設定され表示されたら、それはHTMLを保存するには、trueに セットになるまで、私たちは待っています。あなたのページが(通常はAJAX呼び出し後) 準備が整いますときにこれを実行します。私はそれについて移動する方法を理解していないところ

window.prerenderReady = true; 

ここにあります。 Angularはテンプレートからスクリプトタグを削除するので(これが単なるCLIの動作かAngularかどうかはわかりません)、最初のスクリプトタグは設定できません。 window.prerenderReady = trueを使用できず、スクリプトがテンプレートに追加されている必要があるため、windowプロパティのプロパティをテンプレートクラスのタグ内に更新する方法もわかりません。

誰でもこれを把握していますか、これを達成する方法について考えている人はいますか?

+0

これで成功しましたか?私も同じ問題に直面しています。 –

+0

@GirishRathod私はしましたが、サーバーが正しく構成されている場合は、この方法を使用する必要はありません。 – Chrillewoodz

+0

何が使えますか?私が使用できるように適切な設定例がありますか? –

答えて

0

REMOVE:server.use(prerender.removeScriptTags());

prerender.ioは、彼らが実行できるようにスクリプトに残すように設定することができます。

私のMeteor-Angular2セットアップは私に同じ悲しみを与えました。私のヘッダーとフッタモジュールはレンダリングされますが、私のルータ出口出力はレンダリングされません。 (メイン<app></app>タグを含む)私のメインのindex.htmlに
<script> window.prerenderReady = false; </script>
を、そして配置::私は置か
window.prerenderReady = true;
私の最後のコールバックの終わりに。それから、私はprerender serverのserver.jsの
//server.use(prerender.removeScriptTags());
をコメントアウトし、最終的に正しく表示しました。

0

さて、私はこの作業を得たが、それはかなり複雑な解決策のように思えるので、うまくいけば、そこに賢く私よりも誰かがこの:) src/polyfills.ts

まず、コメントを解除し、すべてのブラウザpolyfillsであります(それが可能そのそれらのすべてが必要とされていないが、私はそれらを一つずつ)をテストしていません:

/** IE9, IE10 and IE11 requires all of the following polyfills. **/ 
import 'core-js/es6/symbol'; 
import 'core-js/es6/object'; 
import 'core-js/es6/function'; 
import 'core-js/es6/parse-int'; 
import 'core-js/es6/parse-float'; 
import 'core-js/es6/number'; 
import 'core-js/es6/math'; 
import 'core-js/es6/string'; 
import 'core-js/es6/date'; 
import 'core-js/es6/array'; 
import 'core-js/es6/regexp'; 
import 'core-js/es6/map'; 
import 'core-js/es6/weak-map'; 
import 'core-js/es6/set'; 

次に、あなたはあなたのindex.html<head>でスクリプトタグであなたのprerenderReadyフラグを取得する必要があります。

<head> 
    <!--prerender--> 
</head> 

を今、あなたはng buildを実行した後、あなたが実際のスクリプトタグでそのフラグを交換する必要があり、:私はビルドする前に、私はそこにフラグを残すような角度は、コメントを削除しません。これはシェルスクリプトとsedコマンドを使って行います。ような何か:

TPL="\<!--prerender--\>" 
PRERENDER_SCRIPT="\<script\>window.prerenderReady = false;\<\/script\>" 

# replace the comment with the actual script tag in the html file and save 
# that file's contents as a string in the INDEX_HTML variable 
INDEX_HTML=$(sed "s/$TPL/$PRERENDER_SCRIPT/g;" dist/browser/index.html); 

# remove the original index.html file and create an empty one in its place 
rm dist/browser/index.html 
touch dist/browser/index.html 

# echo the INDEX_HTML string into the new file 
echo "$INDEX_HTML" > dist/browser/index.html 

NOTE 私はOSX上sedをインストールするの漠然とした記憶がありますが、私は実際に手順を覚えていません。あなたがLinuxでなく、sedがうまく動作しない場合は、Googleのソリューションを利用するだけで済みます。

最後に、prerenderReadyフラグをtrueに設定する必要があります。私はAppComponentさんOnInit実装で次の操作を行います。

export class AppComponent implements OnInit 
{ 
    ngOnInit() 
    { 
     window.prerenderReady = true; 
    } 
} 

それはおそらくまた、活字体のアプリでwindowを使用するために、あなたは私がtypings.d.ts呼び出すファイルでこのような何かが必要であることを言及クマ:

interface Window 
{ 
    prerenderReady:boolean; 
} 

だけでなく、私は私のapp.module.tsファイルの先頭に置くことタイピングファイルへの参照:

/// <reference path="../typings.d.ts" /> 

誰かを助ける希望。

関連する問題