Angular开发实践之服务端渲染

npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader @nguniversal/express-engine express

import { ngmodule } from '@angular/core';
import { servermodule, servertransferstatemodule } from '@angular/platform-server';
import { modulemaploadermodule } from '@nguniversal/module-map-ngfactory-loader';

import { appbrowsermodule } from './app.module';
import { appcomponent } from './app.component';

// 可以注册那些在 universal 环境下运行应用时特有的服务提供商
@ngmodule({
  imports: [
    appbrowsermodule, // 客户端应用的 appmodule
    servermodule, // 服务端的 angular 模块
    modulemaploadermodule, // 用于实现服务端的路由的惰性加载
    servertransferstatemodule, // 在服务端导入，用于实现将状态从服务器传输到客户端
  ],
  bootstrap: [appcomponent],
})
export class appservermodule {
}

@ngmodule({
  imports: [
    approutingmodule,
    browsermodule.withservertransition({appid: 'my-app'}),
    transferhttpcachemodule, // 用于实现服务器到客户端的请求传输缓存，防止客户端重复请求服务端已完成的请求
    browsertransferstatemodule, // 在客户端导入，用于实现将状态从服务器传输到客户端
    httpclientmodule
  ],
  declarations: [
    appcomponent,
    homecomponent
  ],
  providers: [],
  bootstrap: [appcomponent]
})
export class appbrowsermodule {
  constructor(@inject(platform_id) private platformid: object,
        @inject(app_id) private appid: string) {
    
    // 判断运行环境为客户端还是服务端
    const platform = isplatformbrowser(platformid) ? 'in the browser' : 'on the server';
    console.log(`running ${platform} with appid=${appid}`);
  }
}

constructor(@inject(platform_id) private platformid: object,
      @inject(app_id) private appid: string) {
  
  // 判断运行环境为客户端还是服务端
  const platform = isplatformbrowser(platformid) ? 'in the browser' : 'on the server';
  console.log(`running ${platform} with appid=${appid}`);
}

export { appservermodule } from './app/app.server.module';

import { enableprodmode } from '@angular/core';
import { platformbrowserdynamic } from '@angular/platform-browser-dynamic';

import { appbrowsermodule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableprodmode();
}

// 在 domcontentloaded 时运行我们的代码，以使 transferstate 正常工作
document.addeventlistener('domcontentloaded', () => {
  platformbrowserdynamic().bootstrapmodule(appbrowsermodule);
});

{
 "extends": "../tsconfig.json",
 "compileroptions": {
  "outdir": "../out-tsc/app",
  "baseurl": "./",
  "module": "commonjs",
  "types": [
   "node"
  ]
 },
 "exclude": [
  "test.ts",
  "**/*.spec.ts"
 ],
 "angularcompileroptions": {
  "entrymodule": "app/app.server.module#appservermodule"
 }
}

{
  "platform": "server",
  "root": "src",
  "outdir": "dist/server",
  "assets": [
   "assets",
   "favicon.ico"
  ],
  "index": "",
  "main": "main.server.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.server.json",
  "testtsconfig": "tsconfig.spec.json",
  "prefix": "",
  "styles": [
   "styles.scss"
  ],
  "scripts": [],
  "environmentsource": "environments/environment.ts",
  "environments": {
   "dev": "environments/environment.ts",
   "prod": "environments/environment.prod.ts"
  }
}

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { enableprodmode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';
import { readfilesync } from 'fs';

// faster server renders w/ prod mode (dev mode never needed)
enableprodmode();

// express server
const app = express();

const port = process.env.port || 4000;
const dist_folder = join(process.cwd(), 'dist');

// our  we'll use as our template
const template = readfilesync(join(dist_folder, 'browser', '')).tostring();

// * note :: leave this as require() since this file is built dynamically from webpack
const {appservermodulengfactory, lazy_module_map} = require('./dist/server/main.bundle');

// express engine
import { ngexpressengine } from '@nguniversal/express-engine';
// import module map for lazy loading
import { providemodulemap } from '@nguniversal/module-map-ngfactory-loader';

// our universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngexpressengine({
  bootstrap: appservermodulengfactory,
  providers: [
    providemodulemap(lazy_module_map)
  ]
}));

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

/* - example express rest api endpoints -
 app.get('/api/**', (req, res) => { });
*/

// server static files from /browser
app.get('*.*', express.static(join(dist_folder, 'browser'), {
  maxage: '1y'
}));

// all regular routes use the universal engine
app.get('*', (req, res) => {
  res.render('index', {req});
});

// start up the node server
app.listen(port, () => {
  console.log(`node express server listening on http://localhost:${port}`);
});

// load zone.js for the server.
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { readfilesync, writefilesync, existssync, mkdirsync } from 'fs';
import { join } from 'path';

import { enableprodmode } from '@angular/core';
// faster server renders w/ prod mode (dev mode never needed)
enableprodmode();

// import module map for lazy loading
import { providemodulemap } from '@nguniversal/module-map-ngfactory-loader';
import { rendermodulefactory } from '@angular/platform-server';
import { routes } from './static.paths';

// * note :: leave this as require() since this file is built dynamically from webpack
const {appservermodulengfactory, lazy_module_map} = require('./dist/server/main.bundle');

const browser_folder = join(process.cwd(), 'browser');

// load the  file containing referances to your application bundle.
const index = readfilesync(join('browser', ''), 'utf8');

let previousrender = promise.resolve();

// iterate each route path
routes.foreach(route => {
  const fullpath = join(browser_folder, route);

  // make sure the directory structure is there
  if (!existssync(fullpath)) {
    mkdirsync(fullpath);
  }

  // writes rendered html to , replacing the file if it already exists.
  previousrender = previousrender.then(_ => rendermodulefactory(appservermodulengfactory, {
    document: index,
    url: route,
    extraproviders: [
      providemodulemap(lazy_module_map)
    ]
  })).then(html => writefilesync(join(fullpath, ''), html));
});

// work around for https://github.com/angular/angular-cli/issues/7200

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    server: './server.ts', // this is our express server for dynamic universal
    prerender: './prerender.ts' // this is an example of static prerendering (generative)
  },
  target: 'node',
  resolve: {extensions: ['.ts', '.js']},
  externals: [/(node_modules|main\..*\.js)/,], // make sure we include all node_modules etc
  output: {
    path: path.join(__dirname, 'dist'), // puts the output at the root of the dist folder
    filename: '[name].js'
  },
  module: {
    rules: [
      {test: /\.ts$/, loader: 'ts-loader'}
    ]
  },
  plugins: [
    new webpack.contextreplacementplugin(
      /(.+)?angular(\\|\/)core(.+)?/, // fixes warning critical dependency: the request of a dependency is an expression
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.contextreplacementplugin(
      /(.+)?express(\\|\/)(.+)?/, // fixes warning critical dependency: the request of a dependency is an expression
      path.join(__dirname, 'src'),
      {}
    )
  ]
};

{
  "scripts": {
    "ng": "ng",
    "start": "ng serve -o",
    "ssr": "npm run build:ssr && npm run serve:ssr",
    "prerender": "npm run build:prerender && npm run serve:prerender",
    "build": "ng build",
    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
    "build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "generate:prerender": "cd dist && node prerender",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:prerender": "cd dist/browser && http-server",
    "serve:ssr": "node dist/server"
  }
}

export const routes = [
  '/',
  '/lazy'
];

import { component, ondestroy, oninit } from '@angular/core';
import { httpclient } from '@angular/common/http';
import { observable } from 'rxjs/observable';

@component({
  selector: 'app-home',
  templateurl: './home.component.html',
  styleurls: ['./home.component.scss']
})
export class homecomponent implements oninit, ondestroy {
  constructor(public http: httpclient) {
  }
  
  ngoninit() {
    this.poisearch(this.keyword, '北京市').subscribe((data: any) => {
      console.log(data);
    });
  }
  
  ngondestroy() {
  }
  
  poisearch(text: string, city?: string): observable<any> {
    return this.http.get(encodeuri(`http://restapi.amap.com/v3/place/text?keywords=${text}&city=${city}&offset=20&key=55f909211b9950837fba2c71d0488db9&extensions=all`));
  }
}

import { component, ondestroy, oninit } from '@angular/core';
import { makestatekey, transferstate } from '@angular/platform-browser';
import { httpclient } from '@angular/common/http';
import { observable } from 'rxjs/observable';

const kfclist_key = makestatekey('kfclist');

@component({
  selector: 'app-home',
  templateurl: './home.component.html',
  styleurls: ['./home.component.scss']
})
export class homecomponent implements oninit, ondestroy {
  constructor(public http: httpclient,
        private state: transferstate) {
  }
  
  ngoninit() {
  
    // 采用一个标记来区分服务端是否已经拿到了数据，如果没拿到数据就在客户端请求，如果已经拿到数据就不发请求
    const kfclist：any[] = this.state.get(kfclist_key, null as any);

    if (!this.kfclist) {
      this.poisearch(this.keyword, '北京市').subscribe((data: any) => {
        console.log(data);
        this.state.set(kfclist_key, data as any); // 存储数据
      });
    }
  }
  
  ngondestroy() {
    if (typeof window === 'object') {
      this.state.set(kfclist_key, null as any); // 删除数据
    }
  }
  
  poisearch(text: string, city?: string): observable<any> {
    return this.http.get(encodeuri(`http://restapi.amap.com/v3/place/text?keywords=${text}&city=${city}&offset=20&key=55f909211b9950837fba2c71d0488db9&extensions=all`));
  }
}