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

我使用

angularcli

生成了

环回

项目和

Angular4

项目。 我的环回项目在端口

3000

提供html文件，我的Angular4项目在端口

4200

提供服务

现在我需要知道我是否可以在3000上提供这个angular应用程序，就像从环回目录提供静态文件一样

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

---

谢谢

我想您是在询问生产环境。我目前的Angular设置包括启用了

HTML5模式的ui路由器，因此为了让环回服务于静态内容（并避免引入Nginx实例或类似的东西），我必须从
middleware.json
（所有内容都在
“环回#静态”
键下）删除静态中间件并在
server/server.js
中选择性地将请求传递到其Api，或使用相应的文件进行响应，并假设我的客户端是在项目根目录下的
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 });
});

如果不想使用
HTML5模式
，只需将
环回#静态
指向构建客户端的目录，如中所述

对于我的开发环境，我只是告诉环回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'
        );
    }
})

Angular仅在端口4200上运行，前提是使用ng serve通过Angular cli为其提供服务

您必须将angular middleware.json文件选项指向angular2应用程序的dist目录，或将dist目录内容复制到环回“客户端”文件夹中

所以它看起来像这样：

中间件.json

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

dist目录是angular在运行时输出文件的地方

ng build

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

环回服务于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文档，这是实现这一点的正确方法。看这里。阅读标题为“路由应用程序必须回退到index.html”的部分

我在这里发表了一篇自己的帖子，我也遇到了类似的问题。
我花了整整一天的时间来解决这个问题。
实际上你只需要做两件事

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

“文件”：{
“环回#静态”：{
“参数”：“$！../client/”
}
}

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

删除或注释节点应用程序启动文件夹中root.js文件的代码
角4有什么解决办法吗？