![](/img/trans.png)
[英]Angular 7 - Only “dist” folder is rendering on browser but not “src” folder with nodejs
[英]Angular 5 not getting the data from NodeJs, Mongodb when dist folder has been used
我正在使用帶有節點js的angular 5來創建和獲取事件數據。 我的express.js文件如下所示
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');
const event = require('./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';
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')));
app.get('*', (req, res) => {
res.sendFile(path.join(appRoot.path, 'dist/index.html'));
});
app.use('/event', event); //Event Router
app.listen(port, () => {
console.log('Listening on port ' + port + ' in ' + process.env.NODE_ENV + ' mode');
});
event.router.js看起來像這樣
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
const Event = require('../../model/event.model');
/* GET ALL EVENTS FROM DB */
router.get('/', function(req, res, next) {
console.log(Event);
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.component.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[];
console.log(res);
}, 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 {
headers = new Headers({ 'Content-Type': 'application/json' });
constructor(
private http: Http,
) { }
getEvent(id: string) {
return this.http.get('event' + id, { headers: this.headers }).map(res => res.json());
}
getEvents(){
return this.http.get('http://localhost:8080/event', {headers: this.headers}).map(res => res.json() );
}
}
問題是,當我嘗試從mongodb中獲取所有數據時,它在瀏覽器的控制台選項卡中顯示了類似GET http://localhost:8080/event 404 (Not Found)
。 但是當我刪除行時
app.get('*', (req, res) => { res.sendFile(path.join(appRoot.path, 'dist/index.html')); });
從express.js顯示數據。 但是我認為該行應該在express.js文件中,因為當angular創建數據時,它應該從該文件夾中獲取所有html和組件。 有人可以告訴我我做錯了什么嗎?
任何幫助和建議都是非常可取的。
把你的
app.get('*', (req, res) => {
res.sendFile(path.join(appRoot.path, 'dist/index.html'));
});
后
app.use('/event', event); //Event Router
這背后的原因是,Express在每個獲取請求上都返回索引文件,而不檢查其他路由,因為您在事件之前具有*路由,隨着位置的更改,Express將首先查找事件路由,因此事件url將使用事件控制器對於其他URL,它將返回index.html
另外,請保持在“ api /”路由之后保留每個API的做法,例如,獲取事件api路由應為/ api / events
這將用角路由分隔您的api代碼。
想象一下,您的角度應用程序中有一個/ events路由。 因此,如果您在網址欄中輸入http:// localhost / events route,則會得到事件列表mongoDB api的響應,而不是所需的頁面。
編輯鏈接以獲得更多的了解。
https://malcoded.com/posts/angular-backend-express
https://www.reddit.com/r/angularjs/comments/2f4858/angular_express_best_way_to_handle_routing/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.