如何配置loopback来为angular4 App提供服务？

Question

我已经使用生成了一个LoopBack项目和Angular4项目angular-cli.我的LoopBack项目在端口提供html文件,3000我的Angular4项目正在服务于4200.

现在我需要知道我是否可以在3000上提供这个角度应用,就像从LoopBack目录提供静态文件一样？

我想问的是,是否有可能使用LoopBack服务器来提供Angular4应用程序就像它服务Angularjs应用程序一样？

谢谢

Answer 1

如果使用ng-serve使用angular-cli,Angular仅在端口4200上运行.

您必须将angular的middleware.json文件选项指向angular2应用程序的dist目录,或将dist目录内容复制到loopback"client"文件夹中.

所以它看起来像这样:

middleware.json

   .
   .
    "files": {
        "loopback#static": {
          "params": "$!../client/"
        }
      }
   .
   .

该DIST目录是当您运行角度输出文件

ng build

确保loopback boot文件夹中没有router.js文件.这通常包含一些路由代码,用于将根URL重定向到api的状态输出,因此/将​​带您进入api状态而不是角度应用程序的index.html.

Loopback服务于角度应用程序,但是,当你尝试直接访问链接时,例如/ blog /:id,换句话说就像/ blog/f24382f3y23f9832那样它会失败,因为loopback不知道如何处理这些链接,即使环回当直接查询这些链接时,客户端指向angular,angular尚未"bootstrapped".

要解决此问题,您必须添加自定义中间件以将环回重定向到角度索引,以便angular的路由器可以从那里获取它.

因此,在您的middleware.json文件中,更改以下内容:

"final": {
    "./middleware/custom404": {}
    }

然后在/ server/middleware /中添加一个文件custom404.js,以便完整路径为/server/middleware/custom404.js.如果中间件目录不存在,请创建它.

然后在custom404.js文件中:

'use strict';
module.exports = function () {
    var path = require('path');
    return function urlNotFound(req, res, next) {
        let angular_index = path.resolve('client/index.html');
        res.sendFile(angular_index, function (err) {
            if (err) {
                console.error(err);
                res.status(err.status).end();
            }
        });
    };
};

这将重定向回您的角度应用程序,角度的路由器将正确路由网址,同时仍然由环回服务.

我使用path.resolve这样的链接首先根据我们的网络路径解决,而不是当前目录,否则它将被视为恶意电话,您将收到403错误.

我已经阅读了angular.io文档,这是实现它的正确方法.请参见angular.io docs.阅读标题为"路由的应用必须回退到index.html"的部分

我在这里做了一个帖子从环回到angular2重写请求(拒绝执行脚本,因为它的MIME类型('text/html')不可执行)我遇到了类似的问题.