Угловой (8) Универсальный с облачными функциями firebase - не может соответствовать ни одному маршруту

ОБНОВЛЕНИЕ: я создал новый проект с каждым обновлением angular, и теперь на 8.2.0 он, похоже, работает. Просто следуйте приведенным ниже инструкциям, НО в настоящее время в webpack есть ошибка. Итак, после сборки «npm run build: ssr» откройте server.js в functions / dist и отредактируйте строки 3 и 7 следующим образом:

if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory(require("./server/main"));
else if(typeof define === 'function' && define.amd)
    define(["require(\"./server/main\")"], factory);
else if(typeof exports === 'object')
    exports["app"] = factory(require("./server/main"));
else
    root["app"] = factory(root["require(\"./server/main\")"]);

(перед: "factory (require (" require (\ "./ server / main \") "));")

БОЛЬШАЯ благодарность Мишель Да Рин Фьоретто за помощь мне с этим на "https://blog.daudr.me/ppain-angular-ssr/#comment-4605393279 ". Если вы столкнулись с той же проблемой, отправляйтесь туда и поблагодарите его за это.

У меня есть работающее веб-приложение магазина Angular (8), которое использует firebase. Но поскольку я не использую Angular-Universal, я не могу устанавливать теги title / meta на сайтах продуктов. Чтобы решить эту проблему, я попытался добавить angular-universal и развернуть приложение для облачных функций firebase, но как только firebase вступает во владение, никакие маршруты больше не могут быть сопоставлены.

Я следил за официальным руководством на angular.io, затем переключился на руководство блестящего Джеффа Деланэя из fireship.io ссылка на учебник и прочтите несколько статей по этой теме нравится этот. Я создал (несколько) новых приложений и пробовал неоднократно. Все работает нормально (кроме новой функции стрелки ленивой загрузки angular 8), пока сервер ssr-express обрабатывает запросы. «npm run build: ssr» с последующим «npm run serve: ssr» отлично работает, но как только код будет подготовлен для облачных функций firebase и «firebase serve» вступит во владение, «localhost: 5000» будет работать, но при открытии любой ссылки напрямую, как в примере с "/ about", в выводе консоли указано, что никакие маршруты не могут быть сопоставлены. Поскольку я пробовал официальную документацию и несколько статей среднего размера, это должна быть очень распространенная проблема, но я не смог найти здесь никаких вопросов по этой теме.

Поскольку я не вижу, как это можно будет просмотреть в stackblitz или где-либо еще, я попытаюсь описать (кратко), что я сделал, и показать соответствующий код там, где это необходимо.

tl; dr: (устарело) Сервер Firebase Github Repo

(в основном откройте сервер firebase, нажмите кнопку и нажмите f5)

Необходимые готовые:

ng new cloudfunctionsangularuniversal && cd cloudfunctionsangularuniversal
ng add @angular/fire
ng add @nguniversal/express-engine --clientProject cloudfunctionsangularuniversal
ng g c landing
ng g c ssrtesting

/src/app/app-routing.module.ts: обновить маршруты

//..
const routes: Routes = [
  { path: '', component: LandingComponent },
  { path: 'ssrtesting', component: SsrtestingComponent }
];

Поскольку я хочу использовать firebase в своем проекте, мне нужна переменная XMLHttpRequest

npm install ws xhr2 bufferutil utf-8-validate  -D

/server.ts: обновить сервер только что установленными пакетами

(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');
// ...

На этом этапе «npm run build: ssr» с последующим «npm run serve: ssr» запускает экспресс-сервер, который правильно обрабатывает все входящие запросы.

Но чтобы использовать приложение с firebase, необходимо внести несколько изменений.

Инициализировать firebase (выбрать функции и хостинг)

firebase init 

/firebase.json: переписать весь трафик в функцию.

//...
"hosting": {
  "public": "dist/browser",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ],
  "rewrites": [
    {
      "source": "**",
      "function": "ssr"
    }
  ]
},
//...

/server.ts: экспортировать приложение const, затем удалить вызов для прослушивания.

export const app = express();
// ...
// app.listen(PORT, () => {
//   console.log(`Node Express server listening on http://localhost:${PORT}`);
// });

/webpack.server.config.js: превратить ваше приложение в библиотеку.

// ...
output: {
    // Puts the output at the root of the dist folder
    path: path.join(__dirname, 'dist'),
    library: 'app',
    libraryTarget: 'umd',
    filename: '[name].js',
  },
// ...

/movedist.js: создайте помощник, который копирует приложение сборки из вашей папки «dist» в «functions / dist».

const fs = require('fs-extra');

(async() => {

    const src = './dist';
    const copy = './functions/dist';

    await fs.remove(copy);
    await fs.copy(src, copy);

})();

установить необходимый пакет

npm i --save fs-extra

/package.json: обновите команду сборки

//...
"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server && node movedist && cd functions && npm run build"
//...

Наконец, создайте используемое приложение /functions/src/index.ts

import * as functions from 'firebase-functions';
const universal = require(`${process.cwd()}/dist/server`).app;

export const ssr = functions.https.onRequest(universal);

Теперь беги

npm run build:ssr

Все должно быть готово, поэтому проверьте это с помощью

firebase serve

При открытии localhost: 5000 вроде все нормально. Но откройте его в окне инкогнито и откройте "localhost: 5000 / ssrtesting", и консоль выдаст вам

«ОШИБКА {Ошибка: не обнаружено (в обещании): ошибка: не удается сопоставить ни один маршрут. Сегмент URL: 'cloudfunctionsangularuniversal / us-central1 / ssr / ssrtesting'»

перед успешным рендерингом страницы. На сервере firebase этого не происходит. В сети он запускает ошибку 404.

Сервер Firebase Репозиторий Github

Любая помощь будет оценена по достоинству.