【发布时间】：2017-12-29 20:05:22
【问题描述】：
我在尝试使用本文所述的 RESTful API 实现简单的 MEAN Stack CRUD 应用程序时遇到了麻烦：MEAN Stack (Angular 5) CRUD Web Application Example。
我最初只使用 Angular 5 (GitHub repo here) 创建了这个应用程序，效果很好！然后，我尝试使用 Angular 5 / Angular Universal 重新创建应用程序，这就是我开始遇到问题的时候。我可以毫无问题地执行 GET/DELETE 请求。但是，我无法执行 POST/PUT 请求（我使用了使用 ngModel 的模板驱动表单）。
基本上，在提交表单后，我的console.log in node 显示一个GET request (status 304)，并且 URL 是/book-create?title=&author=，这让我相信我的输入字段甚至没有被记录.值得一提的是，我记录的所有请求都是GET requests (status 304)，甚至是正确加载的网页。我用 Postman 测试了我的后端 API，它按预期工作。
我知道 Angular Universal 会进行服务器端渲染，所以
- 我的 POST 请求无法正常工作是因为 视图未在客户端中呈现吗？
- 304 状态码是否与此问题有关？
相关代码sn-ps如下所示。感谢您的帮助！
book-create.component.ts
export class BookCreateComponent implements OnInit {
book: any = {};
constructor(private http: HttpClient, private router: Router) { }
saveBook() {
this.http.post('api/book', this.book)
.subscribe(res => {
this.router.navigate(['/books']);
}, err => {
console.log(err);
});
}}
book-create.component.html
<form #bookForm="ngForm" (ngSubmit)="saveBook()">
<input required name="title" [(ngModel)]="book.title" type="text">
<input required name="author" [(ngModel)]="book.author" type="text">
<input type="submit" value="Create">
</form>
server.js
require('zone.js/dist/zone-node'); // COMMENT: Server specific version of Zone.js
const express = require('express');
const path = require('path');
const morgan = require('morgan');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const ngUniversal = require('@nguniversal/express-engine'); // COMMENT: SSR Engine
const appServer = require('./dist-server/main.bundle'); // COMMENT: Server Bundle
const app = express();
const port = process.env.PORT || 3000;
const api = require('./routes/api');
const config = require('./config/database');
mongoose.Promise = require('bluebird');
mongoose.connect(config.database, { useMongoClient: true, promiseLibrary:
require('bluebird') })
.then(() => console.log(`Connected to database ${config.database}`))
.catch((err) => console.log(`Database error: ${err}`));
app.engine('html', ngUniversal.ngExpressEngine({ // COMMENT: Engine Config
bootstrap: appServer.AppServerModuleNgFactory
}));
app.set('view engine', 'html');
app.set('views', 'dist');
function serverRouter(req, res, next) => {
if (req.url.startsWith('/api')) return next();
res.render('index', { req, res });
}
app.use(morgan('dev'));
app.use(bodyParser.json());
app.get('/', serverRouter); // COMMENT: Server-side rendering of root route
app.use('/api', api);
app.use(express.static(`${__dirname}/dist`));
app.get('*', serverRouter);
// API Error Handler here (not shown)
app.listen(port, () => console.log(`Server started on port ${port}`));
【问题讨论】：
-
使用 Angular Universal 时，传递给 http 客户端的 URL 必须是绝对的
-
注意，谢谢！不幸的是，更改为绝对 URL 并没有解决我的问题。
标签： angular mean-stack crud server-side-rendering angular-universal