Encountering difficulties when attempting to load a module with the "js" extension in a TypeScript environment

When making a GET request with Systemjs, the extension .js is not being added to the URL.

These are my TypeScript Classes

customer.ts

import {Address} from "./Address";

export class Customer {
    private _customerName: string = "";
    public CustomerAddress: Address = new Address();
    public set CustomerName(value: string) {
        if (value.length == 0) {
            throw "Customer Name is required"; 
        }
        this._customerName = value;
    }
    public get CustomerName() {
        return this._customerName;
    }
    Validate(): boolean {
        return this._customerName != '';
    }
}

address.ts

export class Address {
    public Street1: string = "";
}

using the following Systemjs initialization code

System.config({
      defaultExtension: 'js',
});
System.import("Customer.js").then(function (exports) {
      var cust = new exports.Customer();
});

While Customer.js is loaded successfully, Address.js is not found.

The GET request for Address.js does not include the .js extension, resulting in the following error in the console:

GET http://localhost:65401/Address 404 (Not Found).

I have attempted to update the code in customer.ts to the following:

import {Address} from "./Address.js";

However, this syntax is incorrect and results in an error in VS2013.

Is there a way to instruct Systemjs to automatically add the extension ".js" to the GET request?

Thank you

Answer №1

The defaultExtension keyword is not a standalone configuration option. It should be nested under the packages directive, as shown in the SystemJS documentation here: https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#packages

This is why SystemJS is not recognizing it and failing to add the extension. To ensure that the extension is always added to every import path, you can create a single "global" package as follows:

SystemJS.config({
  packages: {
    '.': {
      defaultExtension: 'js'
    }
  }
});

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 process for configuring a registry for a namespaced package using yarn?

Experimenting with yarn as a substitute for npm has been quite interesting. With npm, we usually rely on both a private sinopia registry and the official repository for some namespaced packages, since sinopia doesn't support namespaces. My .npmrc fi ...

Inconsistent reliability of Loopback-context prompts the search for an alternative solution

After encountering some reliability issues with the loopback-context package, I decided to try an alternative approach. Instead of relying on setting the current user object in my middleware using loopback-context, I opted to fetch the accessToken from the ...

Guide to creating a unique React component for displaying a single popup upon clicking with the ability to pass props to it

As someone who is still learning React, I decided to challenge myself by creating a Jeopardy game using this framework. My current idea is to have a popup appear when a player clicks on a box on the Jeopardy board, displaying the clue associated with that ...

Configuring the "trust proxy" setting in Express for Node.js with CloudFront

I am utilizing an Express backend with AWS Cloudfront. How can I properly configure the trust proxy setting for AWS Cloud Front? app.set('trust proxy', function (ip) { if ( ???????????? ) return true; // trusted IPs else return false; }); A ...

Retrieving the data from a Material UI Slider control

I'm encountering an issue with retrieving the value property I assigned to a component. event.target.value is returning undefined. How can I successfully access the value of the component? My goal is for handlePlayersChange() to be able to handle dyn ...

Instructions for manipulating and displaying a source array from a child component using Vue

I have a parent component with an array that I display in the template. My goal is to click on a link that uses vue-router with a dynamic id attribute, and then open a new component displaying only the element of the array that corresponds to that id. Howe ...

Does a DOM API exist specifically for querying comment nodes within the document?

My document contains a debugging comment that appears as follows: <!--SERVER_TRACE {...}--> Is there a method to search the DOM and access this specific node? I would prefer a vanilla JavaScript solution, without relying on any external libraries. ...

How should dynamic route pages be properly managed in NextJS?

Working on my first project using NextJS, I'm curious about the proper approach to managing dynamic routing. I've set up a http://localhost:3000/trips route that shows a page with a list of cards representing different "trips": https://i.stack. ...

Tips for resolving flickering animations in CSS and JavaScript

Is it possible to dynamically set a scale and margin for an element in order to center it fluidly using the wheel event? I am aiming to achieve a smooth transition while also adjusting scroll position on the wrapping element in a fluid manner. In the prov ...

Turning HTML into an image with the power of JavaScript

Utilizing html2canvas to convert a div into an image, everything is functioning properly except for the Google font effect. The image shows how it eliminates the effect from the text. https://i.stack.imgur.com/k0Ln9.png Here is the code that I am using f ...

Switching from module.exports in Javascript to Typescript format

My Node-express code currently uses module.exports to export functions. As I am converting the code to TypeScript, I need to find out how to replace module.exports in typescript. Can you help me with this? ...

Repeated attempts to initiate ajax script failing to function

I am completely new to the world of Ajax, having just started learning about it a few days ago. Despite my lack of experience, I need to incorporate it into a form that I am creating for my employer. Unfortunately, I have been facing difficulties in getti ...

Inconsistencies observed during the native JSON import process in JavaScript

Encountered a strange behavior when loading a JSON file into JavaScript while working on a React project. Seeking an explanation and guidance on properly accessing data from the JSON data store. The JSON file contains product data: { "product ...

Python responding to an Ajax request using jQuery

Currently, I am experimenting with integrating a pre-built inline editor from the following source: https://github.com/wbotelhos/inplace Regrettably, the available support documentation is lacking and my expertise in Javascript, jQuery, or Ajax is limited ...

What causes the object to be updated with new values when I update reference variables in JavaScript?

Imagine having an object named x with values x = { a: 'abc', b: 'jkl' }, Next, I am assigning this object x to a new local variable y using var y = x. Now, when the value of var y changes as y.a = 'pqr', y.b = 'xyz&apos ...

Is there a way to execute a JavaScript function on a webpage using Selenium automation?

Here's an element on a website: <span class="log-out-ico" ng-click="logout()"> Instead of clicking it, I want to run the "logout()" script from selenium. Is that possible? If so, how can I do it? This is what I attempted: I ...

The attachment content disposition is failing to initiate the download dialog

While working on setting up a file download feature on my NodeJS server, I came across some unexpected behavior. I have a REST (express) API that utilizes an export data function to generate a CSV file on the server. To initiate the download of this file, ...

Unable to invoke a function in TypeScript from a Kendo template within the Kendo TreeList component

In my TypeScript file for class A, I am encountering an issue with the Kendo TreeList code. I am trying to call a function from the Kendo template. export class A{ drillDownDataSource: any; constructor() { this.GetStatutoryIncomeGrid ...

Which event occurs first for a4j:jsFunction, reRender or oncomplete?

After running a jsFunction, I want the javascript to execute once the re-rendering is completed. I assume that the "oncomplete" javascript function is triggered after the re-rendering process, but I'm not entirely certain. Any insights on this? Appre ...

Cannot assign border to an undefined element - JavaScript

Currently, I am attempting to validate some code using javascript. However, I am encountering a frustrating issue where I keep getting an "Uncaught TypeError: Cannot set property 'border' of undefined". Being relatively new to javascript, I ...