使用Node Js服務器運行Angular2應用程序

Question

我正在使用Angular2（客戶端）和Node JS（服務器端）技術開始一個新項目。

我已經設法使用node和express創建RESTful API。 輸入特定URL時，將顯示匹配的Json響應。 到現在為止還挺好。

現在我正在嘗試將Angular 2集成到這個過程中。 我已經創建了app.component。 顯示頁面時， 組件未加載 ，我得到了一些404代碼：

Failed to load resource: 404 (not found) http://localhost:3000/node_modules/core-js/client/shim.min.js
...
Failed to load resource: 404 (not found) http://localhost:3000/systemjs.config.js

這是我的項目結構：

├── App
|    └── app.component.ts                //copied from Angular2/get-started
|    └── main.ts                         // copied from Angular2/get-started
├── dist                                 //contains generated JS files
├── node_modules
├── server                               // contains Server Typescript files
├── index.html                           // copied from Angular2/get-started
├── index.ts                             // server entry point
├── package.json
├── systemjs.config.js
├── tsconfig.json
├── typings.json

我的package.json：

{
  "main": "index.js",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"node dist/js/index.js\" ",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "dependencies": {

    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",

    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.11",
    "bootstrap": "^3.3.6",

    "express": "^4.13.4",
    "mysql": "^2.5.4"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4"
  }
}

我的index.ts（服務器）：

var express = require('express');
var app = express();
var path = require('path');

var __projectRoot = __dirname + '/../../';

app.get('/', function (req, res) {
    res.sendFile(path.join(__projectRoot + '/index.html'));
});

console.log('Server up and running on http://localhost:3000/');
app.listen(server_port);

總結一下，index.html：

<html>
<head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) {
            console.error(err);
        });
    </script>
</head>
<!-- 3. Display the application -->
<body>
<h1>index.html</h1>
<my-app>Loading...</my-app>
</body>
</html>

加載http：// localhost：3000 /時，我看到“Index.html Loading ...”，但不顯示該組件。

在Angular2官方網站上，他們使用lite-server依賴。 我想我的服務器有問題，但我無法弄清楚如何使它工作。 或者有沒有辦法使用Express和lite-server實現RESTful API？

Answer 1

你忘了添加一個中間件函數來提供像js libs和css這樣的靜態文件。 在app.get("/", ...)之前添加此行應該有效：

app.use(express.static(__projectRoot));

Answer 2

安裝路徑包后npm i path --save

在頂部使用它

var path = require('path');

然后使用它

app.use(express.static(path.join(__dirname, 'your-dir-name')));

  app.use（express.static（path.join（__ dirname，'your-dir-name'）））;

使用Node Js服務器運行Angular2應用程序

問題描述

2 個解決方案

解決方案1
2 已采納 2016-06-12 17:29:31

解決方案2
0 2017-01-13 16:04:22

使用Node Js服務器運行Angular2應用程序

問題描述

2 個解決方案

解決方案1 2 已采納 2016-06-12 17:29:31

解決方案2 0 2017-01-13 16:04:22

解決方案1
2 已采納 2016-06-12 17:29:31

解決方案2
0 2017-01-13 16:04:22