Как настроить петлю для обслуживания приложения angular4?

Angular работает только на порту 4200, если вы обслуживаете его с помощью angular-cli, используя ng serve.

Вы должны указать параметр файлов angular middleware.json в каталог dist вашего приложения angular2 или скопировать содержимое каталога dist в папку «клиент» обратной связи.

Таким образом, это будет выглядеть примерно так:

промежуточное ПО.json

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

Каталог dist — это место, куда angular выводит ваши файлы при запуске.

ng build

Убедитесь, что в папке загрузки loopback нет файла router.js. Обычно это содержит некоторый код маршрута для перенаправления корневого URL-адреса на вывод состояния вашего API, таким образом, / приведет вас к вашему статусу API вместо index.html вашего углового приложения.

Однако Loopback обслуживает угловое приложение, когда вы пытаетесь напрямую получить доступ к ссылкам, например. /blog/:id, другими словами, что-то вроде /blog/f24382f3y23f9832, тогда произойдет сбой, потому что loopback не знает, как обрабатывать эти ссылки, и хотя клиент loopback указывает на angular, angular еще не «загрузился» при прямом запросе этих ссылок.

Чтобы исправить это, вам нужно будет добавить собственное промежуточное ПО для перенаправления обратной связи на ваш угловой индекс, чтобы маршрутизатор angular мог взять его оттуда.

Поэтому в файле middleware.json измените следующее:

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

Затем добавьте файл custom404.js внутрь /server/middleware/, чтобы полный путь был /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();
            }
        });
    };
};

Это перенаправит обратно в ваше угловое приложение, и угловой маршрутизатор будет правильно маршрутизировать URL-адрес, все еще обслуживаемый обратной связью.

Я использую path.resolve, чтобы ссылка сначала разрешалась в соответствии с нашим веб-путем, а не текущим каталогом, иначе это будет считаться вредоносным вызовом, и вы получите 403 ошибки.

Я прочитал документы angular.io, и это правильный способ реализовать это. См. здесь документы angular.io . Прочтите часть под названием «Маршрутизируемые приложения должны использовать index.html».

Я сделал здесь свой собственный пост Переписать запросы из loopback в angular2 (отказался выполнять скрипт, потому что его тип MIME ("text/html" ) не является исполняемым), где у меня была аналогичная проблема.

Я предполагаю, что вы спрашиваете о производственной среде. Моя текущая настройка Angular включает ui-router с включенным html5Mode, поэтому, чтобы Loopback обслуживал статический контент (и избегал введения экземпляра Nginx или чего-то подобного), мне пришлось удалить статическое промежуточное ПО из middleware.json (все под ключом "loopback#static") и заставить 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 });
});

Если вы не хотите использовать html5Mode, просто сделайте так, чтобы loopback#static указывало на каталог, в котором был собран ваш клиент, как описано в https://loopback.io/doc/en/lb3/Add-a-static-web-page.html .

Для моей среды разработки я просто говорю 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. Добавьте указанный ниже объект в файл middleware.json вашего приложения Node.

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

ПРИМЕЧАНИЕ. Вы также можете указать путь к папке «dist», а не к папке «client».

2. Удалите или прокомментируйте код файла root.js в загрузочной папке вашего приложения Node.