The concept of bundling does not seem to be effective when it comes to

I have incorporated Angular controllers and other functionalities into my ASP.NET Web Forms application. In order to optimize the JS and CSS files, I am trying to utilize the built-in bundling provider from the System.Web.Optimization dll. However, I am encountering an error when applying bundling to the angular.js file and my angular code files. I can't seem to figure out what is causing this error.

collection.Add(new ScriptBundle("~/bundles/startupbundle")
                .Include("~/Scripts/jquery-2.1.0.js")
                .Include("~/Scripts/jquery-ui-1.10.4.min.js")
                .Include("~/Scripts/jquery-migrate-1.2.1.min.js")
                .Include("~/Scripts/bootstrap.min.js")
                .Include("~/Scripts/modernizr-2.7.2.js")
                .Include("~/Scripts/jquery.blockUI.min.js")
                .Include("~/Scripts/select2.mi![enter image description here][1]n.js")
                .Include("~/Scripts/jquery.nicescroll.js")
                .Include("~/Scripts/jquery.smartWizard.js")
                .Include("~/Scripts/scripts.js")
                .Include("~/Scripts/kendo.all.min.js")
                .Include("~/Scripts/toastr.min.js")

                .Include("~/Scripts/underscore-min.js")

                .Include("~/Scripts/bootstrap.min.js")

                .Include("~/WebApp/AppScripts/master-page.js")
                .Include("~/WebApp/AppScripts/Dasboard.js")
                .Include("~/Scripts/angular.min.js")
               );

Answer №1

It appears that your custom scripts are being included prior to Angular. Make sure to include Angular first to avoid any runtime errors.

Your code snippet:

 ... // everything above this as before
 .Include("~/Scripts/angular.min.js")
 .Include("~/WebApp/AppScripts/master-page.js")
 .Include("~/WebApp/AppScripts/Dasboard.js")
);

It is difficult to confirm from the screenshot provided if this is the issue. If my suggestion does not resolve it, please update your question with another screenshot showing the expanded "Uncaught object" (click the triangle next to it).

Additionally, remember to include Modernizr at the beginning of your page rather than bundling it with these scripts.

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

I am creating an HTML page that incorporates p5.js, and the text I'm rendering

It seems like the draw loop is continuously refreshing every x seconds, causing this behavior. Is there a way to slow down or disable the frame update without affecting the video refresh rate? I was thinking of adding an fps counter and implementing an i ...

Increment or decrement a number using setTimeout in JavaScript

Having trouble with incrementing and decrementing a number using a timer in my code. It seems to not be working properly... let num = 0, maxNum = 5, timerFunc = function() { if (num < maxNum) { num++; console.log(num); //working f ...

Tips for creating a floating navbar with separated lists using Bootstrap 4

Struggling to position my navbar to the right and separate the list within the navbar. Despite multiple attempts, I can't seem to get it right. Here is a snippet of the code I've been working on: here is what I'm trying to achieve $def with ...

What is the method for activating the on collapse event with a bootstrap navbar?

I am encountering a common issue with collapsing the navbar on smaller screens and triggering an event when the collapse button icon is clicked. Despite my efforts to find a solution, I have been unsuccessful in using the following JavaScript code: $(&apos ...

Tips for directly referencing the z-index property within a class in HTML - is that possible?

Is it permissible to include the following elements within a <div class="z-index-2"> tag? Is this considered correct or incorrect? Blockquote ...

Having trouble retrieving the necessary redirect_uri in react-facebook-login

I am currently working on implementing Facebook OAuth in my express/NodeJS app using the authorization code flow. To fetch the authorization code, I am utilizing the react-facebook-login node module. While I can successfully obtain the authorization code i ...

What could be causing the npm install command to not save packages in the /node_modules directory?

After running npm install to add a package, npm indicates that the installation was successful. However, upon checking the node_modules folder, I'm unable to locate the installed package. In order to access the package, I have resorted to using npm in ...

How to eliminate the initial character from a string in C#

I'm currently facing an issue with deleting grid rows that contain a $ symbol. When I try to delete, problems arise due to the presence of the $. Even after trying to replace the $ sign with an empty space in my code, the issue persists. Can someone p ...

Tips for resolving the error message "document is not defined" when using ejs in a node environment

Currently learning JavaScript and Node.js (Express and EJS) for my portfolio development. Running the JavaScript code below gives me an error message "document is not defined". Any assistance would be appreciated. The error is displayed in the Terminal: ...

The HTML table is failing to display

I have a CSV file called travelq.csv and I'm attempting to automatically generate a table from the data it contains. The h1 heading is loading, but unfortunately, the table is not displaying as expected. I am unsure of where I may have made a mistake ...

Execute javascript code 1.6 seconds following the most recent key release

Is there a more efficient way to execute JS 1.6 after a keyup event, considering that the timer should reset if another keyup event occurs within 1.6 seconds? One possible approach could involve utilizing a flag variable like this: var waiting = false; $ ...

Using the ng-init directive with an argument will result in a Syntax Error, as the

My element is connected to an angularjs controller in this way <div ng-controller="mycontroller" ng-init="initialize('Type A')" > <div ng-repeat="task in tasks"> ... </div> </div> The initialize function is part o ...

The resizing of iframes in Javascript is malfunctioning when it comes to cross-domain functionality

I have implemented a script to dynamically resize iframe height and width based on its content. <script language="JavaScript"> function autoResize(id){ var newheight; var newwidth; if(document.getElementById){ newheight=docume ...

Is there a way to access the directory of $object[""0""].projhours in AngularJS without triggering any syntax errors?

Being new to this, I am trying to retrieve the value of projhours from this directory in console.log() without encountering a syntax error. While right-clicking on the projhours directory in the Chrome console displays ($object[""0""].projhours), AngularJS ...

"Can someone help me figure out why the onPress function is not functioning as

Every time I press the button, I attempt to send a request using jQuery. Surprisingly, it works fine on the snack UI but when I try it on the expo client, an error pops up saying undefined is not a function (near '...jquery.default.ajax...'). Odd ...

Display the input text to explore and filter through selected options

Imagine having a select tag with numerous options, making it difficult to search through them all. So, when you click on the select and the options appear, you can type a letter and the select will jump to the option starting with that letter. For instance ...

When working with Node.js and Express, encountering the error message "data.push is not a

I am encountering an issue when trying to add a new task to the list of all tasks. The error message I receive is TypeError: allTasks.push is not a function data contains JSON data that has been retrieved from a file using the fs method var allTasks = JS ...

Insert a Facebook like button within a designated div

Can anyone figure out why the Facebook button isn't functioning properly? ---- ...

Dragging and dropping elements using Jquery to various positions on the screen

I am working on a project with draggable buttons and a droppable textarea. When I drag a button onto the textarea, it displays some code. If I drag another button, the text related to that button is added to the existing code. My query is how can I insert ...

AngularJS radio buttons are unable to be selected in a simplistic manner

I have implemented a dynamic list display using HTML radio buttons. Here is the code snippet: <html> <head> <script src="angular-v1.5.5.js"></script> </head> <body> <div ng-app="myApp" ng-controller=" ...