Could not load ngx-restangular due to an error: (SystemJS) Module not yet loaded while trying to load "@angular/core"

Recently, I made the switch from using the AngularJS 'restangular' library to the Angular 'ngx-restangular' library during an upgrade from AngularJS to Angular.

However, after the transition, I encountered an unexpected error along with a confusing stack trace:

sign-in-redirect Error: (SystemJS) Module not already loaded loading "@angular/core" as http://localhost/node_modules/@angular/core/bundles/core.umd.js.
    Error: Module not already loaded loading "@angular/core" as http://localhost/node_modules/@angular/core/bundles/core.umd.js.
        at Object.eval (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:125:19)
        ... (error continues)

The issue seems connected to the ngx-restangular loading process. Here is a snippet of my main.ts file:

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import '../app.js';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

In this setup, I first import the root file (app.js) for the legacy AngularJS app, followed by importing the main Angular AppModule and bootstrapping it.

AppModule.ts:

... other content...

Regarding the error, I suspect that the problem lies in how I imported restangular into MyService.ts. Once I commented out the relevant line and references, the error disappeared:

import { RestangularModule, Restangular } from 'ngx-restangular';

So, what could be causing this issue and how can it be resolved?


Update:

Further investigation confirmed that the error stems from the restangular import in MyService.ts. By removing this line and related imports, the error vanished:

import { RestangularModule, Restangular } from 'ngx-restangular';

What would be the correct way to incorporate this import in my service?

Answer №1

I encountered the same issue while trying to load ngx-restangular. It took me a while to navigate through various resources on the internet, but eventually I managed to find the solution!

To resolve this issue, simply modify your system.config.js file by adding the following options for packages:

packages: {
    ...
    'ngx-restangular': {
        format: 'cjs',
    },
    ...
}

By specifying the format as cjs, you are informing SystemJS that the module is in CommonJS format and should function correctly.

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

"Add a hover effect to fade the image and make it clickable for a

Is there a way to make the entire image a clickable link when it's hovered over, rather than just the text inside? I could use some assistance with this. Javascript: $('.thumbnail').hover(function() { $('.thumbnail img').stop ...

AngularJS inputs using ng-model should be blank when in the pristine state

Check out this input element within an HTML form: <input ng-model="amount" /> Currently, the input displays as $scope.amount = 0 in the controller. I want to start with a blank input field instead. This way, users can easily input data without havi ...

Can you explain the significance of { 0: T } in this particular type definition?

I stumbled upon this type declaration in my codebase which is meant for non-empty arrays: type NonEmptyArray<T> = T[] & { 0: T } and it functions as expected: const okay: NonEmptyArray<number> = [1, 2]; const alsoOkay: NonEmptyArray<n ...

What's the issue with the submit button not functioning on the form?

After downloading a sample form, I encountered the following code: <form id="login-user" method="post" accept-charset="utf-8" action="/home.html" class="simform"> <div class="sminputs"> <div class="input full"> <l ...

Error occurs when attempting to clear the cache storage

useEffect(async () => { caches.open('my-cache') }, [token, user_id]) Upon trying to log out of the application, const logoutFunc = () => { localStorage.clear() caches.keys().then((list) => list.map((key) => { ...

Jasmine: A service in Angular for testing that replaces console.log

I have developed an Angular logging service that replaces console.log and other methods based on an environment constant. Here's a simplified example: if(!DEBUG_ENV) { console.log = function(){}; } Now, my query is how can I use Jasmine to vali ...

I'm having trouble getting my PrimeNG Calendar component to line up correctly

::ng-deep p-calendar.calendar-control > span > input.p-inputtext { border: 1px solid black; background: #eeeeee; text-align: center !important; } The content is not properly centered. <p-calendar dateFormat="mm/dd/yy&qu ...

Having difficulty accessing POST data through $.ajax request

I am currently working on a simple JavaScript code that is set up to send POST requests to my local server. The JavaScript and PHP files are both located on localhost, so I don't have to worry about any cross-site issues for now. Here is the JavaScrip ...

Navigating the reactive array in Vue 3 with finesse

Currently, I'm facing some challenges with my Vue 3 app in terms of getting things to work as expected. The main issue lies in properly accessing a reactive array. Let me provide you with the code for better comprehension: Within my global store sto ...

Customize the color of the label and underline in a Reactjs material-ui TextField when the field input

https://i.stack.imgur.com/oJ2ah.png <TextField id="standard-full-width" label="Password" style={{ margin: 8 }} fullWidth margin="normal" placeholder="*******" /> Struggling to understand how to modify the color of the label ...

Is it possible to create a route in AngularJS that displays multiple views at once?

Imagine a scenario in which we have a specific route, let's call it myapp\profile, with two different modes (buyer/seller). Here is what I am aiming to accomplish: Maintain the same route URL for both modes. Switch between views using different ...

Activate a particular panel within the leftPanel using PDFNet Webviewer

When using disableElements in the setQuickBarPanelContents() function, I am able to remove 2 of the 3 panels from the leftPanel: setQuickBarPanelContents() { this.instance.disableElements(['notesPanel', 'notesPanelButton', &apos ...

How can I effectively utilize the Metamask SDK with TypeScript?

Currently, I am in the process of developing a webpack+pnpm+typescript+react website. All the versions being used are LTS and my preferred IDE is VSCode. According to the guide provided by Metamask here, it seems like I need to follow these steps: npm i @m ...

Gather data from various HTML elements with JavaScript when submitting a form

How can I extract values from HTML elements and send them for processing through a form? I'm attempting to compile a menu item list with the individual items' structure in place, but I'm struggling to figure out how to fetch the values upon ...

Having trouble obtaining the ref.current.offsetWidth?

I have been working on creating a contextMenu. My goal is to retrieve the offsetWidth and offsetHeight from ref.current, but when I console.log it, it shows as undefined. const ContextMenu: React.FC<ContextMenuProps> = props => { const thisCom ...

Explore various THREE.JS 3D models through a clickable link

I am struggling to make each object open a new page using a URL when clicked. No matter what I try, it doesn't seem to work properly. Can someone point out what I might be missing or doing wrong? Here is the click event code for the objects. If needed ...

Looking to transform a PHP output value

I have a form with checkbox input, and a hidden 'sibling' input attached to it, in order to generate values of either '0' or '3' based on the checkbox status. When unchecked, the value is '0', and when checked, the ...

In nextjs, the page scroll feature stops functioning properly following a redirection

Currently, I am running on version 13.5.4 of Next.js In a server-side component, I am using the nextjs redirect function to navigate to another page. However, after the redirection, I noticed that the next page is missing the scroll bar and seems to be st ...

No response data being displayed after Angular post request

After sending a POST request via Postman, I received the expected response with a status of 400. However, when I tried sending the same request using Angular's http.post in the browser, I only received a 400 error without any response data. https://i ...

Cache for AngularJS $http.jsonp requests

I'm struggling with caching a JSONP request and have tested out different approaches without success. I attempted $http.jsonp(url, { cache: true }) and $http({ method: 'JSONP', url: url, cache: true }), but neither worked as expected. As a ...