Issue with Typescript Application not navigating into the node_modules directory

Question

Issue with Typescript Application not navigating into the node_modules directory

After attempting to load the app from the root directory of our server, it became clear that this was not a practical solution due to the way our application uses pretty URLs. For instance, trying to access a page with a URL like

http://www.website.com/modules/worker/person/1/1/1

caused system.js to search in the folder /modules/worker/person/1/1 instead of the root directory.

To address this issue, the decision was made to set baseURL:"/" so that the modules would be loaded correctly based on the root directory.

However, a new problem arose with this solution - node modules were not being loaded properly. Instead of looking in the node_modules directory, system.js was searching in the root directory, resulting in paths like /angular2/http.js instead of /node_modules/angular2/http.js.

Even after switching from "node" module compilation to "classic", the issue persisted. Any ideas on how we should proceed?

javascript typescript angular

Answer 1

Answer №1

Below is how I approached solving this issue by utilizing the paths property within the System.config object:

    System.config({
        defaultJSExtensions: true,
        baseURL: "/",
        paths: {
            'modules/worker/*': '/modules/worker/*',
            'angular2/*': '/node_modules/angular2/*',
            'rxjs/*': '/node_modules/rxjs/*',
        },
        packages: {
            modules : {
                worker: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        }
    });
    System.import('modules/worker/main')
            .then(null, console.error.bind(console));

I had to specify direct paths for each external asset that was being loaded outside of main.js in order for them to be correctly accessed. This list may need to be adjusted based on the dependencies of your compiled Typescript classes.

Answer 2

Below is how I approached solving this issue by utilizing the paths property within the System.config object:

    System.config({
        defaultJSExtensions: true,
        baseURL: "/",
        paths: {
            'modules/worker/*': '/modules/worker/*',
            'angular2/*': '/node_modules/angular2/*',
            'rxjs/*': '/node_modules/rxjs/*',
        },
        packages: {
            modules : {
                worker: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        }
    });
    System.import('modules/worker/main')
            .then(null, console.error.bind(console));

I had to specify direct paths for each external asset that was being loaded outside of main.js in order for them to be correctly accessed. This list may need to be adjusted based on the dependencies of your compiled Typescript classes.

Issue with Typescript Application not navigating into the node_modules directory

Answer №1

Similar questions

Executing a function immediately upon the start of a new month in JavaScript (Node.js) without relying on any external libraries?

Challenges with managing controllers within Directives

Discovering the process of previewing a video upload using react-player

Where within Video.js can I modify the color of the large play button when the cursor hovers over the video?

Express Js EJS Layouts encountered an issue: No default engine was specified and no file extension was included

sent a data entry through ajax and performed validation using jquery

Unexpected Token E encountered in the Twitter stream.on function

Looking to incorporate HTML and JavaScript to create two unique forms that can be submitted separately on a single webpage

Buttons for camera actions are superimposed on top of the preview of the capacitor camera

React - Obtain User Login Details and Verify

Set the GridToolbarQuickFilter text box to have an outlined style in Material UI v5

Conflicts in SwiperJS Timeline Management

As a newcomer to Javascript, I am currently working on developing a CRUD-based application and could use some assistance with implementing the Edit functionality

Tips for setting up chrome-app typings in Typescript 2

JavaScript library declaration files are essential for providing type definitions and enabling

Setting up D3 on a Meteor Angular2 project

Responsive div that reacts to scrolling

How to Set Up a Simple Gulp Uglify Configuration

Using the jqueryRotate plugin to rotate an image by 90 degrees

Why does JavaScript function flawlessly in FireFox, yet fails completely in other web browsers?