要在Angular Universal应用中调用api内部的express,可以按照以下步骤进行操作:
ng add @nguniversal/express-engine
server.ts
的文件,用来启动express服务器并处理api调用。示例代码如下:import * as express from 'express';
import { join } from 'path';
import { ngExpressEngine } from '@nguniversal/express-engine';
const app = express();
// 设置Angular Universal引擎
app.engine(
'html',
ngExpressEngine({
bootstrap: AppServerModule,
})
);
// 设置Angular应用的静态文件目录
app.set('view engine', 'html');
app.set('views', join(__dirname, 'dist', 'browser'));
// 静态文件路由,用来提供Angular应用的客户端代码
app.get(
'*.*',
express.static(join(__dirname, 'dist', 'browser'), {
maxAge: '1y',
})
);
// 所有路由的处理,将请求交给Angular Universal引擎处理
app.get('*', (req, res) => {
res.render('index', { req });
});
// 启动express服务器
app.listen(4000, () => {
console.log('Express server listening on port 4000');
});
server
的文件夹,并在该文件夹下创建一个名为api.ts
的文件,用来处理api调用。示例代码如下:import { Request, Response } from 'express';
export function apiHandler(req: Request, res: Response) {
// 处理api调用逻辑
res.send('API response');
}
server.ts
文件中引入并使用api.ts
文件中的apiHandler
函数。示例代码如下:import { apiHandler } from './server/api';
// ...
// 处理api调用的路由
app.get('/api', apiHandler);
// ...
npm run build && npm run serve:ssr
这样,你的Angular Universal应用就可以在启动的express服务器上同时处理api调用了。当访问/api
路由时,会执行apiHandler
函数并返回相应的结果。