如何在Angular Universal中使用HTTP Node.js请求

我想将AngularJS项目移到Angular Universal。

在AngularJS中,我使用PHP进行$ http请求。 例如,我在服务中有以下代码:

this.getNewItems = function () { var request = $http({ method: "GET", url: "PHP/newitems.php", params: { number: "3" } }); return ( request.then(handleSuccess, handleError) ); }; 

现在,因为我使用通用的Node.js我想使用Node.js的Http请求。

所以在组件的构造函数中我应该使用这个构造:

 export class HomeComponent { mydata: any = {}; constructor(http:Http) { http.get('??????').subscribe(data => { this.mydata = data; }); } } 

如果我使用JSON文件,那么我发现了很多这样的例子:

 http.get('test.json').subscribe(data => { this.mydata = data; }); 

不过,我所有的数据都在现有的MySQL数据库中。 所以我想了解如何在数据库中获取我的数据。

我已经安装了npm MySql组件

npm安装mysql

我发现与Node.js的连接是通过设置:

  var mysql = require('mysql'); var connection = mysql.createConnection({ host : 'host', user : 'user', password : 'password', database : 'dbname' }); connection.connect(function(err) { // in case of error if(err){ console.log(err.code); console.log(err.fatal); } }); 

如果我在组件的构造函数中使用这个连接代码,那么有些错误会返回

 ERROR in ./~/mysql/lib/Connection.js Module not found: Error: Can't resolve 'net' 

那么如何将连接代码与http.get()请求集成呢?

非常感谢。

另外 :现在我来到这个(它涉及我的起始者项目Angular Universal https://github.com/angular/universal-starter ):

  1. 组件中使用下面的代码:

    导出类HomeComponent {

      mydata:any = []; constructor(public model: ModelService) { this.model.get('/api/getmydata') .subscribe(data => { this.mydata = data; console.log("My data: " + this.mydata); }); } } 

2.在后端/ api.ts我添加了:

 router.route('/getmydata') .get(function(req, res) { setTimeout(function() { res.json(Mydata); }, 0); } 

如果Mydata是一个JSON,那么所有工作正常,我收到的数据。 但是我想连接到MySQL数据库。 所以我添加一个连接代码:

 router.route('/getmydata') .get(function(req, res) { var mysql = require('mysql'); var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : 'root', database : 'mydatabase', port: '8889' }); connection.connect(function(err) { if (err) { console.log("Error connecting to DB: " + err); throw err; } }); ... } 

在这里,我收到错误:

 TypeError: Cannot read property 'on' of undefined at Protocol._enqueue (/Applications/MAMP/htdocs/Angular2/myproject/node_modules/mysql/lib/protocol/Protocol.js:152:5) ... 

然后

 Error connecting to DB: Error: Connection lost: The server closed the connection. 

如果有人知道如何修复与数据库的连接,我将非常感谢这个build议。

与目标绑定节点时,webpack提供了一个选项来定制节点环境。 默认configuration是:

 node: { console: false, global: true, process: true, Buffer: true, __filename: "mock", __dirname: "mock", setImmediate: true } 

正如你可以注意到的,webpack的默认节点环境configuration并不考虑诸如“net”之类的库。 将net库添加到服务器webpackconfiguration(针对节点)中的节点环境属性应该有帮助(可能是webpack.config.js):

 node: { // your existing props net: false } 

我select将该值设置为false 是试图遵循解决这些属性的代码 。 可能的值被logging在案,但没有足够的文件来说明每个值在自定义属性的情况下的含义。 基本上(据我了解), false意味着没有必要在浏览器版本或模拟“networking”,你需要模块本身,因为包运行在节点。

错误

 TypeError: Cannot read property 'on' of undefined ... 

如果Zone.js版本不正确或安装不正确,可能会出现此问题。

我发现我收到了警告:

 angular2-universal@2.1.0-rc.1 requires a peer of zone.js@~0.6.21 but none was installed. 

所以安装Zone.js的命令是:

 npm install zone.js@0.6.21 

现在我正在从MySQL数据库成功接收数据。

完整的代码是:

  router.route('/newvideos') .get(function(req, res) { var mysql = require('mysql'); var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : 'root', database : 'myDB', port: '8889' }); connection.connect(function(err) { if (err) { console.log("Error connecting to DB: " + err); throw err; } }); connection.query("SELECT * FROM table", function(err, rows, fields) { if (err) { console.log("Error executing query: " + err); throw err; } connection.end(); setTimeout(function() { res.json(rows); }, 0); }); }) 

然而!!! 我发现在这之后使用* ngFor的服务器渲染停止工作!

在HTML模板中,我只看到:

  <!--template bindings={}--> 

我玩简单的JSON返回这个错误,没有连接到数据库。 所以我发现,即使我返回JSON服务器渲染停止工作。 然后我安装了没有版本的Zone.js:

 npm install zone.js 

并再次开始返回JSON。 在这种情况下,服务器渲染开始正常工作 但是,当我开始连接到MySQL的第一个原始错误已经发生。

在我的情况下,我有一个连接到MySQL或服务器渲染。 不是一次两个。

如果有人知道如何解决这个问题,我会感激你的意见。 谢谢。

另外:我find了解决办法。 请参阅由于Angular中的Zone.js通用服务器呈现停止工作。 怎么修?