Is it possible to bundle Live using Angular 2 and SystemJS-builder, even when attempting to load modules from node_modules?

I'm having a bit of trouble transitioning my angular 2 application into production. It seems to be searching for scripts within the node_modules directory.

I'm fairly new to angular 2 and despite spending half a day looking for a solution, I can't seem to resolve this issue. Any help would be greatly appreciated!

Below is the error message:

> "XHR error:  (404 Not Found) loading http://olweb/node_modules/@angular/core/bundles/core.umd.js
  Instantiating http://olweb/node_modules/@angular/core/bundles/core.umd.js
  Loading http://olweb/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js
  Loading http://olweb/application/main.js
  Loading application/main.js"

This is the content of index.html:

    <script src="~/scripts/angular2-dev.min.js?version=@version"></script>

    <!-- 2. Configure SystemJS -->
    <script src="~/systemjs.config.js"></script>
    <script>
        System.import('application/main.js').catch(function (err) { console.error(err); });
    </script>

Here's a snippet from my gulp task:

// Your gulp task details here...

Finally, my system.config.js file looks like this:

(function (global) {
System.config({
warnings: true,
paths: {
    'npm:': 'node_modules/'
},
// More configuration settings go here...

});})(this);

Answer №1

Through various trial and error attempts, I discovered that many others were also facing similar challenges. Ultimately, I decided to delve into learning and utilizing Webpack, which proved to be a more efficient solution compared to struggling with systemjs. Below are snippets of the code modifications I implemented, which could potentially assist those attempting to work with systemjs, although I would not recommend it.

var ngpackageNames = [
  'core',
  'common',
  'compiler',
    'platform-browser',
  'animations',
  'platform-browser-dynamic',
  'http',
  'router',
  'forms'
];


//// these packages have different naming conventions.. manually specify them
packages['@angular/animations/browser'] = { main: '../bundles/animations-browser.umd.js', defaultExtension: 'js' };
packages['@angular/platform-browser/animations'] = { main: '../bundles/platform-browser-animations.umd.js', defaultExtension: 'js' };

//// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
ngpackageNames.forEach(function (pkgName) {
    packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
});

var bundles = {
    '/Scripts/Rx.min.js': [
        "rxjs/*",
        "rxjs/operator/*",
        "rxjs/scheduler/*",
        "rxjs/observable/*",
        "rxjs/add/operator/*",
        "rxjs/add/observable/*",
        "rxjs/symbol/*",
        "rxjs/util/*"
    ]
};
var config = {
    map: map,
    packages: packages,
    bundles: bundles,
    paths: paths
}
System.config(config);

For further insights and discussions, check out this resource on UMD Bundle with RxJs

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

Obtain the Week Input's Value

Is there a way to store the value of a week input in a variable and then display it in a span? I attempted the following code: <input type="week" name="week" id="week-selector"> <span id="kalenderwoche"> ...

When integrating react-router 5 and redux 7, there is an issue where the state is not being reset when navigating to a new route using react-router's <Link

My current setup includes the following versions: `"react-router": "^5.2.0",` `"react-router-domreact-router": "^5.2.0",` I'm unsure if my setup is compatible with React-router 5 as I was using a version prior ...

IntelliJ coverage for backend JavaScript

Is it possible to analyze code coverage in IntelliJ without using a browser? http://www.jetbrains.com/webstorm/webhelp/monitoring-code-coverage-for-javascript.html Though there are tutorials by JetBrains on code coverage, they all seem to require a browse ...

Discover the process of executing two functions simultaneously by interacting with a VRbutton through React360

As a newcomer to React, I am still learning the ropes and facing a challenge with using two functions simultaneously with Vrbutton (or any button) on onClick event. I have attempted various methods (referenced in my commented out code below) to make multi ...

"Production environment encounters issues with react helper imports, whereas development environment has no trouble with

I have a JavaScript file named "globalHelper.js" which looks like this: exports.myMethod = (data) => { // method implementation here } exports.myOtherMethod = () => { ... } and so forth... When I want to use my Helper in other files, I import it ...

The Error message "Property 'data' is not present in Type <void> | AxiosHttpResponse<any>" is indicating that the data property is missing on

When I fetch data for a specific user, I have a promise that I use to setState. Below is the implementation: getUserUsername = (): string => { const { match } = this.props; return match.params.username; }; onFetchUser = () => getUse ...

Canvas not displaying image in JavaScript

I have a bird object with a draw function defined, but for some reason, the image is not showing up when called in the render function. Can someone please help me figure out what I'm doing wrong? Thanks in advance. EDIT: Upon further investigation, I ...

Faulty toggle functionality within a JavaScript-created accordion panel

HTML I'm looking to add a FAQ question within the div with the class "section-center" <body> <section class="questions"> <div class="title"> <h2>FAQ SECTION</h2> < ...

Navigating through a 3D world with just the tilt of

I am currently developing an immersive VR web application using three.js. I have integrated the device orientation controls from the Google Cardboard three.js demo for camera navigation. Now, I am looking to incorporate keyboard controls for additional fu ...

Encountering a TypeError with react-rte in Next.js: r.getEditorState is not a valid function

In my Next.js project, I am using a React RTE component. It is displaying correctly, but when I navigate to another component and then return using the browser's back button, I encounter the following error: Unhandled Runtime Error TypeError: r.getEd ...

The functionality of Ng update is failing to operate properly on outdated node versions

Currently in the process of upgrading from angular 7 to 15 for my project. Taking it step by step, but I'm facing the challenge of having to do it manually since my ng update isn't working under any circumstances. The error message states that my ...

Error: Attempting to subscribe to a post request returned a null result

Every time I attempt to subscribe to a post request, the TypeError: result is null is returned My setup involves an Angular CLI connecting with a Spring Boot application for a simple login page. My goal is to save the response header in local storage. Be ...

Ways to categorize specific columns based on certain criteria

In the code snippet below, I am working with a data grid in premium version. There is a boolean field that determines whether to display the data grouped or inline. If the boolean is true, I want to show the expand group, otherwise display it inline withou ...

Attempting to retrieve JSON data and present it in a grid layout

I have a JSON file with the following data: { "rooms":[ { "id": "1", "name": "living", "Description": "The living room", "backgroundpath":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrsU8tuZWySrSuRYdz7 ...

Visualizing Data with d3.js Radar Charts Featuring Image Labels

After following a tutorial on creating a d3.js radar chart from http://bl.ocks.org/nbremer/21746a9668ffdf6d8242, I attempted to customize it by adding images to the labels. However, I encountered an issue with aligning the images properly. You can view my ...

Dragging and Dropping Electron Files into an Inactive Window

I am exploring the implementation of drag and drop functionality within an electron window, utilizing the suggested approach of sandboxing processes. This involves isolating ipcMain from ipcRenderer and creating a bridge through a preload.js script (refer ...

Creating an Angular table row that can expand and collapse using ng-bootstrap components is a convenient and

I need assistance with an application I am developing, where I want to expand a table row to display details when it is clicked. The issue I am facing is that currently, all rows expand and show the data of the clicked row as seen in the image result below ...

Issues with displaying HTML video content

Seeking assistance with a unique coding predicament. I've got an HTML file that showcases a JavaScript-powered clock, but now I'm looking to enhance it by incorporating a looped video beneath the time display. Oddly enough, when the clock feature ...

Having trouble with the preview feature when resizing images

Before trying to implement the JSFiddle was working correctly: http://jsfiddle.net/qa9m7t33/ However, after attempting to implement it, I encountered some issues: http://jsfiddle.net/z1k538sm/ While trying to resize an image, I realized that this example ...

Why are the elements not found by their id when I check them, even though they were created dynamically using an ajax-generated form with php-inserted values through a

How can I prepopulate form fields displayed in a modal view using jQuery after retrieving the form HTML with an AJAX query? I am trying to set the values through a JavaScript function that retrieves PHP-generated values via document.getElementById. However ...