角4サーバ側レンダリングngx-bootstrapカルーセルが応答をハングします

Question

私はアンギュラ4ウェブサイトでサーバサイドレンダリングを実装しようとしています。 1つの特定のルートとデフォルトのルートを除いて、サーバー側をレンダリングするすべてのルートを取得しました。動作しないルートは、/ home、/何も定義されていないルートです（すべてのロード時にはルートはありませんが、サーバー側でホームページをレンダリングしません）。

私はすべてのルート...私のキャッチでピックアップされていないので、私はサーバーが正しくデフォルトルートを処理していないと仮定している何か...と/ホームルートはロードされていない、ちょうど私に意味をなさない。任意のヒント？ 1つのルート/ランダムルートが読み込まれなかった理由

がここにここに私のルータ

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { HomeComponent } from './home/home.component'; 
import { AboutComponent } from './about/about.component'; 
import { ServicesComponent } from './services/services.component'; 
import { ResourcesComponent } from './resources/resources.component'; 
import { ChurchesComponent } from './churches/churches.component'; 
import { GetAQuoteComponent } from './get-a-quote/get-a-quote.component'; 

const routes: Routes = [ 
    { 
    path: 'home', 
    component: HomeComponent 
    }, 
    { 
    path: 'services', 
    component: ServicesComponent 
    }, 
    { 
    path: 'resources', 
    component: ResourcesComponent 
    }, 
    { 
    path: 'about', 
    component: AboutComponent 
    }, 
    { 
    path: 'churches', 
    component: ChurchesComponent 
    }, 
    { 
    path: 'get-a-quote', 
    component: GetAQuoteComponent 
    }, 
    { 
    path: '**', 
    component: HomeComponent 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule { } 

Answer 1

朗報である私のserver.ts

import 'reflect-metadata'; 
import 'zone.js/dist/zone-node'; 
import { platformServer, renderModuleFactory } from '@angular/platform-server'; 
import { enableProdMode } from '@angular/core'; 
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory'; 
import * as express from 'express'; 
import { readFileSync } from 'fs'; 
import { join } from 'path'; 

const PORT = 4000; 

enableProdMode(); 

const app = express(); 

let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString(); 

app.engine('html', (_, options, callback) => { 
    console.log('url: ', options.req.url); 
    const opts = { document: template, url: options.req.url }; 

    renderModuleFactory(AppServerModuleNgFactory, opts) 
    .then(html => callback(null, html)); 
}); 

app.set('view engine', 'html'); 
app.set('views', 'src') 

app.use(express.static(join(__dirname, '..', 'dist'))); 

app.get('*', (req, res) => { 
    console.log('caught by *'); 
    res.render('../dist/index.html', { 
    req: req, 
    res: res 
    }); 
}); 
app.listen(PORT,() => { 
    console.log(`listening on http://localhost:${PORT}!`); 
}); 

ですが、私は考え出しました。 ngx-bootstrapカルーセル（私のホームルートにあった）には、サーバー側を無効にする必要がある間隔があります。そうしないと、ルートは永久に停止し、ロードされません。

参考：https://github.com/valor-software/ngx-bootstrap/issues/1353

そして最後に、無ルートの実際に動作していないがために、私のexpress.getだった前に、要求をインターセプトして、私の静的な資産ルートでした。