Encountering a Problem with Angular 2 RC HTTP_PROVIDERS

I recently upgraded my Angular 2 application to the RC version. Everything was working smoothly until I included HTTP_PROVIDER and created a service.ts file.

However, now I am encountering an error:

(index):14 Error: SyntaxError: Unexpected token <(…)

I have been unable to identify the root cause of this issue. Can anyone offer assistance?

Below is the code snippet from my service.ts file:

    /**
 * Created by Adjoa on 5/29/2016.
 */
import {Injectable} from  "@angular/core";
import {Http,Headers,HTTP_PROVIDERS} from "@angular/http";
import { Headers, RequestOptions } from '@angular/http';

@Injectable()

export class SignInService {
    constructor(private _http: Http){}

    postData(data:any){
        const body = JSON.stringify(data);
        const headers= new Headers();
        headers.append('Content-Type','application/json');
        return this._http.post('https://testing-angular-2.firebaseio.com/datatest.json', body, {headers:headers});
    }
}

Answer №1

Oftentimes, the error message you are seeing is a result of SystemJS being unable to load a specific module, triggering a 404 error.

It appears that you may have overlooked adding the @angular/http entry to your SystemJS configuration:

var map = {
  'app': 'app', // 'dist',
  'rxjs': 'node_modules/rxjs',
  '@angular': 'node_modules/@angular'
};

var packages = {
  'app': { main: 'main.js', defaultExtension: 'js' },
  'rxjs': { defaultExtension: 'js' }
};

var packageNames = [
  '@angular/common',
  '@angular/compiler',
  '@angular/core',
  '@angular/http', // <------
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/router',
  '@angular/router-deprecated',
  '@angular/testing',
  '@angular/upgrade',
];

packageNames.forEach(function(pkgName) {
  packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

var config = {
  map: map,
  packages: packages
}

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

How to integrate custom plugins like Appsee or UXCAM into your Ionic 2 application

Struggling to integrate either Appsee or UXcam into my project. I attempted to import the plugin like this, but it didn't work: // import { Appsee } from '@ionic-native/appsee'; I read somewhere that you need to declare the variable for Ty ...

NestJS Exporting: Establishing a connection for PostgreSQL multi tenancy

I have been working on implementing a multi tenancy architecture using postgres. The functionality is all in place within the tenant service, but now I need to import this connection into a different module called shops. Can anyone provide guidance on how ...

Transform string enum type into a union type comprising enum values

Is there a way to obtain a union type from a typescript string enum? enum MyEnum { A = 'a', // The values are different from the keys, so keyof will not provide a solution. B = 'b', } When working with an enum type like the one sh ...

The unique text: "Override default functionality of NextUI Pagination's DOTS PaginationItemType when customizing renderItem functionality

When I utilize the renderItem function for the Pagination component and omit the checks for PaginationItemType.DOTS, it seems to override the default functionality of the dots (such as the forward icon displaying on hover and the ability to jump to a speci ...

Angular 2: Applying class to td element when clicked

I am working with a table structured like this <table> <tbody> <tr *ngFor="let row of createRange(seats.theatreDimension.rowNum)"> <td [ngClass]="{'reserved': isReserved(row, seat)}" id={{row}}_{{sea ...

Is there a way to detect changes in a Service variable within an Angular component?

One of my components contains a button that activates the showSummary() function when clicked, which then calls a service named Appraisal-summary.service.ts that includes a method called calc(). showSummary(appraisal) { this.summaryService.calc(appraisal ...

How to host an Angular 2 application on IIS-10 without using ASP.NET Core

I've managed to create a plane angular-2 application using webpack in Visual Studio 2015 and now I'm looking to deploy it on IIS-10. Since I didn't use the ASP.NET Core template for this project, I need guidance on how to properly deploy thi ...

Why is it that when using the same Angular project and packages on different computers, errors only occur on one of them?

In my professional setup, I have the following installed: Windows 7 Visual studio 2015 (with typescript 2 installed) Resharper 2016.3.2 npm version 3.10.10 Node v 6.10.0 These are the global packages installed: npm -g list --depth=0 +-- @angular/<a ...

Using GraphQL in React to access a specific field

Here is the code snippet I am working with: interface MutationProps { username: string; Mutation: any; } export const UseCustomMutation: React.FC<MutationProps> | any = (username: any, Mutation: DocumentNode ) => { const [functi ...

When attempting to build a production version of an Angular Ionic Capacitor project, a TypeError occurred stating that it cannot read the property 'updateClassDeclaration'

A short while back, I didn't encounter this error, but after executing npx audit fix --force, I started getting this error when running npm run build in my Ionic capacitor project: Module build failed (from ./node_modules/@angular-devkit/build-angular ...

Having trouble retrieving the value of an HTML input field using form.value in Angular 5?

I am currently working with Angular 5 Within my HTML, I am dynamically populating the value of an input field using: <input type="number" class="form-control" id="unitCost" name="unitCost" [(ngModel)]="unitCost" placeholder="Average Unit Price"> ...

What is the process of inserting a sparkline chart into a Kendo Angular grid?

I am attempting to display a bullet chart in the first column of my grid. <kendo-grid-column> <ng-template kendoChartSeriesTooltipTemplate let-value="value"> <div> <kendo-sparkline [data]="bulletData" type="bullet" [ ...

What is the reason behind Rollup flagging code-splitting issues even though I am not implementing code-splitting?

In my rollup.config.js file, I have only one output entry defined as follows: export default { input: './src/Index.tsx', output: { dir: './myBundle/bundle', format: 'iife', sourcemap: true, }, plugins: [ ...

Is it possible to have Angular and Node.JS Express running on the same port?

It seems like I may have a duplicated question, but I'm struggling to figure out how to properly configure and run the frontend and backend together. I've looked into solutions on this and this questions, but I'm still confused. Currently, ...

Resolving the global provider in Angular2 Typescript with the help of an Interface

In the realm of my Angular2 application, I have two essential services called WebStorageService and MobileStorageService, both of which impeccably implement an interface known as IStorageService. Interestingly, in my magnificent main.component, I elegantly ...

Is it possible for a node and @angular/cli based application to function without an internet connection?

As a newcomer to the world of angular/cli and node, I am eager to build an application using Angular and deploy it to an environment where all external communication is blocked by a firewall. In this restricted setting, even accessing search engines is imp ...

Jest encountered a syntax error due to an unexpected token <

When attempting to run a test using jest with a typescript preprocessor, I encountered the following error: var component = react_test_renderer_1["default"].create(<jumbotron_1["default"] />); ...

I'm looking to convert this typescript function to return an array with strong typing instead of just a plain string[]

I am currently in the process of converting a JavaScript function to TypeScript. Originally, I believed that the type of the variable hi would be ('s'|'bb')[], but it turned out to be string[]. Is there a way for TypeScript to automatic ...

How can I update a value using a specific key in Angular?

So, I have a string value that I need to pass to another function. For instance, if the string is 'eng', I want it to be converted to 'en'. I'm looking for a solution that does not involve using slice or if statements. I attempted ...

Click to Rotate Angular Chevron

Is it possible to animate the rotation of a chevron icon from left-facing to right-facing using Angular? CSS: .rotate-chevron { transition: .1s linear; } HTML: <button [class.button-open]="!slideOpen" [class.button-close]="slideOpe ...