角2 Webpack产品构建和节点:无法获得直接url服务

I followed the instructions to create a webpack build environment from the angular.io site: https://angular.io/docs/ts/latest/guide/webpack.html, and got it working. Then, I took the Tour of Heroes tutorial that I got working, and I migrated it to a webpack environment.

我按照说明从角度创建webpack构建环境。io网站:https://angular.io/docs/ts/latest/guide/webpack。然后让它工作。然后，我完成了《英雄之旅》教程，并将它迁移到webpack环境中。

If I run the Tour of Heroes using the webpack dev environment (with npm start), it works great. If I then create a production build (with npm run build), and serve the resulting files with node, I cannot get the server to respond when I try to access a URL directly. Below I will outline the steps to create the environment and the problem step-by-step. I believe the solution is to modify my server.js file, but I don't know what is needed.

如果我使用webpack开发环境(使用npm start)运行《英雄之旅》，效果会很好。如果我然后创建一个产品构建(使用npm运行构建)，并使用node服务结果文件，那么当我试图直接访问URL时，我无法让服务器响应。下面我将逐步概述创建环境的步骤和问题。我认为解决方案是修改我的服务器。js文件，但是我不知道需要什么。

How to recreate:

如何重建:

Create the webpack build environment per the instructions on the website (link above).
根据网站上的说明(链接)创建webpack构建环境。
Copy the app folder from the Tour of Heroes liteserver environment to the src folder of the webpack environment
将来自hero liteserver环境的应用程序文件夹复制到webpack环境的src文件夹

In index.html of the webpack environment, comment out (or remove) all the scripts for polyfills and Configure SystemJS. Index.html should look like this:

在索引。webpack环境的html，注释(或删除)所有用于填充和配置SystemJS的脚本。索引。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>

Modify the package.json so it has what is needed from both environments. Mine looks like this:

修改方案。因此，它具有两个环境所需的内容。我看起来像这样:

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

From the webpack folder, run npm install

从webpack文件夹中运行npm安装
From the webpack folder, run npm run build to create prod build files. This is what the webpack tutorial says to do.
从webpack文件夹中，运行npm运行构建来创建prod构建文件。这就是webpack教程所要做的。
Create a node server environment.
创建一个节点服务器环境。

Create a server.js file at the root that looks like this:

创建一个服务器。根目录下的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");
});

In the node environment, create a public folder, and put all the files from the dist folder that was created in step 6 into the public folder.

在节点环境中，创建一个公共文件夹，并将第6步中创建的dist文件夹中的所有文件放入公共文件夹。
Run the node server with node server.js
使用node server.js运行节点服务器
Go to localhost:4040. Everything works fine when accessed this way.
去localhost:4040。以这种方式访问时一切正常。
Enter this URL directly: http://localhost:4040/heroes
直接输入此URL: http://localhost:4040/heroes
Get the 404 Error.
404错误。
From the webpack environment if you run npm start, you can go to the URL directly http://localhost:4040/heroes and it works fine.
在webpack环境中，如果运行npm start，可以直接访问URL http://localhost:404040/heroes并正常工作。

If you want to see all the code for this, here is the github repo: https://github.com/joshuaforman/heroeswebpack

如果您想查看所有代码，这里是github repo: https://github.com/joshua/ heroeswebpack

1 个解决方案

#1

I've got it figured out. The issue was in the server.js. After more research, I found this: https://expressjs.com/en/starter/static-files.html. Need to add more middleware after the express.static middleware: app.use('/heroes', express.static('public'));. The direct URLs work as needed with this server.js file:

我已经搞清楚了。问题出现在服务器.js中。经过更多的研究，我发现了这个:https://expressjs.com/en/starter/static-files.html。需要在express之后添加更多的中间件。静态中间件:app.use(英雄' / ',express.static(公共));。直接url在此服务器上按需要工作。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");
});

The app I'm working on also needs to pass params, so if you need to do that, you will need middleware of this format:

我正在开发的应用程序也需要传递params，所以如果你需要传递params，你需要这个格式的中间件:

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

Thanks to this stack question for the above: Serve Static Files on a Dynamic Route using Express.

感谢上面的堆栈问题:使用Express在动态路由上服务静态文件。

Thanks for the help, folks.

谢谢你们的帮助。

#1

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");
});