2

我想将 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 与 Universal 一起使用时，我想将 Http 请求与 Node.js 一起使用。

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

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.在backend/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.

如果有人知道如何修复与数据库的连接，我将非常感谢您的建议。

4

2 回答 2

1

当以 node 为 target 捆绑时，webpack 提供了自定义 node 环境的选项。默认配置是： 

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

如您所见，webpack 的默认节点环境配置并未考虑诸如“net”之类的库。在服务器 webpack 配置（针对节点）中将 net 库添加到节点环境属性应该会有所帮助（可能是 webpack.config.js）：

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

我选择将值设置为的原因false 是试图遵循解析这些属性的代码。可能的值已记录在案，但没有足够的文档说明每个值在自定义属性的情况下的含义。基本上（据我了解），false意味着不需要浏览器版本或“网络”模拟，您需要模块本身，因为包在节点中运行。

于 2017-02-26T12:23:53.817 回答
0

错误

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，要么连接到服务器渲染。不是同时两个。

如果有人知道如何解决这个问题，我将不胜感激。谢谢你。

补充：我找到了解决方案。请参阅由于 Angular Universal 服务器渲染中的 Zone.js 停止工作。怎么修？

于 2017-03-05T20:56:45.780 回答