Node.js Angular 2网页包制作与制作；节点：can'；无法获得直接的URL服务_Node.js_Angular_Webpack

Node.js Angular 2网页包制作与制作；节点：can'；无法获得直接的URL服务

node.js angular webpack

Node.js Angular 2网页包制作与制作；节点：can'；无法获得直接的URL服务,node.js,angular,webpack,Node.js,Angular,Webpack,我按照说明从angular.io站点创建了一个webpack构建环境，并使其正常工作。然后，我开始学习《英雄之旅》教程，并将其迁移到一个网页环境中如果我使用webpack dev环境（使用npm start）运行英雄之旅，效果会很好。如果我随后创建一个生产构建（使用npm run build），并使用node为生成的文件提供服务，那么当我尝试直接访问URL时，我无法让服务器响应。下面我将一步一步地概述创建环境和解决问题的步骤。我相信解决方案是修改我的server.js文件，但我不知道需要什么

我按照说明从angular.io站点创建了一个webpack构建环境，并使其正常工作。然后，我开始学习《英雄之旅》教程，并将其迁移到一个网页环境中

如果我使用webpack dev环境（使用

npm start

）运行英雄之旅，效果会很好。如果我随后创建一个生产构建（使用

npm run build

），并使用node为生成的文件提供服务，那么当我尝试直接访问URL时，我无法让服务器响应。下面我将一步一步地概述创建环境和解决问题的步骤。我相信解决方案是修改我的server.js文件，但我不知道需要什么

如何重新创建：

按照网站上的说明（上面的链接）创建网页包构建环境

将服务器环境中的

app

文件夹复制到Web包环境中的

src

文件夹

在webpack环境的index.html中，注释掉（或删除）polyfills的所有脚本并配置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>

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

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

从webpack文件夹中，运行

npm安装

从webpack文件夹中，运行

npm run build

以创建产品构建文件。这就是网页教程所说的

创建节点服务器环境

在根目录下创建一个server.js文件，如下所示：

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

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

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运行节点服务器


转到localhost:4040。通过这种方式访问时，一切都正常
直接输入此URL:http://localhost:4040/heroes
获取404错误
如果运行npm start
，可以从网页环境直接转到URLhttp://localhost:4040/heroes
而且工作正常
如果您想查看这方面的所有代码，下面是github repo:
我已经找到了答案。问题出在server.js中。经过更多的研究，我发现这个：。需要在express.static中间件之后添加更多中间件：app.use（'/heros'，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'});
});

感谢上面的堆栈问题：
谢谢大家的帮助。
尝试将
更改为
？会发生什么http://localhost:4040/#/heroes
？@搜索：如果我只输入http://localhost:4040
-在本例中，显示仪表板页面。URL中显示的是http://localhost:4040/dashboard#/heroes
。无论我用什么来代替英雄，它都能做到这一点。例如，我可以说http://localhost:4040/blah
，仍然转到加载的默认页面，并在URL中显示：http://localhost:4040/dashboard#/blah
。所以，更接近我需要的，但还没有。
在做什么？@ErtySeidohl:在index.html文件中更改为
不会改变行为。