要实现Angular的SSR(服务器端渲染)规范化,可以按照以下步骤进行:
创建一个新的Angular项目:
ng new my-ssr-app
安装Angular Universal:
ng add @nguniversal/express-engine
生成SSR文件:
ng generate universal --client-project my-ssr-app
在服务器端创建一个Express应用,并将Angular的SSR引擎添加到应用中:
// server.ts
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { APP_BASE_HREF } from '@angular/common';
import { AppServerModule } from './src/main.server';
const app = express();
const port = 4000;
app.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
app.set('view engine', 'html');
app.set('views', join(process.cwd(), 'dist/my-ssr-app/browser'));
app.use(express.static(join(process.cwd(), 'dist/my-ssr-app/browser'), {
index: false,
}));
app.get('*', (req, res) => {
res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});
app.listen(port, () => {
console.log(`Server is listening on port ${port}`);
});
在tsconfig.server.json
文件中更新编译选项:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./dist/my-ssr-app/server",
"module": "commonjs",
"types": ["node"],
"esModuleInterop": true
},
"angularCompilerOptions": {
"entryModule": "./src/app/app.server.module#AppServerModule"
},
"exclude": ["src/test.ts", "**/*.spec.ts"]
}
构建和编译服务器端代码:
npm run build:ssr
启动服务器:
node dist/my-ssr-app/server/main.js
这样,你就可以在服务器上实现Angular的SSR规范化了。