我按照说明从angular.io网站创建了一个webpack构建环境:https://angular.io/docs/ts/latest/guide/webpack.html,并使其正常工作。然后,我参加了我工作的英雄之旅教程,并将其迁移到了webpack环境。
如果我使用webpack开发环境(使用npm start
)运行英雄之旅,它的效果很好。如果我然后创建一个生产版本(使用npm run build
),并使用节点提供结果文件,当我尝试直接访问URL时,我无法让服务器响应。下面我将概述逐步创建环境和问题的步骤。我相信解决方案是修改我的server.js文件,但我不知道需要什么。
如何重新创建:
app
文件夹复制到webpack环境的src
文件夹在webpack环境的index.html中,注释掉(或删除)polyfill和Configure SystemJS的所有脚本。 Index.html应如下所示:
<html>
<head>
<base href="/">
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<link rel="stylesheet" href="styles.css">
<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>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
-->
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
修改package.json,使其具备两种环境所需的功能。我看起来像这样:
{
"name": "angular2-webpack",
"version": "1.0.0",
"description": "A webpack starter for Angular",
"scripts": {
"start": "webpack-dev-server --inline --progress --port 8080",
"test": "karma start",
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"@angular/common": "~2.1.1",
"@angular/compiler": "~2.1.1",
"@angular/core": "~2.1.1",
"@angular/forms": "~2.1.1",
"@angular/http": "~2.1.1",
"@angular/platform-browser": "~2.1.1",
"@angular/platform-browser-dynamic": "~2.1.1",
"@angular/router": "~3.1.1",
"angular2-cool-storage": "^1.1.0",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.25"
},
"devDependencies": {
"@types/core-js": "^0.9.34",
"@types/node": "^6.0.45",
"@types/jasmine": "^2.5.35",
"angular2-template-loader": "^0.4.0",
"awesome-typescript-loader": "^2.2.4",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.15.0",
"jasmine-core": "^2.4.1",
"karma": "^1.2.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.7",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.2",
"style-loader": "^0.13.1",
"typescript": "^2.0.3",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.14.0"
}
}
从webpack文件夹中,运行npm install
npm run build
以创建prod构建文件。这就是webpack教程所要做的。在根目录下创建一个如下所示的server.js文件:
var express = require("express");
var app = express();
app.use(function(req, res, next) {
console.log("Request recieved for:", req.url);
next();
});
app.use(express.static('public'));
app.use(function(req, res, next) {
res.status(404);
res.send('404 file not found');
});
app.listen(4040, function() {
console.log("yes: 4040");
});
在节点环境中,创建一个public
文件夹,并将步骤6中创建的dist
文件夹中的所有文件放入公用文件夹。
node server.js
http://localhost:4040/heroes
npm start
,请从网络包环境中直接转到网址http://localhost:4040/heroes
,这样就可以了。如果你想看到这个的所有代码,这里是github repo:https://github.com/joshuaforman/heroeswebpack
答案 0 :(得分:3)
我已经明白了。问题发生在server.js中。经过更多的研究,我发现了这一点:https://expressjs.com/en/starter/static-files.html。需要在express.static中间件后添加更多中间件:app.use('/heroes', express.static('public'));
。直接URL可以根据需要使用此server.js文件:
var express = require("express");
var app = express();
app.use(function(req, res, next) {
console.log("Request recieved for:", req.url);
next();
});
app.use(express.static('public'));
app.use('/heroes', express.static('public'));
app.use('/dashboard', express.static('public'));
app.use(function(req, res, next) {
res.status(404);
res.send('404 file not found');
});
app.listen(4040, function() {
console.log("yes: 4040");
});
我正在处理的应用程序也需要传递参数,所以如果你需要这样做,你需要这种格式的中间件:
app.get('/peopledetails/:uid', function(req, res){
var uid = req.params.uid,
path = req.params[0] ? req.params[0] : 'index.html';
res.sendFile(path, {root: './public'});
});
感谢上面的这个堆栈问题:Serve Static Files on a Dynamic Route using Express。
感谢大家的帮助。