The powerful combination of Visual Studio 2015, TypeScript, Cordova, Angular 2, and System

I am encountering an issue with the loading of external modules using systemJS. I have created a small sample project for VS2015. Feel free to check out the code here: https://github.com/dbiele/TypeScript-Cordova-SystemJS

After building the project and attempting to view it in Ripple or BrowserSync, I keep receiving an error message referencing xhr_proxy. It seems that System is searching for the external file animate.js on registry.jspm.io instead of on the local server (localhost).

Any insights or suggestions? The code provided on GitHub is quite simple. Please note that this issue does not appear to be related to Cordova as I am running it in a browser and ripple.

https://i.sstatic.net/9MOVP.png

typescriptvisual-studio-2015visual-studio-cordovasystemjs

Answer №1

I uncovered the issue at hand. In TypeScript, there is no need for the .js extension when importing or exporting external modules. Here's an example to illustrate this:

TypeScript

import * as Animate from './animate';

For ES6, you would typically do:

import * as Animate from './animate.js';

To resolve this, simply include defaultJSExtensions: true in your system.config file.

Here's how it can be implemented:

System.config({
    baseURL: './scripts/',
    paths: { 'App': 'app.js' },
    defaultJSExtensions: true
});

I made the necessary updates to my VS2015 project code based on this solution and everything is functioning correctly now.

You can find the updated project code here: https://github.com/dbiele/TypeScript-Cordova-SystemJS

@DatenMetzgerX encountered a similar issue and shared more details about it here: https://github.com/systemjs/systemjs/issues/490

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 can typescript configurations be imported/exported in a node environment?

I'm encountering difficulties while trying to set up a TypeScript node project and import modules: Below is the structure of my project: /build /src main.ts ...

typescript

Error in Typescript: 'SyncClient' not found in Twilio

While working on my Ionic app, I encountered an issue every time I attempted to use the twilio-chat library in my project through npm install. The error consistently appeared in the .d.ts files. Here is how I imported it in my provider : import { Client ...

javascripttypescriptionic2twilio

Using a BehaviorSubject in conjunction with ngIf can rearrange the placement of elements

I am facing an issue with the placement of my HTML tags. Here is a snippet from my service: public showExportCsvModal = new BehaviorSubject<boolean>(false); public showDownloadModal = new BehaviorSubject<boolean>(false); And here is how it loo ...

angulartypescriptangular-ng-ifbehaviorsubject

What are the reasons behind memory leaks and decreased rendering speed when I exit and then reopen a React component (specifically Material-Table)?

I have been working on a basic React example for learning purposes, and I incorporated the use of material-table in one of my components. However, I noticed that each time I change pages and reopen the component (unmount and mount), the rendering speed of ...

javascriptreactjstypescriptrendermaterial-table

Expressjs - Error: Headers already sent to the client and cannot be set

After testing various solutions from others, I am still unable to resolve this error. My objective is to iterate through each item in the array sourced below: novel.ts export let indexList = (req: Request, res: Response) => { novel.getAllDocuments ...

node.jsmongodbtypescriptexpresspug

implementing firestore onsnapshotListner feature with pagination

I have a web application that needs real-time updates on a large collection of documents. However, due to the size of the collection, retrieving data without applying a limit is not feasible and inefficient. Therefore, it is crucial to implement a query li ...

typescriptgoogle-cloud-firestore

Dividing a JSON object into arrays containing keys and values within an Angular framework

I have a code snippet that involves receiving a JSON object of type Tenant from an API. I need to separate this object into keys and values within my function called tenantParser(). However, when I try to log displayedValues and displayedKeys, both show ...

angulartypescript

Executing a function in the constructor of an Angular4 component

I am currently facing an issue where I am attempting to invoke a modal function within the constructor in Angular 4. However, it seems that the function is not being called properly as it gets highlighted. Upon loading the page, no errors are logged and th ...

angulartypescriptconstructor

Simulating chained responses in Express using JEST

I am relatively new to using jest and typescript, currently working on creating a unit test for a controller function in jest import { Request, Response } from 'express'; const healthCheck = (_req: Request, _res: Response) => { const value ...

node.jstypescriptexpressjestjs

Inserting a pause between a trio of separate phrases

I am dealing with three string variables that are stacked on top of each other without any spacing. Is there a way to add something similar to a tag in the ts file instead of the template? Alternatively, can I input multiple values into my angular compo ...

htmlangulartypescript

"Exploring the process of creating a custom type by incorporating changes to an existing interface

One of the challenges I'm facing is defining an object based on a specific interface structure. The interface I have looks like this: interface Store { ReducerFoo : ReducerFooState; ReducerBar : ReducerBarState; ReducerTest : ReducerTestSt ...

typescript

Is there a way to implement error validation successfully in React Hook Form while utilizing template literals within the register function?

Utilizing React Hook Form along with Typescript, I am in the process of constructing a series of forms using a configuration object. Within this configuration object, there exists a key named prop which is of type string and is being passed to the register ...

reactjstypescriptreact-hook-form

Leveraging Fastify's preHandler middleware functionality

Implementing a middleware to validate user authentication before accessing the specified route. Encountering an issue where tokenService inside tokenController is showing as undefined when passing tokenController.authUser as a middleware. However, the met ...

node.jstypescriptmiddlewareclean-architecturefastify

What is the best way to shorten text in Angular?

I am looking to display smaller text on my website. I have considered creating a custom pipe to truncate strings, but in my situation it's not applicable. Here's what I'm dealing with: <p [innerHTML]="aboutUs"></p> Due to t ...

angulartypescript

Modify information in formArray

Let's take a look at this setup I have: Model: export class MapDetailModel{ id: number; lat: number; lon: number; alt: number; long: number; angle: number; distance?: number; pendenza?: number; } Html: <div clas ...

angulartypescriptangular2-formsangular-reactive-forms

"Implementing a retry feature for Angular http requests triggered by a button

Imagine having a situation where a component has a method that triggers an http request defined in a service. The observable is subscribed to within the component: Component: fetchData() { this.apiService.fetchDataFromServer().subscribe( respo ...

angulartypescriptrxjsangular-httpclient

Displaying all notifications while using parameters in TypeScript

I am trying to display all of my notifications in HTML. The value is returned in res = response.json();, but my website only shows one notification, similar to the example in https://i.sstatic.net/ECbyx.png Let's start with this code: public event ...

angulartypescript

Deactivate user session in LoopBack 4 API

Can anyone provide a clear example of an API endpoint for logging out that allows for deleting the token stored during login instead of relying on the web browser? It seems there is no documentation available on how LoopBack generates a default user when ...

typescriptloopback4

The variable "$" cannot be found within the current context - encountering TypeScript and jQuery within a module

Whenever I attempt to utilize jQuery within a class or module, I encounter an error: /// <reference path="../jquery.d.ts" /> element: jQuery; // all is good elementou: $; // all is fine class buggers{ private element: jQuery; // The nam ...

javascriptjquerytypescript

How can I determine the data type of an Array element contained within an Interface member?

Is there a way to extract the type of key3 in MyInterface2 and use it in key3Value, similar to key2Value? interface MyInterface { key1: { key2: string } } const key2Value: MyInterface['key1']['key2'] = 'Hi' / ...

arraystypescripttypes