在 MEAN 堆栈应用程序上工作。索引中的应用根目录.html未呈现。 索引.html正在加载，但未加载模板中内联定义的 HTML。创建了REST API并成功从mongodb获取数据。在堆栈溢出上搜索了类似的线程，但不是相同的问题。请帮忙。
服务器.js
var express = require('express');
var bodyParser = require('body-parser');
var path = require('path');
var port = 3000;
var app = express();
var api = require('./server/routes/api');
app.engine('html', require('ejs').renderFile);
app.use(express.static(path.join(__dirname , '../dist')));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use('/api', api);
app.use('*',function (req, res) {
res.sendFile(path.join(__dirname , '../dist/VideoPlayer/index.html'));
});
app.listen(port, function () {
console.log("Server running on localhost:" + port);
})
索引.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VideoPlayer</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template:`
<h1>My First Angular 2 multiline template</h1>
<p>Second line</p>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
app-routing-module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from "./home/home.component";
import { VideoCenterComponent } from "./video-center/video-center.component";
const routes: Routes = [
{path: '', redirectTo:'/home', pathMatch:'full'},
{path: 'home', component: HomeComponent},
{path: 'videos', component: VideoCenterComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { VideoCenterComponent } from './video-center/video-center.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
VideoCenterComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这应该在app.component.html中：
<div>
<router-outlet>
</router-outlet>
</div>
或简单地使用：
templateUrl:'path/to/template.component.html'
找到了解决方案!!!!
问题：Angular 和 Express 在不同的端口(4200 和 3000(上运行。 我正在为本地主机发送索引.html：3000/api，它没有在索引内呈现应用程序根标记.html...而其他API请求API/视频，API/视频/ID从MongoDB正确获取数据。
解决方案：由于 Angular 在 4200 上运行，我现在使用 localhost：4200 代替，对于任何重定向到 localhost：3000 的/api 调用。
为此，我将proxy.conf.json添加到我的src文件夹中：
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}
在angular.json中添加了 serve 中的声明：
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "VideoPlayer:build",
"proxyConfig": "src/proxy.conf.json"
}
运行以下命令：
ng serve --proxy-conf src/proxy.conf.json
并像往常一样启动您的快速服务器。
阅读以下内容了解更多详情： https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md