Порт Angular 4200, показывающий данные с html, но порт nodejs 8080, показывающий данные json без html

Question

Я использую угловую 5 с узлом JS, чтобы сделать Crud для данных событий. Когда я пытаюсь получить данные о событиях из порта 4200(http://localhost:4200/event) который бежит через угловой, работает хорошо. Он показывает данные в формате HTML со всеми значениями. Но когда я использую порт 8080(http://localhost:8080/event) который из node js показывает данные только в формате json. Никакое html-содержимое из event.component.html не отображается здесь. express.js выглядит так

/* ===================
Import Node Modules
=================== */
const express = require('express');
const app = express();
const router = express.Router();

const mongoose = require('mongoose');
const config = require('./database');
const path = require('path');
const appRoot = require('app-root-path');

//custom module
const event = require('../config/routes/event.router');

const bodyParser = require('body-parser');
const cors = require('cors');
const port = process.env.PORT || 8080; // Allows heroku to set port


mongoose.Promise = global.Promise;
//assigning value 
process.env.NODE_ENV = 'devlopment';

/**
 * Database connection
 */

mongoose.connect(config.uri, {
  useMongoClient: true,
}, (err) => {
  // Check if database was able to connect
  if (err) {
    console.log('Could NOT connect to database: ', err); // Return error message
  } else {
    console.log('Connected to ' + config.db); // Return success message
  }
});

app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());


app.use(express.static(path.join(appRoot.path, 'dist')));

/**
 * Routing
 */

app.use('/event', event); //Event Router

app.get('*', (req, res) => {
 res.sendFile(path.join(appRoot.path, 'dist/index.html'));
});

/**
 * Assiging port to server
 */
app.listen(port, () => {
  console.log('Listening on port ' + port + ' in ' + process.env.NODE_ENV + ' mode');
});

мой event.router.js выглядит так

const Event = require('../../model/event.model');
var multer  = require('multer');
var upload  = multer({ dest: './public/uploads/img/',fileFilter:function(req,file,cb){
  var ext = file.originalname.split('.').pop();
  cb(null, file.fieldname + '-' + Date.now() + '.' + ext);
    }
}).single('eventimage');

/* GET ALL EVENTS */
router.get('/', function(req, res, next) {
  Event.find(function (err, events) {
    if (err) return next(err);
    res.json(events);
  });
});

/* GET SINGLE EVENT BY ID */
 router.get('/:id', function(req, res, next) {
   Event.findById(req.params.id, function (err, post) {
     if (err) return next(err);
     res.json(post);
   });
 });

module.exports = router;

event.component.html выглядит так

<div class="container">
  <h1>Event List</h1>
  <table class="table">
    <thead>
      <tr>
        <th>Event Id</th>
        <th>Event Name</th>
        <th>Event Desc</th>
        <th>Event Date</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let event of events">
        <td><a routerLink="/event-details/{{ event._id }}">{{ event._id }}</a></td>
        <td>{{ event.eventname }}</td>
        <td>{{ event.eventdesc }}</td>
        <td>{{ event.eventdates }}</td>
      </tr>
    </tbody>
  </table>
</div>

event.components.ts выглядит так

import { Component, OnInit } from '@angular/core';
import { EventService } from '../event.service';

@Component({
  selector: 'app-event',
  templateUrl: './event.component.html',
  styleUrls: ['./event.component.css']
})
export class EventComponent implements OnInit {

  events: Event[] = [];

  constructor(
    protected eventService: EventService
    ) { }

  ngOnInit() {
    this.getAll();
  }

  getAll() {
    this.eventService.getEvents().subscribe(res => {
      this.events = res as Event[];
    }, err => {
      console.log(err);
    });
  }
}

event.service.ts выглядит так

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';
import { HttpClientModule } from '@angular/common/http';

import { HttpClient } from "@angular/common/http";
import 'rxjs/add/operator/map';


@Injectable()
export class EventService {

  domain = 'http://localhost:8080';

  headers = new Headers({ 'Content-Type': 'application/json' });

  constructor(
   private http: Http,
    ) { }

  getEvent(id: string) {
    return this.http.get(this.domain + '/event/' + id, { headers: this.headers }).map(res => res.json());
  }

  getEvents(){
    return this.http.get( this.domain + '/event', {headers: this.headers}).map(res => res.json() );
  }

}

Так может кто-нибудь сказать мне, что здесь не так. Почему я получаю данные в виде json через порт 8080 и почему он хорошо работает с портом 4200? Как я получу данные с html в 8080 порту? Любая помощь и предложения будут действительно заметны.

Answer 1

Я знал, что это столкновение произойдет, когда я скажу вам переместить события выше запроса get * в другом ответе.

Именно поэтому предложили /api маршрут.

Здесь происходит то, что:

Когда вы обслуживаете свое угловое приложение с узла. т.е. на порт 8080 и запрос

HTTP: // локальный: 8080 / События

Экспресс находит этот маршрут зарегистрированным в модуле событий, поэтому он возвращает данные в форме JSON, и запрос не идет по маршруту, по которому вы возвращаете индексный файл (необходимый для загрузки угловых данных)

В то время как localhost:4200 запрос направляется напрямую в угловой интерфейс командной строки, чтобы они не сталкивались с экспресс-путем.

Как я и предлагал, просто поместите путь "/api" перед каждым API, который вы создаете в Express, и ваша проблема будет решена, так как у Express больше не будет пути "/events", поэтому он будет передавать запрос в app.get(*) функция и ваш угловой файл будут обслуживаться.

NOTE /api - это просто стандартное соглашение об именах, вы можете поставить xyz, и оно будет работать.

Эта практика также гарантирует, что вы не столкнетесь с той же проблемой в других запросах.

Answer 2

Ваш маршрут события предоставляет JSON для вызова события в угловом приложении, а не его рендеринг.

Ваше угловое приложение также работает на веб-сервере на 4200, который, вероятно, является своего рода сервером разработки. Затем запросы передаются на экспресс-сервер, который предоставляет внутренние данные.

Чтобы использовать приложение Express для рендеринга углового приложения, необходимо создать приложение и поместить файлы в папку dist приложения Express. Затем любой маршрут, кроме /event, будет отображать угловое приложение. Это раздел кода, который показывает это.

app.get('*', (req, res) => {
 res.sendFile(path.join(appRoot.path, 'dist/index.html'));
});

Если вы находитесь в среде разработки, вам не нужно об этом беспокоиться. Вы можете получить доступ к угловому приложению через порт 4200 и экспресс-приложению по 8080

Answer 3

Очень логично видеть HTML с данными в порту 4200, так как на этом порту вы размещаете свои HTML-файлы Angular, поэтому вы увидите HTML-код независимо от того, работает ваш бэкэнд или нет.

На порте 8080 это тоже очень логично, так как этот порт, на котором размещается серверная часть, отправляет только данные, и этот порт является портом, предоставляющим данные на порт 4200 HTML.