使用Angular 5集成混合面板

ng new my-app
cd my-app

npm install @nguniversal/express-engine
npm install express

import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { join } from 'path';

import { AppServerModuleNgFactory } from './src/main.server';

enableProdMode();

const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

app.engine('html', (_, options, callback) => {
  const engine = AppServerModuleNgFactory.create({});

  engine.renderToString(options, callback);
});

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

app.use(express.static(DIST_FOLDER, { index: false }));

app.get('*', (_, res) => {
  res.render('index', { req: _, res });
});

app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppComponent } from './app.component';
import { AppModuleShared } from './app.module.shared';
import { BrowserTransferStateModule } from '@angular/platform-browser';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'my-app' }),
    ServerModule,
    AppModuleShared,
    BrowserTransferStateModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

npm run build:ssr

npm run serve:ssr