要进行Angular Universal的生产部署,需要按照以下步骤进行操作:
配置Angular Universal:
npm install @nguniversal/express-engine @nguniversal/module-map-ngfactory-loader
ServerModule
和ModuleMapLoaderModule
:import { ServerModule } from '@angular/platform-server'; import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
NgModule({ imports: [ServerModule, AppModule, ModuleMapLoaderModule], })
export { AppServerModule } from './app/app.server.module';
创建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 { APP_BASE_HREF } from '@angular/common'; import { existsSync } from 'fs'; import { renderModuleFactory } from '@angular/platform-server'; import { AppServerModule } from './main.server';
enableProdMode();
const app = express();
const distFolder = join(process.cwd(), 'dist/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
app.get('*.*', express.static(distFolder, { maxAge: '1y' })); app.get('*', (req, res) => { renderModuleFactory(AppServerModule, { document: indexHtml, url: req.url, extraProviders: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] }).then(html => { res.status(200).send(html); }).catch(err => { console.error(err); res.sendStatus(500); }); });
app.listen(4000, () => { console.log('Angular Universal server listening on port 4000'); });
构建和部署:
ng build --prod
来构建生产版本的Angular应用程序。npm install express
node server/express.js
(确保在正确的目录中运行此命令)。通过以上步骤,您就可以成功进行Angular Universal的生产部署了。请注意,这只是一个基本的示例,您可能需要根据您的项目需求进行适当的调整和配置。