Having trouble getting automapper-ts registered in the Global Context within an Angular application - Reference to App is Undefined

Ever since the upgrade to Angular 18, it seems like the node package automapper-ts has stopped functioning properly.

When attempting to set up Automapper in the global context, the issue arises where app is undefined, resulting in the failure to resolve the Reference to the Angular App. Has anyone encountered a similar problem?

automapper.js

var automapper = (function (app) {
    app.automapper = AutoMapperJs.AutoMapper.getInstance();   <---  ERROR
    return app.automapper;
})(this);

Answer №1

The issue at hand appears to be a result of the updated Angular builder in version 17, which now utilizes Vite + esbuild for compilation purposes.
A quick fix I discovered involves reverting back to the old compiler by modifying the `builder` option in the angular.json file to:

"builder": "@angular-devkit/build-angular:browser"
.
Additionally, you must change the property "browser": "src/main.ts" to "main": "src/main.ts".

Another potential solution could be found in this pull request, although it's unlikely to be merged in the near future.

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

prioritizing the loading of the header in an Angular application before proceeding to load the main content

My website has a basic layout shown below: |-------------------| | HEADER | |___________________| |------||-----------| | side || Main | | bar || Content | | || | |------||------------ For routing and states, I am using ...

Unable to trigger an alert within a function in Ionic 4

I need to display an alert within a function that is using Firebase authentication. This is my TypeScript code (with jQuery enabled): async showEmptyAlert() { const empty = await this.alertController.create({ header: 'Error!', m ...

Conceal an <article> element if its src attribute is blank using jQuery

Is there a way to hide articles with empty images? <article data-stars="<?php echo $StarRating[6];?>" name="<?php echo $Price[6];?>" class="box"> <img width="270" height="160" alt="" src="<?php echo $img[6][1];?>"></a> ...

Failure to recognize AJAX content in .ready function

When using an AJAX call to load content, primarily images, I encountered a challenge. I wanted the div to fade in only after all the images were fully loaded. To achieve this, I made use of .ready method in jQuery. However, it seemed like the images were n ...

Rotation with a tilt in Three.js

My goal is to create a solar system simulation using Three.js, but I'm having trouble getting the planets to rotate in an inclined manner around the star. I have attempted to implement a solution, but the rotation is not correct. Here is a sample in a ...

Navigate to a unique component

I am attempting to navigate to the location of a custom component, but the reference to it is not returning a valid HTML node. The function "goToContactUs" should execute this action. What would be the most effective approach to accomplish this? class H ...

SmoothDivScroll jQuery Plugin may encounter issues when JavaScript files are loaded asynchronously

I recently encountered an issue with SmoothDivScroll when I attempted to load all the JS files asynchronously. I implemented my own async loading pattern using Lazyload.js by Ryan Grove. I also experimented with Modernizr's load/complete pattern, but ...

Decomposing a Vue.js API response into multiple variables

Utilizing vue to send http requests and store data in variables can be done like so: the api response will have the following structure: data: data: [id:1... etc] function: fetchOffers() { this.$http.get('http://127.0.0.1:8000/api/of ...

Namespace remains ambiguous following compilation

I'm currently developing a game engine in TypeScript, but I encountered an issue when compiling it to JavaScript. Surprisingly, the compilation process itself did not throw any errors. The problem arises in my main entry file (main.ts) with these ini ...

`Managing an array of categories in each element with rxjs filter: A guide`

I'm in the process of adding a sorting feature to my ionic/angular app. The app pulls vouchers from an API, each belonging to different categories. I need the system to be flexible enough to support multiple categories per voucher. Currently, the solu ...

What is the best way to change an asterisk symbol into 000 within a currency input

In my ASP.NET application, I have a currency text box. I have the following script: <script type="text/javascript> function Comma(Num) { //function to add commas to textboxes Num += ''; Num = Num.replace(',', ...

Display Bootstrap modal automatically upon page load three times for each individual user

i need the bootstrap modal to appear on page load and i have come across the following code. However, there are a couple of issues: 1- I want the modal to display for every user three times, not just the first time! How can I achieve that, my friends? 2 ...

Oops, seems like there was a problem with parsing the

I have encountered an issue when trying to decode the value of a PHP array sent as JSON format. Here is how I created the array: $ads = $atts['ads']; if (sizeof($ads) > 0) { foreach($ads as $social_item) { $sdbr = $social_ ...

Axios Instance class request cancellation

In my Redux-saga project, I am working on implementing a polling function where I need to make a request every second. If there is no response from the endpoint, I want to cancel the previous request and initiate a new one using Axios client. I have organi ...

Integrating Gesture Handling in Leaflet JS for two-finger scrolling enforcement

Have you ever noticed that when you're using a mobile device and scrolling down a webpage with a Google map, the map goes dark and prompts you to "Use two fingers to move the map"? https://i.stack.imgur.com/4HD1M.jpg I am interested in incorporating ...

Tips for mastering the PrimeFaces JavaScript API

While exploring JSF-2.2 in conjunction with PrimeFaces 5.3, I encountered JavaScript event handlers like the one utilized with the onComplete attribute: function handleSmptmSaveRequest(xhr, status, args) { if (args.validationFailed) { PF(&apos ...

Retrieve items by name using an HTML array

I am dynamically adding new inputs and would like to read values from them dynamically as well. However, I am facing an issue where my championName variable is not working in JavaScript. <form name="second_form" id="second_form" action="#" method="PO ...

Guide on sharing a Vue project with other devices within a network

I'm a complete beginner when it comes to vue.js. After working on a few small projects, I want to make sure I understand how to share a vue project with others at this stage. Typically, I know that running 'npm run serve' in my project dir ...

Is it possible for JavaScript to interface with MySQL databases?

Is it possible to establish a connection between JavaScript and MySQL? If yes, what is the process? ...

Why does Math.max.apply not prioritize the first parameter?

function findSmallestNumber(numbers){ return Math.min.apply(Math, numbers); } This code sets the context to be the Math object. However, this is not required because the min() and max() methods will still function properly regardless of the specified co ...