When using http.get(), both Promise and Observable may encounter failures

I am facing an issue with my two simple services that should both return results from a REST API.

Initially, I started with using Promises but encountered a problem where toPromise() was not found, similar to the issue discussed here.

Then, I attempted to switch to Observables. However, I faced a similar problem where map() could not be found.

Here is a snippet of the code...

// Package.json
{
  "name": "mvc-angular-2",
  ...
}

// Typings.json
{
  ...
}

// Tsconfig.json
{
  ...
}

// systemjs.config.js
...
})(this);

// Main.ts
...

// App.component.ts
...

// Users.component.ts
...

// User.service.ts (Promise)
...

// Privilege.service.ts (Observable)
...

Lastly:

  • npm -v: 3.10.3
  • node -v: v6.3.0
  • Visual Studio 2015 Update 3

I have tried deleting the node_modules folder and rebuilding it, but to no avail.

I also attempted to build it outside Visual Studio by running a command like npm run tsc --rootDir .\app, which resulted in the following output:

...

Subsequently, I realized there was no file named app.ts. So, I instructed it to transpile a folder instead. Here is the file structure overview:

D:\projects\MVCAngular2\src\Client\
...\app\...
...\gulpfile.js
...\node_modules\[14.536 node_modules files]
...\package.json
...\Program.cs
...\Startup.cs
...\typings\...
...\web.config
...\wwwroot\...

Upon finding this helpful example utilizing identical versions to mine, working smoothly by transpiling scripts in the browser, I am puzzled as to what might be causing the issue.

If you have any insights or solutions, please do share.

Thank you, Carsten

Answer №1

Seems like there is an issue with your import statements. You've imported the Observable object but forgot to import the necessary operators. To fix this, make the following changes in your service files:

import '../rxjs-operators';

should be updated to:

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/catch';

Alternatively, you can use a more general import statement:

import 'rxjs/Rx';

Answer №2

The issue at hand is that the compiler tsc is unable to compile an entire folder on its own. It needs a specific file to work with.

If you want to compile everything within a folder, you'll need to use a build tool like gulp - check out https://www.npmjs.com/package/gulp-typescript or even better, webpack. I recommend starting with this setup: https://github.com/AngularClass/angular2-webpack-starter

I personally used this as a foundation for one of my company's projects, which is currently in production.

Alternatively, consider using smart IDEs like WebStorm, which can automatically compile all TypeScript files to JavaScript as you work.

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

Changing the background color dynamically of a table header in Angular Material

I have utilized the angular material table following this example. https://stackblitz.com/angular/jejeknenmgr?file=src%2Fapp%2Ftable-basic-example.ts In this case, I modified the heading color with the following CSS code. .mat-header-cell { backgrou ...

The functionality of VisualCode IntelliSense Jasmine Typings appears to be malfunctioning

After setting up jasmine typings in my project and saving them in the "index.d.ts" file, I encountered an issue when using expect('').toBeNaN in my tests. Only "toBe" was being displayed, nothing more. Below are the configuration files I am usin ...

Trigger a function in the parent component of Angular when hovering over an element, which then retrieves the value

I am trying to figure out why hovering over an item in a child component triggers a method from the parent component. Here is an example link you can check: example The parent component is sending items to the child component (list) like this: <app-lis ...

Learn the method for triggering events with a strongly-typed payload in Vue 3 Composition API and TypeScript

I'm currently exploring Vue 3 Composition API along with TypeScript, particularly focusing on emitting events with a strictly typed payload. There's an example provided below, but I'm unsure if it's the most effective way to achieve t ...

Error: Jest + Typescript does not recognize the "describe" function

When setting up Jest with ts-jest, I encountered the error "ReferenceError: describe is not defined" during runtime. Check out this minimal example for more information: https://github.com/PFight/jest-ts-describe-not-defined-problem I'm not sure what ...

Is it necessary to link event handlers to `this` when using TypeScript and React?

One issue I encountered was with a component's button handler method. If the onClick handler is not bound to this in the constructor or inline on the onClick itself, an error occurs because the context of the handleAdd method is not tied to the instan ...

There was an issue found at line 18 in the backend.service.d.ts file of the node_modules/angular-in-memory-web-api, showing error TS1086 which states that an accessor cannot be declared

I encountered this issue right after installing 'angular-in-memory-web-api'. import { InMemoryDbService } from "angular-in-memory-web-api"; and subsequently, the following error messages appeared: ERROR in node_modules/angular-in-memory-we ...

When maxSelectedItems is configured for multiple items, prevent further typing in the input field

After the maximum number of items has been selected in a multi select with maxSelectedItems, users should not be able to input any more text into the select field. Visit this link for demos ...

Incorporating mapboxgl-spiderifier into your Angular project: A step-by-step guide

I am currently working on an angular application that utilizes mapbox with the help of ngx-mapbox-gl. I am looking to integrate it with mapboxgl-spiderifier, but I'm facing an issue as it doesn't have typings and I'm unsure how to include it ...

Angular: controller's property has not been initialized

My small controller is responsible for binding a model to a UI and managing the UI popup using semantic principles (instructs semantic on when to display/hide the popup). export class MyController implements IController { popup: any | undefined onShow(con ...

Retrieve information from matSnackBar using openFromComponent

Hello there! As a newcomer to Angular, I am interested in retrieving data from matsnackbar. Is this something that can be achieved? apiName: string; this.snackBar.openFromComponent(CustomSnackbarComponent, { duration: 5000000, dat ...

Exploring the concept of inheritance and nested views within AngularJS

I've encountered a challenge while setting up nested views in AngularJS. Utilizing the ui-router library has been beneficial, but I'm facing issues with separate controllers for each view without proper inheritance between them. This results in h ...

Prevent Duplicate Service Instances in Angular

After doing some thorough research online, I've identified the root of my issue: multiple instances of a particular service are being created. I need assistance in pinpointing and rectifying this problem within my code. The secondary service is depen ...

Learning to implement the latest language features in JavaScript on older runtimes using TypeScript

Currently, I am faced with a dilemma in my TypeScript project involving the use of flatMap. The issue arises from the fact that this project needs to be compatible with Node.js versions as old as v10, which do not support flatMap. I had assumed that TypeS ...

Tips for setting up a websocket connection between angular-socketio and flask-socketio

As a newcomer to web sockets, I am currently working on implementing a web socket server using flask-socketio for the server and angular-socketio for the client-side. For the server side in Flask, this is the code snippet I am using: application.py @ ...

Use RxJS to ensure one observable waits for another observable to emit a non-null value

I am currently facing an issue with my setter function in TypeScript. In this setter, I assign a class member observable called systemAreasOptions$. The reason behind doing this in the setter is because it needs to wait for the observable mappedItem$ to ...

Steps for converting a tsx file into a js file in React

Currently, I am in the process of a React Project and have numerous tsx files that I aim to convert for utilization as JavaScript within my project. What would be the best approach to achieve this task? ...

Incorporate a stylish gradient background into react-chartjs-2

I am currently working on adding a gradient background with some transparency to a radar graph within a react component. So far, I have only found solutions that involve referencing a chartjs canvas in an html file, but none for implementing it directly in ...

When the browser is refreshed in Angular, the default root component will show up instead of the one specified in routes

I'm facing an issue with browser refresh on my Angular application. Every time I reload the page, either by refreshing the browser or entering a URL, the app redirects to the "/" route. Despite trying various solutions, none seemed to resolve the iss ...

The Angular firestore is showing an error stating that the property 'toDate' is not found in the 'Date' type

I am currently working on converting a timestamp object from Firestore to a Date object in TypeScript by utilizing the toDate() method. import { AngularFirestore } from '@angular/fire/firestore'; ... constructor(private database?: AngularFirestor ...