У меня есть сервер Angular и отдельный сервер Node / Express, работающие на той же машине Vagrant Ubuntu. Я следую этому курсу. Причина, по которой я перехожу на отдельную машину, заключается в том, что у меня возникают проблемы с моей операционной системой Windows, на которой запущен клиент MongoDB для подключения к базе данных в Mon go atlas, и из-за того, что я больше привык к Unix / Linux разработка (моя другая машина, Ма c Mini, который я купил 4 года go не слишком медленный на мой вкус).
Это мой Vagrantfile
Vagrant.configure("2") do |config|
# Running standard Ubuntu 64 bits version
config.vm.box = "ubuntu/trusty64"
# Open ports for Node.js and MongoDB
config.vm.network "forwarded_port", guest: 3000, host: 3333 # Node.js
config.vm.network "forwarded_port", guest: 27017, host: 27017 # MongoDB
config.vm.network "forwarded_port", guest: 4200, host: 4200 #
# Create a private network, which allows host-only access to the machine
# using a specific IP.
config.vm.network "private_network", ip: "192.168.33.10"
# Set up a synced folder/
config.vm.synced_folder "D:/Code/mean-apps", "/project"
# Provision VM only once
config.vm.provision :shell, :path => "provision.sh"
end
это мой сервер. js файл, предоставленный из курса
const app = require("./backend/app");
const debug = require("debug")("node-angular");
const http = require("http");
const normalizePort = val => {
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
};
const onError = error => {
if (error.syscall !== "listen") {
throw error;
}
const bind = typeof port === "stri`ng" ? "pipe " + port : "port " + port;
switch (error.code) {
case "EACCES":
console.error(bind + " requires elevated privileges");
process.exit(1);
break;
case "EADDRINUSE":
console.error(bind + " is already in use");
process.exit(1);
break;
default:
throw error;
}
};
const onListening = () => {
const addr = server.address();
const bind = typeof port === "string" ? "pipe " + port : "port " + port;
debug("Listening on " + bind);
};
const port = normalizePort(process.env.PORT || "3000");
app.set("port", port);
const server = http.createServer(app);
server.on("error", onError);
server.on("listening", onListening);
server.listen(port);
, и это сервис Angular, в котором я подключаю Angular и серверы Node
import { Post } from './posts.model';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { stringify } from 'querystring';
@Injectable({providedIn: 'root'})
export class PostsService {
private posts: Post[] = [];
private postsUpdated = new Subject<Post[]>();
constructor(private http: HttpClient) {
}
getPosts() {
this.http.get<{message: string, posts: Post[]}>("http://0.0.0.0:3000/api/posts").subscribe((postData) => {
this.posts = postData.posts;
this.postsUpdated.next([...this.posts]);
});
}
getPostsUpdateListner() {
return this.postsUpdated.asObservable();
}
addPost(title: string, content: string) {
const post: Post = {id: null, title: title, content: content}
this.http.post<{message: string}>('http://0.0.0.0:3000/api/posts', post).subscribe((responseData) => {
this.posts.push(post);
this.postsUpdated.next([...this.posts]);
})
}
}
Это моё приложение. js file
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const Post = require('./models/post');
const app = express();
mongoose.connect("mongodb+srv://postproject:ChXhfaHz60e4XIm8@cluster0-a1blo.mongodb.net/test?retryWrites=true&w=majority", { useNewUrlParser: true,useUnifiedTopology: true }).then(() => {
console.log('Connected to database!');
}).catch(() => {
console.log('COnnection failed!');
});
app.use(bodyParser.json());
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers',
'Origin, X-Request-With, Content-Type, Accept');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, DELETE, OPTIONS');
next();
});
//
app.post('/api/posts', (req, res, next) => {
const post = new Post({
title: req.body.title,
content: req.body.content
});
post.save();
console.log(post);
res.status(201).json({
message: 'Post added sucessfully'
});
});
app.use('/api/posts', (req, res, next) => {
const posts = [
{ 'id': 'dsfdg', 'title': 'Post title from Express', 'content': 'This is coming from the server'},
{ 'id': 'gfhjtfgh', 'title': 'Second title from Express', 'content': 'ZThis is coming from the server again'},
{ 'id': 'dsfgfhdg', 'title': 'Third title from Express', 'content': 'ZThis is coming from the server yet again'},
];
res.status(200).json({
message: 'Posts fetched successfully',
posts: posts
});
});
module.exports = app;
Как сейчас, когда я открываю http://192.168.10.33: 4200 , сообщение в API не появляется в списке (Я вижу сообщение "Пока нет сообщений"), поэтому Angular не загружает мой API.
Если потребуется, я буду использовать свою более медленную машину, но так же, как и всю мою повседневную работу на моем Windows машина, я предпочитаю делать так.
Спасибо за помощь.