MEAN STACK-index.html 中的 app-root 未呈现答案

【问题标题】：MEAN STACK- app-root in index.html not getting renderedMEAN STACK-index.html 中的 app-root 未呈现
【发布时间】：2018-08-30 21:40:39
【问题描述】：

在 MEAN Stack 应用程序上工作。 index.html 中的 app-root 未呈现。 index.html 正在加载，但不是模板中定义的 html。创建 REST API 并成功从 mongodb 获取数据。在stackoverflow上搜索了类似的线程，但不是同一个问题。请帮忙。

服务器.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);
})

index.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 { }

【问题讨论】：

标签： mean-stack

【解决方案1】：

这应该在 app.component.html 中：

<div>
  <router-outlet>

  </router-outlet>
</div>

或简单地使用：

templateUrl:'path/to/template.component.html'

【讨论】：

刚才又试过了。不工作:( app-routing.ts 和 app.module.ts 有问题吗？...它们看起来有点多余...您可以指出任何错误吗？
尝试将 app-routing.module.ts 代码移动到 app.module.ts。但这不会改变任何事情。意识到无论哪种方式都很好。那里没问题...但只是简单的应用程序根选择器应该可以工作。不知道为什么这不起作用。

【解决方案2】：

找到了解决办法！！！！！！

问题： Angular 和 Express 在不同的端口（4200 和 3000）上运行。我正在为 localhost:3000/api 发送 index.html，它没有在 index.html 中呈现 app-root 标记...而其他 api 请求 api/videos、api/videos/id 正在从 MongoDB 正确获取数据。

解决方案：由于 Angular 在 4200 上运行，我现在使用 localhost:4200 来代替任何 /api 调用重定向到 localhost:3000。

为此，我已将 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

然后像往常一样启动你的快递服务器。

【讨论】：