Question

我使用LoopBack生成了Angular4项目和angular-cli项目。我的LoopBack项目在端口3000提供html文件，我的Angular4项目在4200提供。

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

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

由于

Answer 1

只有在使用ng-serve使用angular-cli为角色服务时，Angular才会在端口4200上运行。

你必须将你的angular middleware.json文件选项指向你的angular2 app的 dist 目录，或者将你的dist目录内容复制到你的loopback＆＃34; client＆＃34;文件夹中。

所以它看起来像这样：

<强> middleware.json

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

dist 目录是运行

时angular输出文件的位置

ng build

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

当您尝试直接访问链接时，Loopback会为角度应用提供服务，例如/ blog /：id换句话说就像/ blog / f24382f3y23f9832那样它会失败，因为loopback不知道如何处理这些链接，即使loopback客户端指向angular，angular还没有＆＃34; bootstrapped＆＃34;直接查询这些链接时。

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

因此，在 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。阅读标题为＆＃34的部分;路由的应用必须回退到index.html＆＃34;

我在Rewrite requests from loopback to angular2 (Refused to execute script because its MIME type ('text/html') is not executable)发了一个我自己的帖子，我遇到了类似的问题。

Answer 2

我假设您正在询问生产环境。我当前的Angular设置包括启用了html5Mode的ui-router，所以要让Loopback提供静态内容（并避免引入Nginx实例或类似的东西）我必须从{{1}中删除静态中间件}（middleware.json键下的所有内容）和make loopback有选择地将请求传递给其Api或使用相应的文件进行响应，"loopback#static"并假设我的客户端是在项目＆＃39下的server/server.js中构建的; s root：

client-dist

如果您不想使用const staticRoot = path.resolve(__dirname, '..', 'client-dist'); app.all('/*', function(req, res, next) { // Everything starting with /api passes through if (req.url.startsWith('/api')) { return next(); } let isAsset = req.url.match(/\/(.*\.(js|css|map|png|svg|jpg|xlsx))\??/); if (isAsset) { return res.sendFile(isAsset[1], {root: staticRoot }); } // Just send the index.html for other files to support HTML5Mode res.sendFile('index.html', { root: staticRoot }); });，只需将html5Mode指向构建客户端的目录，就像https://loopback.io/doc/en/lb3/Add-a-static-web-page.html中所述。

对于我的开发环境，我只是告诉Loopback SDK使用loopback#static：

localhost:3000

Answer 3

我花了一整天的时间解决此问题。实际上，您只需要做两件事。

在节点应用程序的middleware.json文件中添加以下对象。

“文件”：{ “ loopback＃static”：{ “ params”：“ $！../ client /” } }

注意：您还可以提供“ dist”文件夹的路径，而不是“ client”文件夹的路径。

删除或注释节点应用程序的启动文件夹中的root.js文件的代码。

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

3 个答案: