Angular 4 服务器端呈现 ngx-bootstrap 轮播使响应挂起

Question

所以我正在尝试在我的 angular 4 网站上实现服务器端呈现，我认为我已经非常接近了。除了 1 个特定路由和默认路由外，我已经获得了渲染服务器端的所有路由。不起作用的路由是 /home、/anythingthatisntdefined 和（所有负载都没有路由，但服务器端不呈现主页）。

所以 no 路由，只是没有被我的 catch all 路由接收到...任何未定义的东西我假设服务器没有正确处理默认路由...并且/home 路线未加载，对我来说没有意义。有什么建议吗？

这是我的 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}!`);
});

这是我的路由器

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

好消息，我弄清楚为什么单条路线/随机路线没有加载。 ngx-bootstrap 旋转木马（我在我的家乡路线上）有一个需要在服务器端禁用的间隔。否则路由将永远挂起并且永远不会加载。

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

最后，没有路由不起作用的事实是因为我的静态资产路由在我的 express.get 之前拦截了请求。

Angular 4 服务器端呈现 ngx-bootstrap 轮播使响应挂起

Angular 4 Server Side Rendering ngx-bootstrap carousel makes response hang

node.js

server-side-rendering

angular