angular - 如何配置环回来服务 angular4 应用程序？

Question

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

现在我需要知道我是否可以在 3000 上提供这个 Angular 应用程序，就像从 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?

谢谢

Answer 1

如果您使用 ngserve 通过 Angular-cli 提供服务，Angular 仅在端口 4200 上运行。

您必须将 Angular middleware.json 文件选项指向 Angular2 应用程序的 dist 目录，或者将 dist 目录内容复制到环回“client”文件夹中。

所以它看起来像这样:

middleware.json

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

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

ng build

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

Loopback 为 Angular 应用程序提供服务，但是，当您尝试直接访问链接时，例如/blog/:id 换句话说，类似于/blog/f24382f3y23f9832 ，那么它将失败，因为环回不知道如何处理这些链接，即使环回客户端指向 Angular，但在直接查询这些链接时，Angular 尚未“引导”。

要解决此问题，您必须添加自定义中间件以将环回重定向到 Angular 索引，以便 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();
            }
        });
    };
};

这将重定向回您的 Angular 应用程序，并且 Angular 的路由器将正确路由 URL，同时仍由环回提供服务。

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

我已阅读 angular.io 文档，这是实现此目的的正确方法。看到这里angular.io docs 。阅读标题为“路由应用程序必须回退到index.html”的部分

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