如何在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 ):
-
在组件中使用下面的代码:
导出类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通用服务器呈现停止工作。 怎么修?