ng2-bootsrap カルーセルに問題があります。ページ内のカルーセル コードがコメント アウトされている場合、ページ (/home2) は正常に読み込まれます。しかし、カルーセル コードが実行されている場合、ブラウザはサーバーがページを提供するのを待ち続け (サーバーは決してそうしません)、ページが空になります。参考までに、Angular Universal Starter プロジェクトを使用しています。
home2 コンポーネントで myInterval を 5000 に設定したカルーセル コードを次に示します。
<carousel [interval]="myInterval" [noWrap]="noWrapSlides">
<slide *ngFor="let slidez of slides;let index=index" [active]="slidez.active">
<!-- <img [src]="slidez.image">-->
<div class="carousel-caption">
<h4>Slide {{index}}</h4>
<p>{{slidez.text}}</p>
</div>
</slide>
<i class="fa fa-chevron-left left carousel-control"></i>
<i class="fa fa-chevron-right right carousel-control"></i>
</carousel>
サーバー側(エクスプレス)の出力は次のとおりです。
GET /home2 - - ms - -
inside ngApp
/home2
GET /home2 - - ms - -
nginside ngApp
/home2
GET /home2 - - ms - -
inside ngApp
/home2
GET /home2 - - ms - -
サーバー上のコンソール ログ ステートメントは次のとおりです。
function ngApp(req, res) {
console.log("inside ngApp");
console.log(req.originalUrl);
res.render('index', {
req,
res,
// time: true, // use this to determine what part of your app is slow only in development
preboot: false,
baseUrl: '/',
requestUrl: req.originalUrl,
originUrl: `http://localhost:${ app.get('port') }`
});
}
Angular Universal がループに陥っているように見えます。実装は次のとおりです。無限ループを回避するために間隔を無効にしたインテリア デザインのアイデア。誰かがこれを修正する方法を教えていただければ幸いです。任意の提案をいただければ幸いです。
ありがとう