使用Node Js服务器运行Angular2应用程序
我正在用Angular2（客户端）和Node JS（服务器端）技术开始一个新项目。
我已经设法使用node和express创build一个RESTful API。 当input特定的URL时，显示匹配的Json响应。 到现在为止还挺好。
现在我正在尝试整合Angular 2。 我创build了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正在加载…”，但不显示组件。
在官方的Angular2网站上，他们使用lite-server依赖。 我想我的服务器有问题，但我不知道如何使其工作。 或者有没有一种方法来使用Express和lite-server实现RESTful API？
你忘了添加一个中间件函数来提供像js libs和css这样的静态文件。 在app.get("/", ...)之前添加这行应该工作：
app.use(express.static(__projectRoot));
安装path包后npm我的path–save
在上面使用这个
var path = require（'path'）;
并在此之后使用
var app = express（）;
app.use（express.static（path.join（__ dirname，'your-dir-name'）））;