Error message: It seems that in Angular Universal, the function readFile$().mergeMap is not recognized

Currently, I am integrating Angular Universal server-side rendering into an existing Angular 7 application. As part of this process, I am also attempting to make it work with Firebase. However, in the functions log within the Firebase console, I am encountering the following error:

 TypeError: readFile$(...).mergeMap is not a function
    at /user_code/node_modules/angular-universal-express-firebase/node_modules/angular-universal-express/index.js:36:14
    ...

I have configured my firebase.json file to redirect all routes to a function called ssrApp. When I run firebase deploy, no errors are displayed. Has anyone faced this issue before?

This is the content of my firebase.json file:

{
  "hosting": {
    "public": "dist",
    ...
  },
  "functions": {
    ...
  }
}

Here is the package.json within the root directory:

{
  ...
}

The angular.json file contains the project configuration:

{
  ...
}

The package.json file within the functions directory includes the necessary dependencies and scripts:

{
  ...
}

Finally, here is the index.ts file which configures the Angular Universal setup:

import * as angularUniversal from 'angular-universal-express-firebase';

export let ssrApp = angularUniversal.trigger({
  ...
});

Output of ng --version command:

Angular CLI: 7.3.1
Node: 10.0.0
OS: win32 x64
Angular: 7.2.4
...
angulartypescriptfirebaseangular-universal

Answer №1

UPDATED RESPONSE:

The issue appears to stem from the fact that 

angular-universal-express-firebase
is utilizing .mergeMap() on type observable, whereas with rxjs version 6 or higher, .pipe() should be used and .mergeMap() must be imported from rxjs/operators.

A more efficient solution would be to personally run an express app in your index.ts file and deploy it to a firebase cloud function, essentially taking full control of server operations without relying on 

angular-universal-express-firebase
.

Below is my index.ts code snippet:

import * as functions from 'firebase-functions';
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import {renderModuleFactory} from '@angular/platform-server';
import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
import * as express from 'express';
import {readFileSync} from 'fs';
import {enableProdMode} from '@angular/core';

const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./main');

enableProdMode();

const app = express();

const indexHtml = readFileSync(__dirname + '/index-server.html', 'utf-8').toString();

app.get('*.*', express.static(__dirname + '/dist', {
  maxAge: '1y'
}));

app.route('*').get((req, res) => {

  console.log(req.url);

  renderModuleFactory(AppServerModuleNgFactory, {
    document: indexHtml,
    url: req.url,
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }).then(html => {
    res.status(200).send(html);
  }).catch(err => {
    console.log(err);
    res.sendStatus(500);
  });

});

exports.ssrApp = functions.https.onRequest(app);

Ensure all required packages are installed and referenced correctly. Additionally, in your firebase.json configuration file, confirm that all requests are directed to the cloud function:

"rewrites": [
      {
        "source": "**",
        "function": "ssrApp"
      }
    ]

ORIGINAL RESPONSE:

The issue seems to arise from the fact that 

angular-universal-express-firebase
employs .mergeMap() with observables, necessitating the use of .pipe() for RxJS versions 6 and above, along with importing .mergeMap() from rxjs/operators.

After extensive research and experimentation, I found success by switching to the 

angular7-universal-express-firebase
package, which aligns with the usage of .pipe().

To address this, uninstall the existing 

angular-universal-express-firebase
and angular-universal-express packages, then install the following packages in your project's functions folder:

npm install angular7-universal-express-firebase

npm install angular7-universal-express

This solution may prove beneficial for others encountering similar challenges!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Interacting between Angular 2/4 components via a shared service

Two components and one shared service are being used in the scenario: The parent component is responsible for displaying all companies, while the child component contains a removeCompany method. The issue arises when the removeCompany method is called fr ...

angular

JavaScript placeholder-type expression

Hey there, I am a C++ developer who is venturing into the world of JavaScript. While exploring JavaScript syntax, I stumbled upon something that resembles templates in C++. For example, while going through RxJs tutorials, I came across this line of code: ...

javascripttypescriptflowtype

The Javascript IIFE prohibits accessing a variable before it has been initialized

I encountered an error message saying "Uncaught ReferenceError: Cannot access 'Q12' before initialization" while working in the changeCssClassIfOldAndNewValuesAreDifferent function. Any thoughts on what might be causing this issue? Thank you. ...

javascripttypescript

An issue has occurred: Cannot access the properties of an undefined object (specifically 'controls')

I encountered an error message stating "TypeError: Cannot read property 'controls' of undefined" in the code that I am not familiar with. My goal is to identify the source of this error. Below is the HTML code snippet from my webpage: <div ...

javascriptangular

Unable to successfully transmit the email containing user modifications

I'm currently exploring the most efficient method to send an email containing user profile changes using Firebase Cloud Functions and JavaScript. Each user profile consists of more than 20 fields, and I am looking for a simple way to track only the sp ...

node.jsfirebasegoogle-cloud-platformgoogle-cloud-firestoregoogle-cloud-functions

Manipulating and inserting objects into an array using React and Typescript with an undefined type

As I embark on my TypeScript journey in React, I decided to test my knowledge by creating a simple Todo App. Everything seems to be working fine except for one issue! After adding a new task and hovering over it, I received the following error message (tr ...

javascriptreactjstypescript

Tips for inserting an element with a background color into an email using variables

I have encountered an issue while trying to send an email that includes an element from my component. The element is passed from Angular to C# and then sent to the customer. Here is the element: https://i.sstatic.net/2ky1b.png Everything looks good in ...

javascripthtmlcssangular

What is the best way to set up the --public-host for operating an Angular universal app in conjunction with an Ngin

Looking to implement HMR for a universal app, I want to confirm if it is possible. I have successfully set up and run an Angular 8 application using the default "ng new" command. To run it behind a reverse proxy, I modified npm start as follows: e.g. { " ...

node.jsangularexpress

Is it possible for a React selector to retrieve a particular data type?

As a newcomer to React and Typescript, I am currently exploring whether a selector can be configured to return a custom type. Below is a basic selector that returns a user of type Map<string, any>: selectors/user.ts import { createSelector } from ...

reactjstypescriptselector

How to update an Angular 2 component using a shared service

My question is regarding updating components in Angular 4. The layout of my page is as follows: Product Component Product Filter Component Product List Component I am looking to link the Product Filter and Product List components so that when a user c ...

angulartypescript

After defining Partial<T>, encountering an error trying to access an undefined property is unexpected

In my function, I am attempting to standardize certain values by specifying the whole function type as Partial. However, despite declaring the interaction variable as Partial Type, I keep encountering the error message saying "Cannot read property endTime ...

typescript

Guide for comparing dates between Firebase and the current date using Laravel

As someone who is new to using both Laravel and Firebase, I am struggling with comparing dates in my Firebase database. Specifically, I need to check if the date stored in Firebase is greater than or equal to the current date. The code snippet below is wha ...

phplaravelfirebasedatetimegoogle-cloud-firestore

Implementing the Authorize tag in the HomeController of an ASP.NET Core Angular application with the Angular Single Page Application template, incorporating IdentityServer4

After utilizing the latest yeoman template for an ASP.NET Core Angular application, I integrated IdentityServer4 and created a client for the MVC application within it. // OpenID Connect implicit flow client (MVC) new Client { ...

asp.netangularasp.net-coreasp.net-identityidentityserver4

Error: The method 'replace' is not a valid function for the specified

Something strange happened to my DatePicker today. All of a sudden, when I try to open it, the entire DatePicker appears white and I'm getting this error: > ERROR Error: Uncaught (in promise): TypeError: format.replace is not a function TypeError: ...

angulartypescripthttpdatepicker

Unable to utilize class method via a proxy object

Issue: Why can't I access a class method through a proxy object? TypeError: sth.getNumber is not a function Prior to this error, the method was accessed like a property as indicated by the "get" log in the terminal. I am uncertain about the cause of ...

javascriptnode.jstypescript

Is it possible to use null and Infinity interchangeably in JavaScript?

I've declared a default options object with a max set to Infinity: let RANGE_DEFAULT_OPTIONS: any = { min: 0, max: Infinity }; console.log(RANGE_DEFAULT_OPTIONS); // {min: 0, max: null} Surprisingly, when the RANGE_DEFAULT_OPTIONS object is logged, i ...

javascripttypescript

What is the syntax for declaring a variable as a string or a function with parameters?

Is it possible to define a variable in TypeScript like a string or as a Function, but with specific parameters? I am aware of how to define a string actionGetData: string; and a function actionLoaded?(event: any, ui: any): void;, but when I try to define ...

typescripttypescript-typings

Dropdown with no selected option

Having some trouble with the p-dropdown element in Angular5 and primeng library. Specifically, when dealing with a large entity called Consignment that has multiple fields, I notice that the selected values on several p-dropdown elements (in this case, the ...

angulardropdownprimeng

Flipping the Observable List in Angularfire2

Currently, I have implemented the following code to reverse the list: this.items = this.db.list('/privacy').map( (array) => {return array.reverse()} ) as FirebaseListObservable<any[]>; When displaying the list, I call it like this: &l ...

angularfirebaseionic2real-timeangularfire2

Is it feasible to develop a TypeScript module in npm that serves as a dual-purpose tool, functioning as both a command line utility

My goal is to develop an npm TypeScript module that serves dual purposes - acting as a command line utility and exporting methods for use in other modules. The issue arises when the module intended for use as a command line utility requires a node shebang ...

typescriptnpmcommand-line-toolnpm-package