Question

我目前有一个准系统角应用程序，我试图通过我的快速服务器从我的角度客户端应用程序的构建服务捆绑文件。

我正在使用ng-build构建角度代码并将dist文件夹的内容复制到我服务器的dist文件夹中。它看起来像以下

当我启动服务器时，我可以渲染index.html，但在我的控制台中看到以下内容

GET /inline.bundle.js.map 404 8.875 ms - 159
GET /polyfills.bundle.js.map 404 3.486 ms - 162
GET /styles.bundle.js.map 404 2.860 ms - 159
GET /vendor.bundle.js.map 404 2.695 ms - 159
GET /main.bundle.js.map 404 2.956 ms - 157

要将客户端连接到服务器，我在 app.module.ts

中有以下内容：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { APP_BASE_HREF } from '@angular/common';
import { routing } from './app.routing';


import { AppComponent } from './app.component';
import {QueuedService} from "./queued.service";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [{provide: APP_BASE_HREF, useValue:'/'}, QueuedService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的 queued.service.ts 包含以下内容

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class QueuedService {
  host:string = "http://localhost:8080";

  constructor(private http: Http){}

}

目前，我不确定我是否正确连接客户端和服务器。

EDITED

这是我的 index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Queued Application</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <style>
    #signUp{
      margin-right: 30px;
    }
    #searchRestaurants{
      padding-left: 250px;
      padding-top: 50px;
    }

    #showRestaurantsList{
      display: none;
      margin-top: 20px;
    }

    #reservationPage{
      display: none;
      margin-top: 20px;
    }

    #navBar{
      min-height: 65px;
      background-color: #333;
    }

    body{
      background-color: aliceblue;
    }

    #appName{
      color: white;
      font-size: 20px;
      font-family: Helvetica;
    }
  </style>
</head>
<body>
  <app-root>Loading...</app-root>
  <script src="http://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>

此处还有我的快递服务器

export class Server {

    public app: express.Application;
    public RestaurantList: RestaurantListModel;

    /**
     * Bootstrap the application.
     *
     * @class Server
     * @method bootstrap
     * @static
     * @return {ng.auto.IInjectorService} Returns the newly created injector for this app.
     */
    public static bootstrap(): Server {
        return new Server();
    }

    /**
     * Constructor.
     *
     * @class Server
     * @constructor
     */
    constructor() {
        //create expressjs application
        this.app = express();

        //add routes
        this.routes();

        //configure application
        this.config();

        this.RestaurantList = new RestaurantListModel();

        //add api
        this.api();

    }

    /**
     * Create REST API routes
     *
     * @class Server
     * @method api
     */
    public api() {
        //empty for now
    }

    /**
     * Configure application
     *
     * @class Server
     * @method config
     */
    private config() : void {
        //add static paths
        // this.app.use('/', express.static(__dirname+'/dist/public'));

        //use logger middlware
        this.app.use(logger("dev"));

        //use json form parser middlware
        this.app.use(bodyParser.json());

        //use query string parser middlware
        this.app.use(bodyParser.urlencoded({
            extended: true
        }));

        //use cookie parker middleware middlware
        this.app.use(cookieParser("SECRET_GOES_HERE"));

        //use override middlware
        this.app.use(methodOverride());


        //catch 404 and forward to error handler
        this.app.use(function(err: any, req: express.Request, res: express.Response, next: express.NextFunction) {
            err.status = 404;
            next(err);
        });

        //error handling
        this.app.use(errorHandler());
    }

    /**
     * Create router
     *
     * @class Server
     * @method api
     */
    public routes() {
        let router: express.Router;
        router = express.Router();

        //IndexRoute
        /*
        router.post('/queued/restaurantList', (req, res) =>{
            let jsonObj = req.body;
            console.log(jsonObj);
        });*/

        router.get('/queued/restaurantList',(req, res) => {
            console.log('List of the restaurants');
            this.RestaurantList.getAllItems(res);
        });


        //use router middleware
        this.app.use('/',router);
        this.app.use(express.static(__dirname));

    }
}

从Express提供Angular Build文件

0 个答案: