如何配置loopback以服务angular4 App？

I have generated a LoopBack project and Angular4 project using angular-cli. My LoopBack project serves html files at port 3000 and my Angular4 project is being served at 4200.

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

Now I need to know if I can serve this angular app on 3000 just like serving static files from LoopBack directory?

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

What I am trying to ask is if it is possible to use LoopBack server to serve Angular4 app just like it serves Angularjs app?

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

Thanks

谢谢

2 个解决方案

#1

Angular only runs on port 4200 if you serve it with the angular-cli using ng serve.

如果使用ng-serve为angular-cli提供Angular，则Angular仅在端口4200上运行。

You have to point your angular middleware.json files option to your dist directory of your angular2 app or copy your dist directory contents into your loopback "client" folder.

您必须将角度middleware.json文件选项指向angular2应用程序的dist目录，或将dist目录内容复制到loopback“client”文件夹中。

So it will look something like this :

所以它看起来像这样：

middleware.json

middleware.json

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

The dist directory is where angular outputs your files when you run

dist目录是运行时angular输出文件的位置

ng build

Make sure you don't have a router.js file in your loopback boot folder. This usually holds some route code to redirect the root url to a status output of your api, thus / will take you to your api status instead of your angular app's index.html.

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

Loopback serves the angular app, however, when you try to access the links directly, e.g. /blog/:id in other words something like /blog/f24382f3y23f9832 then it will fail because loopback does not know how to handle those links and even though loopback client points to angular, angular has not yet "bootstrapped" when querying those links directly.

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

To fix this, you will have to add custom middleware to redirect loopback to your angular index so that angular's router can take it from there.

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

So in your middleware.json file, change the following :

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

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

Then add a file custom404.js inside /server/middleware/ so that the full path is /server/middleware/custom404.js . If the middleware directory does not exist, create it.

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

Then inside the custom404.js file :

然后在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();
            }
        });
    };
};

This will redirect back to your angular app and angular's router will route the url correctly while still being served by loopback.

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

I use path.resolve so that the link is first resolved according to our web path and not the current directory, else it will be considered as a malicious call and you will receive 403 errors.

我使用path.resolve，以便首先根据我们的Web路径而不是当前目录解析链接，否则它将被视为恶意调用，您将收到403错误。

I have read the angular.io docs and this is the correct way to implement this. See here angular.io docs . Read the part that is titled "Routed apps must fallback to index.html"

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

I have made a post of my own here Rewrite requests from loopback to angular2 (Refused to execute script because its MIME type ('text/html') is not executable) where I had a similar problem.

我在这里做了一个帖子我在这里重写了从loopback到angular2的请求（拒绝执行脚本，因为它的MIME类型（'text / html'）不可执行）我遇到了类似的问题。

#2

I'm assuming you're asking about a production environment. My current Angular setup includes ui-router with html5Mode enabled, so to have Loopback serve static content (and avoiding to introduce an Nginx instance or something similar to do so) I had to remove the static middleware from middleware.json (everything under "loopback#static" key) and make loopback selectively pass through requests to its Api or respond with the corresponding file, in server/server.js and assuming my client was built in client-dist under project's root:

我假设你在询问生产环境。我当前的Angular设置包括启用了html5Mode的ui-router，所以要让Loopback提供静态内容（并避免引入Nginx实例或类似的东西）我必须从middleware.json中删除静态中间件（所有内容都在“loopback”下#static“key”并使loopback有选择地将请求传递给它的Api或者使用相应的文件进行响应，在server / server.js中并假设我的客户端是在项目根目录下的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 });
});

If you don't want to use html5Mode, just make loopback#static point to the directory where your client was built, just as described in https://loopback.io/doc/en/lb3/Add-a-static-web-page.html .

如果您不想使用html5Mode，只需将loopback＃静态指向构建客户端的目录，如https://loopback.io/doc/en/lb3/Add-a-static-web中所述。 -page.html。

For my development environment I just tell the Loopback SDK to use localhost:3000:

对于我的开发环境，我只是告诉Loopback SDK使用localhost：3000：

.config(function(LoopBackResourceProvider, $windowProvider) {
    'ngInject';
    var $window = $windowProvider.$get();
    if ([4200].includes(parseInt($window.location.port, 10))) {
        LoopBackResourceProvider.setUrlBase(
            'http://' + $window.location.hostname + ':3000/api'
        );
    }
})

#1