What is the difference between adding the .js extension when importing files in TypeScript versus Angular imports?

When working on my TypeScript project, I've encountered an issue where I need to include the *.js extension when importing files. If I omit the extension, the project will build successfully but fail at runtime in the browser due to file not found errors.

Here's an example of how my TypeScript imports currently look:

import {MainApp} from './MainApp.js';

window.onload = () => {
  var app = new MainApp(5);
  app.doSomething();

};

After researching this issue (Appending .js extension on relative import statements during Typescript compilation (ES6 modules) for example), it appears that TypeScript prohibits me from using syntax like `import {MainApp} from './MainApp.js';`. However, I noticed that Angular allows a simpler import statement without the .js extension:

import {MainApp} from './MainApp';

This made me wonder, how does Angular achieve this behavior? Is there a way for me to replicate it in my non-Angular, pure TypeScript project?

Answer №1

When using Angular CLI, your source files are compiled into a single .js file for the browser, simplifying the process and improving efficiency. The compiler identifies the MainApp related file during compilation and includes it in the output.

In contrast, the TypeScript compiler primarily removes TS components while retaining JS elements without modifying the files further. Subsequently, the browser requests individual source .js files at runtime.

To avoid dealing with file extensions when importing, bundlers like webpack, rollup, parcel, and others offer solutions to streamline the development workflow.

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

Guide on adding the newest version of Jquery in asp.net 4.5 using <asp:scriptreference> tag

Looking to update the jQuery version in my web application. Currently, jQuery 1.7.1 is being loaded by default. I am aware that the following code is responsible for this. But how can I switch to loading jQuery 1.10 instead? <asp:ScriptManager runat ...

Transmitted only JSON data instead of using multiform data with jQuery Ajax

When I use jQuery Ajax to send a JSON object, it ends up being interpreted as 'multiform' instead of pure JSON. How can I make sure my request is sent as a pure JSON object and not multiform? var demo = new Array("One", "Two", "Three"); $.ajax ...

Ways to retrieve information from a component using a function

Hello! I'm currently facing a challenge with the following scenario: I am developing a Vue application with multiple components. One of these components utilizes vee-validate for validation purposes. I need to modify a data element within the compone ...

Steps for assigning attributes to a variable when selecting multiple checkboxes

Hey there! I have a grid set up that looks like this: Serial No Document Name Attachment 1(checkbox) abc (img) 2(checkbox) xyz (img) 3(checkbox) uio ...

Discover various ways to encapsulate Vue.js components

I am currently in the process of developing a website that utilizes classic multiple pages powered by blade templates. However, I am looking to incorporate vuejs2 components for more dynamic functionalities. Although things are running smoothly, I am faci ...

Angular 6+ has a revolutionary theme service that seamlessly impacts all components as well as modals using the <ng-template let-modal>

As per the post How to toggle a class using a button from the header component in Angular 6+ I implemented a theme service which successfully toggles the 'dark-mode' class in the app.component.html. However, I encountered an issue where all my m ...

Server-side access to form data has been restricted

When I make a PUT request from the frontend, I am currently using the XMLHttpRequest and FormData API. However, on the server side, I am not receiving any data such as req.params, req.body, and req.query are all empty. Front-end Implementation var report ...

Ways to modify the color of a container's border by interacting with radio buttons through JavaScript

I'm currently facing a challenge with creating a settings dropdown menu that allows users to select different themes. Each theme is supposed to modify the background color and border color, but I have successfully implemented only the background color ...

Creating a unique icon using Jquery Mobile for a button in a PhoneGap application

Has anyone experienced issues with using a custom icon for a jQuery mobile button? I am having trouble as it is only showing a grey circle instead of the actual icon. The default icons work fine, though. Here is the code snippet from the index.html page: ...

Optimize your mobile experience by creating a notification menu that is scrollable and fixed in position

Recently, I purchased Moltran, but encountered a major issue: The notification menu disappears on mobile devices, which is not ideal for me. After some research, I discovered that removing the hidden-xs class from the li notification element can solve this ...

Disappear text gradually while scrolling horizontally

There is a need to create a special block that displays fading text on horizontal scroll. However, the problem is that the block is situated on a non-uniform background, making the usual solution of adding a linear gradient on the sides unsuitable. Click ...

"Patience is key when waiting for the alert dialog response in Vuetify

I currently have a reusable component called Alert.vue. <v-dialog v-if="alertDict" v-model="alertDict.showDialog" max-width="460"> <v-card> <v-card-title>Title</v-card-title> & ...

Angular2: PrimeNG - Error Retrieving Data (404 Not Found)

I'm facing an issue with using Dialog from the PrimeNG Module. The error message I keep getting is: Unhandled Promise rejection: (SystemJS) Error: XHR error (404 Not Found) loading http://localhost:4200/node_modules/primeng/primeng.js I followed the ...

The value of an AngularJS model object cannot be altered with a dynamic key

app.controller('indexController', ['$scope', '$location', 'authService', function ($scope, $location, authService) { var vm = this; vm.$onInit = function () { vm.active = { "home": true, ...

Customize JQGrid formatter for actions - easily edit, save, or cancel without using the default 'action' formatter

Working on an asp.net project, I am developing a page where users interact with a jqgrid version 4.4.4. Due to the limitations of this version, I am unable to use formatter: 'action'. Instead, I have implemented a custom formatter that displays a ...

The Angular2 website is failing to update properly when utilizing Angular2-cli

Currently, I am in the process of developing a small Angular2 app and I am using WebStorm to make modifications to a file in order to see the updates reflect in my browser. So far, everything seems to be error-free as I have executed the following command ...

Building a responsive image gallery modal using AJAX in Laravel platform

How can I fix the issue of the modal content briefly appearing when I load my page? I am trying to create an image gallery where a modal opens when an image is clicked. Here is the code in my view.blade.php: <script> $(".li-img").click(function ( ...

How do I eliminate the request type following the request name in swagger-typescript-api?

I am in search of a method to derive types from a Swagger file without appending a specific request type to the request name. For instance: If I have an endpoint /assortment and the request type is POST, I currently receive the Api.assortmentCreate() meth ...

Unable to establish a connection with the node at http://localhost:8545

Issues Encountered: I am having trouble with the Web3.min.js path in my system directory! The Web3.min.js file is being loaded from a folder in my browser. I have copied the web3.min.js file to the same folder where the index.html file is l ...

"Generate a series of dropdown menus with choices using either jQuery or AngularJS from a JSON dataset

I'm in need of assistance. I want to generate select dropdowns dynamically based on data retrieved from my REST API, which is in JSON format. How can I dynamically inject these selects into my HTML? Below is an example data structure: JSON data fetch ...