Ich habe Probleme bei der Implementierung einer einfachen MEAN Stack CRUD-Anwendung mit einer RESTful-API, wie in diesem Artikel beschrieben: MEAN Stack (Angular 5) CRUD Web Application Example.HTTPClient POST-Anfrage funktioniert nicht mit Angular 5/Angular Universal
Ich erstellte zuerst die App nur mit Angular 5 (GitHub repo here), und das hat super funktioniert! Dann habe ich versucht, die App mit Angular 5/Angular Universal neu zu erstellen, und dann fing ich an, in Probleme zu geraten. Ich kann GET/DELETE-Anfragen ohne Probleme durchführen. Jedoch Ich bin nicht in der Lage, POST/PUT-Anfragen durchzuführen (Ich verwendete ein Vorlage-gesteuerte Formular mit ngModel).
Wesentlichen nach dem Absenden des Formulars, mein console.log in Knoten zeigt eine GET request (status 304) und die URL ist /book-create?title=&author= die mich führt, dass meine Eingabefelder zu glauben, nicht einmal aufgezeichnet werden. Für das, was es wert ist, sind alle meine protokollierten Anforderungen GET requests (status 304), sogar die Webseiten, die korrekt geladen werden. Ich habe meine Back-End API mit Postman getestet und es funktioniert wie erwartet.
weiß ich Angular Universal-nicht serverseitige Rendering so
- ist der Grund, meine POST-Anfragen nicht arbeiten, weil die Ansicht wird in dem Client nicht gemacht zu werden?
- Hat der 304 Statuscode etwas mit diesem Problem zu tun?
Relevante Codeausschnitte werden unten angezeigt. Danke für die Hilfe!
Buch-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);
});
}}
Buch-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}`));
Wenn Sie angular universal verwenden, müssen URLs, die an den HTTP-Client übergeben werden, absolut sein – David
Notiert, danke! Leider hat das Wechseln zu absoluten URLs mein Problem nicht gelöst. – Stan