Question

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

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

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

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并用于任何重定向到localhost：3000的/ api调用。

为此，我已将 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无法呈现

2 个答案: