详解基于Angular4+ server render(服务端渲染)开发教程

import { PLATFORM_ID } from '@angular/core';

import { isPlatformBrowser, isPlatformServer } from '@angular/common';

 

constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }

 

ngOnInit() {

 if (isPlatformBrowser(this.platformId)) {

   // Client only code.

   ...

 }

 if (isPlatformServer(this.platformId)) {

  // Server only code.

  ...

 }

} 

const express = require('express');
const desktop = express();

const port = process.env.NODE_PORT "htmlcode">

import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { AppServerModuleNgFactory } from './app-server.module.ngfactory';

const ROOT = path.join(path.resolve(__dirname),'..','build');

 function response(req, res) {
  res.render(`index.html`, {
   req,
   res
  });
 }

 app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory
 }));

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

 app.get('/', response);
 routes.forEach((r) => {
   app.get(r, response);
   app.get(`${r}/*`, response);
  }
 );




angular服务端渲染能一定程度上优化用户体验，但是还是有个小问题，用户首次加载时，仍然需要加载完整个网站的内容。
所以我目前考虑在angular4 ssr的基础上加入lazy load（懒惰加载，也称按需加载），懒惰加载模块可帮助我们减少启动时间。通过懒惰加载，我们的应用程序不需要一次加载所有内容，只需要加载用户在首次加载应用程序时看到的内容。
只有当用户导航到他们的路由时，才会加载懒惰加载的模块。以进一步优化用户体验，待完成后再写一遍随笔记录心路历程。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。