0
この記事で説明しているように、RESTful APIを使用して簡単なMEAN Stack CRUDアプリケーションを実装する際に問題が発生しました：MEAN Stack (Angular 5) CRUD Web Application ExampleHTTPClientのPOSTリクエストがAngular 5/Angular Universalで動作しない
初めてAngular 5（GitHub repo here）を使用してアプリを作成しました。これは素晴らしい機能でした。その後、Angular 5/Angular Universalを使ってアプリケーションを作り直そうとしましたが、それが問題にぶつかり始めました。問題なくGET/DELETEリクエストを実行できます。ただし、POST/PUTリクエストを実行できません（ngModelを使用してテンプレート駆動型を使用しました）。
は基本的に、フォームを送信した後、私のノードでconsole.logはGET request (status 304)を示し、URLは私の入力フィールドがさえ記録されていないと信じて私につながる/book-create?title=&author=です。それが価値のあるものであれば、ログに記録されたすべてのリクエストはGET requests (status 304)であり、正しく読み込まれたWebページでさえあります。バックエンドAPIをPostmanでテストしたところ、期待どおりに動作します。
- がビューがクライアントでレンダリングされていないので、私のPOSTリクエストが働いていない理由は、サーバー側でレンダリングん知っていますか？
- ステータスコードはこの問題と関連していますか？
関連するコードスニペットを以下に示します。助けてくれてありがとう！
ブック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);
});
}}
ブック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}`));
角度ユニバーサルを使用する場合、httpクライアントに渡されるURLは絶対的なものでなければなりません – David
ありがとう、ありがとう！残念ながら、絶対URLに変更しても問題は解決しませんでした。 – Stan