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

Converting JSON data from one structure to a different format

Could you assist me in transforming this JSON data into the desired format specified in the result section? [ { name: "FieldData[FirstName][Operator]", value: "=" } { name: "FieldData[FirstName][Value]", value: "test& ...

Attempting to execute JavaScript within HTML files that have been incorporated using Angular

My website has a menu designed in HTML, and instead of manually adding it to each page (which would make updating changes tedious), I am using Angular to include it dynamically (<div ng-include="menu.html"></div>). I've got some JavaScrip ...

The operation to set a nickname in Discord.js was unsuccessful due to insufficient permissions

Recently, I started using discord.js to create a simple bot. Whenever I try to change the nickname by calling message.member.setNickname("Another Nickname").then(console.log, console.log); I receive the following error message: { name: ' ...

The Shell Application is not refreshing React HtmlElement Micro Front end

I am currently facing an issue when trying to inject the following React MFE into another Angular shell application. The MFE loads successfully the first time, but if it is hidden or removed from the DOM and then reloaded, it fails to load. Could you plea ...

Ways to dynamically incorporate input fields into a form

My current project involves managing an Asset Management system for a company with multiple locations. This system has the capability to return unused asset items back to storage. I am faced with the task of returning a large number of items, which requi ...

Store the Ajax response in localStorage and convert it into an object for easy retrieval and manipulation

I'm currently working on an Ajax request that retrieves JSON data from the server and then stores it in localStorage for use in my application. However, I feel like my current code may not be the most efficient way to accomplish this task, as I have t ...

Feeling puzzled about the next() function in Node.js?

https://github.com/hwz/chirp/blob/master/module-5/completed/routes/api.js function isAuthenticated (req, res, next) { // If the user is authenticated in the session, call the next() to proceed to the next request handler // Passport adds this met ...

Submit a Post request with a file and JSON information included

I'm encountering an issue while trying to pass files with a JSON object. It seems like there might be an error in the controller where the 'consumes' and 'produces' declarations are possibly incorrect. I need assistance on how to a ...

Is it possible to access a comprehensive list of all the elements that are currently available?

Is there a way to retrieve all HTML tag names that are supported by the browser for my web application? I want it to be displayed like this: console.log(getAllElements()) //[a, abbr, acronym, address, applet, area, base, ...] ...

Directive customization through comprehension expressions

Python is where I spend a lot of my time, so I'm really drawn to the comprehension_expression syntax within Angular's ngOptions. However, I would love to see this syntax extend to other inputs, such as with an ng-list. For instance, let's s ...

Display a fancy slideshow that transitions to five new images when the last one is reached

Here is a screenshot of my issue: https://i.stack.imgur.com/duhzn.png Incorporating Bootstrap 3 and FancyBox, I am facing an issue with displaying images in rows. When I reach the last image, clicking on the right arrow should result in sliding to anothe ...

What potential problem is arising from Jest's use of "transformIgnorePatterns" and how does it impact importing scoped CSS in a React application?

Currently facing a challenge with Jest testing in my React application following the addition of transformIgnorePatterns to the Jest settings. The default settings I included in the "jest" section of the root package.json file are as follows: "transfo ...

Guide on displaying ajax data using PHP

I'm attempting to display the user-entered data by using AJAX to transfer it and then trying to print or echo it with PHP, but I'm having trouble getting it to work. enter code here Here is my code: <html> <head> <title> ...

Utilizing JavaScript to dynamically update the user interface after submitting a form using jQuery

I am working on implementing an Input element that triggers a form submission: <input type="submit" value="Download" id="downloadButton" class="btn-download" /> The specific requirement is for the button to first execute a javascript function and t ...

Step-by-step guide to implementing a month and year date-picker in Mozilla Firefox

I'm looking to create input fields where users can add the month and year. I tried using the code below, but unfortunately Mozilla Firefox doesn't support it. <input type="month" id="start" name="start"> Does ...

How can I determine which dist folder is utilized during the building of my App if an npm package contains multiple dist folders?

I have integrated an npm package called aurelia-google-maps into my application. This package includes various distribution folders such as AMD, System, CommonJS, Native Modules, and ES2015 within the /node_modules/ directory like so: /node_modules/ /a ...

Appear and disappear div

I am seeking to achieve a specific goal: I want to fade in a div with text after a certain number of seconds, then fade it out. I also want to repeat this process for 4 other divs, ensuring that they do not interfere with each other by appearing while the ...

Implementing Typescript for managing state in React components

Currently, I have a state set up like this: const [newInvoice, setInvoice] = useState<InvoiceType | null>(invoice) The structure of my InvoiceType is as follows: customer_email: string customer_name: string description: string due_date: stri ...

NPM rimraf - proceed with the execution even if directories are not found (do not halt with exit code 1)

My npm script is set up to run a series of synchronous commands, starting with npm run clean:install". Here is the sequence: "install:all": "npm install && bower install", "clean": "npm run rimraf -- node_modules doc typings coverage wwwroot bow ...

Can the CDK be used to reboot both RDS and EC2 instances simultaneously?

After diving into using CDK, I am a newcomer to programming. I have successfully set up a basic environment including an EC2 instance, a VPC with 2 subnets, and an RDS instance. Additionally, I've configured CloudWatch Alarms to monitor the CPU usage ...