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

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

2 голосов
/ 04 июля 2019

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

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

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

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, несколько чанges необходимы.

Init 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',
  },
// ...

/ Moveist.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 

//...
"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", и консоль выдаст вам

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

перед успешным отображением страницы.Этого не происходит на сервере Firebase, хотя.В сети он запускает 404.

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

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

...