是的,Angular Universal可以与本地Express API集成。下面是一个示例解决方法。
首先,创建一个Angular项目:
ng new example-app
然后,进入项目目录并安装Angular Universal:
cd example-app
ng add @nguniversal/express-engine
接下来,创建一个Express API服务器。在项目根目录下创建一个名为server.ts的文件,并在其中编写以下代码:
import * as express from 'express';
const app = express();
const port = 3000;
app.get('/api/example', (req, res) => {
res.json({ message: 'Hello from API!' });
});
app.listen(port, () => {
console.log(`API server listening on port ${port}`);
});
然后,在package.json文件中添加一个新的npm脚本,用于启动API服务器:
"scripts": {
"start:api": "ts-node server.ts"
}
接下来,我们需要修改Angular Universal配置以集成Express API。打开angular.json文件并找到"projects > example-app > architect > server"部分,将其修改为以下内容:
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/example-app-server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
]
}
}
}
然后,修改src/main.server.ts文件以将Express API集成到Angular Universal中。替换该文件的内容为以下代码:
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { renderModuleFactory } from '@angular/platform-server';
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';
const app = express();
const PORT = process.env.PORT || 4000;
let indexHtml: string;
if (environment.production) {
enableProdMode();
indexHtml = readFileSync(join('dist', 'example-app', 'browser', 'index.html'), 'utf-8');
} else {
indexHtml = readFileSync(join('dist', 'example-app', 'browser', 'index.html'), 'utf-8');
}
app.get('*.*', express.static(join('dist', 'example-app', 'browser')));
app.get('*', (req, res) => {
renderModuleFactory(AppServerModuleNgFactory, {
document: indexHtml,
url: req.url,
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
}).then(html => {
res.status(200).send(html);
});
});
app.get('/api/example', (req, res) => {
res.json({ message: 'Hello from API!' });
});
app.listen(PORT, () => {
console.log(`Server listening on http://localhost:${PORT}`);
});
最后,通过运行以下命令启动Angular Universal服务器和Express API服务器:
npm run build:ssr
npm run serve:ssr
npm run start:api
现在,您可以在浏览器中访问http://localhost:4000来查看Angular Universal与本地Express API集成的效果。