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

Question

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

Server.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';
}

应用程序路由-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 { }

Answer 1

这应该在 app.component.html:

<div>
  <router-outlet>

  </router-outlet>
</div>

或简单地使用：

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

Answer 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": {
          "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

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

MEAN STACK- app-root in index.html not getting rendered

mean-stack