Typescript: Ways to fix the error 'rxjs/Rx does not have any exported member 'SubscriptionLike'

I'm attempting to replicate the steps outlined in this tutorial found here https://www.youtube.com/watch?v=gxCu5TEmxXE. However, upon running tsc -p, I encounter an error. Is there a specific import that I am missing?

ERROR:

node_modules/@angular/common/src/location/location.d.ts(1,10): error TS2305: Module '"...functions/node_modules/rxjs/Rx"' has no exported member 'SubscriptionLike'.

TS FILE

import "zone.js/dist/zone-node";
import * as functions from "firebase-functions";
import * as express from "express"
import { renderModuleFactory } from "@angular/platform-server"
import * as fs from "fs"

const document = fs.readFileSync(__dirname + "/dist-server/index.html", "utf8");
const AppServerModuleNgFactory = require(__dirname + "/dist-server/main.bundle");

const app = express();
app.get("**", (req, res) => {
    const url = req.path;
    renderModuleFactory(AppServerModuleNgFactory, { document, url }).then(html => {
        res.send(html);
    });
});
exports.post = functions.https.onRequest(app);

CONFIG

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015",
    "rootDir": ".",
    "outDir": "../functions"
  },
  "files": [
    "index.ts"
  ]
}

Answer №1

Encountering a similar issue led me to investigate further.

I followed a tutorial by djamware

Upon extensive research, I discovered that the Rxjs package installed according to the instructions in this tutorial is incompatible with Angular 6.

It turns out that Angular 6 is not compatible with RxJS 5.5, rather it requires RxJS 6.

npm i rxjs@6

Executing the above command in the CLI resolved the issue for me, and hopefully will do the same for you.

Answer №2

If you happen to peek into your package.json, you may notice a plethora of beta versions for the Angular packages. You have two options: downgrade to the official release version or, if necessary, stick with the beta version but make modifications in the location.d.ts file by replacing instances of SubcriptionLike with just Subscription. Keep in mind that this method is quite makeshift, as it gets overwritten every time you execute a npm install, and should only be utilized under special circumstances where working with the beta version is unavoidable. Here's an example snapshot of what your dependencies section in the package.json might resemble (though my setup is tailored towards Ionic):

"dependencies": {
  "@angular/cli": "^1.7.3",
  "@angular/common": "^5.2.9",
  "@angular/compiler": "^5.2.9",
  "@angular/compiler-cli": "^5.2.9",
  "@angular/core": "^5.2.9",
  "@angular/forms": "^5.2.9",
... (and so on)
}

Answer №3

Ensure you are using the most recent version of rxjs, which is 6.9.0. If there are any issues, be sure to update the rxjs package by running ng update rxjs

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

What is the best way to ensure that a class instance only receives the necessary properties?

In my code, I have a function that takes in an object called DataObject and uses certain properties from it to create instances of a class. To determine which data object items should be assigned to which class properties, I use mappings in the form of a ...

Eliminating duplicate data submissions with jQuery Ajax

Encountering an issue with my jQuery AJAX submission process. JavaScript: $('#myform').submit(function () { if (validateEvenInputs()) { $('#btnevent').attr('disabled', 'disabled'); function ...

Using a JavaScript class rather than an ID for toggling visibility

As a complete newbie to JavaScript, I've come across similar questions but I'm lost when it comes to coding - help needed! So here's the code I have so far, and I'm hoping someone can assist me. Currently, I have JavaScript set up to s ...

What are the steps for applying a Bootstrap class to an element?

I keep encountering this error in the console: Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('si col-md-4') contains HTML space characters, which are not valid in tokens. Below is a ...

Turning off form validation in AngularJS for a short period of time

Successfully implemented client side form validation using AngularJS, but now I want to test my server side validation by sending incorrect data. However, AngularJS is preventing me from doing so! Is there a way around this without disabling Javascript an ...

Exporting SVG to image in Ionic is successful on Android devices, but the image gets cut off when viewed on

I am facing an issue with exporting an SVG as a base64 encoded image and sending it to the server for storage on Google Cloud Storage. The process works fine on Android and in browsers, but fails when attempted on a physical device running IOS. On IOS, t ...

What is the purpose of the "modal-backdrop fade show" element remaining visible after the associated component is unmounted, and what is the best way to eliminate or disable this div?

Scenario I have a Vue component that includes a child component responsible for displaying a modal. Toggling the isShowModal boolean either through a button click or Vue devtools successfully displays and hides the modal as expected. However, upon tryin ...

Guide to setting up a datePicker in a cellEditorSelector

In my grid, I want to have different editors for different rows within the same column. The ag-Grid documentation provides information on how to achieve this using colDef.cellEditorSelector as a function: link I have successfully created unique editors fo ...

Using jQuery to specifically target elements of a specific class that are nested within another element

I am currently using a jQuery function that toggles a drop-down navigation menu by changing its class when clicked: $(function () { $('.nav-titles').on('click', function() { $('.nav-dropdown').toggleClass(& ...

Navigating through a JSON object in JavaScript by employing regular expressions

Is there a way to extract the "Value" of elements "Data1", "Data2", "Data3", "Data4" from a JSON object without resorting to regex? I've heard that using regex with JSON is not recommended. <script> abc = { "model": { ... } } </script> ...

Template for typed variable - `ng-template`

How can the parent component correctly identify the type of let-content that is coming from ngTemplateOutletContext? The current usage of {{content.type}} works as expected, but my IDE is showing: unresolved variable type Is there a way to specify the ...

Building conditionals in AngularJS expressions using if-then-else syntax

Is there a way to incorporate the ternary-operator (if-then-else construction) in an angularjs expression? For example, I have a function $scope.isExists(item) that should return a boolean value. I would like to do something like this: <div ng-repeater ...

Tips for refreshing a GET request within a Vue.js application

I am receiving data from my Rails API backend and I would like to automatically refresh that GET request every 15 seconds. This way, if there are any changes on the backend (for example, if a POST request is made to another route), it will reload and retri ...

The way an event can be outrun or vanish due to another event

let bar = new function(){ $scope.MessageSpan="Item added successfully";} When the Add button is clicked, the above function is invoked. However, if I want to hide this message when any other button is clicked, I would have to update the span text for all ...

Adjust the width of a div in Angular 6 based on a specified condition

I need to adjust the width of a div based on certain conditions. <div [ngStyle]="'width': selectedTab =='Home' ? '50%' : '100%'"> </div> The currently selected tab is stored in "selectedTab". There ...

Using the quote and saying "quotation marks"

Any ideas on how to approach this? This is driving me crazy: $toReturn .= " function addProd(pExists) { document.getElementById('products').innerHTML = \"<tr><td id='prod_n'><input type='text&apos ...

Using a single Angular component to dynamically load data based on the query string

I am curious if it is feasible to load data based on a query string. For instance, when the user clicks on the following link http://localhost:4200/earning/customers?type=archived, the data will be loaded using the same component CustomersComponent. Simila ...

My Ajax request in Javascript is encountering failure in Chrome due to AdBlock. What alternatives can I consider in this situation

Attempting to execute an ajax function $.ajax({ url: etsyURL, dataType: 'jsonp', success: function(data) { However, when running it on Chrome in a live environment, it fails due to adblock. I rely on javascript/jquery as my primary tools. Any ...

Avoid using `@typescript-eslint/no-floating-promises` when using a `const` function

Can anyone help me understand why the @typescript-eslint/no-floating-promises rule works with some async functions but not all? To my understanding, these two functions should be equivalent: const getUser = async (userId: string): Promise<User> => ...

Reducing HTML content to 20 words efficiently through the use of JS and VueJS

Currently in the process of developing a news feed using VueJS and have encountered an issue with rendering the content. Unfortunately, the API I am working with does not allow for easy customization to fit my specific needs. This API provides all the cont ...