Angular 2 Webpack Production Build&节点:无法获取要提供的直接URL

时间:2016-10-31 16:59:41

标签: node.js angular webpack

我按照说明从angular.io网站创建了一个webpack构建环境:https://angular.io/docs/ts/latest/guide/webpack.html,并使其正常工作。然后,我参加了我工作的英雄之旅教程,并将其迁移到了webpack环境。

如果我使用webpack开发环境(使用npm start)运行英雄之旅,它的效果很好。如果我然后创建一个生产版本(使用npm run build),并使用节点提供结果文件,当我尝试直接访问URL时,我无法让服务器响应。下面我将概述逐步创建环境和问题的步骤。我相信解决方案是修改我的server.js文件,但我不知道需要什么。

如何重新创建:

  1. 根据网站上的说明(上面的链接)创建webpack构建环境。
  2. 将Tour of Heroes liteserver环境中的app文件夹复制到webpack环境的src文件夹
  3. 在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>
    
  4. 修改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"
      }
    }
    
  5. 从webpack文件夹中,运行npm install

  6. 从webpack文件夹中,运行npm run build以创建prod构建文件。这就是webpack教程所要做的。
  7. 创建节点服务器环境。
  8. 在根目录下创建一个如下所示的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");
    }); 
    
  9. 在节点环境中,创建一个public文件夹,并将步骤6中创建的dist文件夹中的所有文件放入公用文件夹。

  10. 使用node server.js
  11. 运行节点服务器
  12. 转到localhost:4040。以这种方式访问​​时一切正常。
  13. 直接输入此网址:http://localhost:4040/heroes
  14. 获取404错误。
  15. 如果您运行npm start,请从网络包环境中直接转到网址http://localhost:4040/heroes,这样就可以了。
  16. 如果你想看到这个的所有代码,这里是github repo:https://github.com/joshuaforman/heroeswebpack

1 个答案:

答案 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

感谢大家的帮助。