Using Webpack Uglify breaks routing functionality

After implementing uglify on the webpack bundle, I noticed that the routing functionality suddenly stopped working without any indication of an error. The project utilizes oclazyload for lazy loading.

Route.js

module.exports = function(app) {
    var routeConfig = function($stateProvider) {
        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: 'app/dashboard/dashboard.min.html',
                title: 'Home',
                ncyBreadcrumb: {
                    label: 'Home'
                }
            })
            .state('organizationStructure', {
                url: '/organizationStructure',
                templateUrl: 'app/admin/organizationStructure/manageHierarchy/manageHierarchyShell.min.html',
                'abstract': true,
                ncyBreadcrumb: {
                    skip: true
                },
                resolve: ['$q', '$ocLazyLoad', function($q, $ocLazyLoad) {
                    var deferred = $q.defer();

                    require.ensure([], function() {
                        var mod = require('./organizationStructure.module.js');
                        $ocLazyLoad.load({
                            name: 'app.organizationStructure'
                        });
                        deferred.resolve(mod.controller);
                    });

                    return deferred.promise;
                }]
            })
            .state('organizationStructure.organization', {
                url: '/organization',
                templateUrl: 'app/admin/organizationStructure/manageHierarchy/organization/index.min.html',
                controller: 'ManageOrganization',
                controllerAs: 'vm',
                title: 'Manage Organization',
                ncyBreadcrumb: {
                    label: 'Manage Organization',
                    parent: 'home'
                }
            });
    }

    app.config(routeConfig);
    return routeConfig;
};

Module.js

var app = angular.module('app', [
    'ui.router',
    'restangular',
    'ui.bootstrap',
    'ncy-angular-breadcrumb',
    'oc.lazyLoad'
]);

Base Route

require('./app.route.js')(app);

Upon minification of the bundle, the application's routing malfunctions, although it works perfectly fine otherwise. Seeking a solution for this issue. It is important to note that ngAnnotate is being used and dependencies are injected safely in the minified file.

Answer №1

When minifying your code, it's important to use array annotation for Dependency Injection.

Your app.js is missing the angular di array notation. To fix this, make the following changes:

Change from:

app.config(routeConfig);

Change to:

app.config(['$stateProvider', routeConfig]);

For more information, you can check out this answer on Stack Overflow.

Answer №2

It appears that you are currently using the most recent version of ui-router, which implements a new and slightly altered approach to handling the resolve block. This version requires an object map.

To adapt to this change, consider the following code snippet:

    resolve: {
       foo: ['$q', '$ocLazyLoad', function($q, $ocLazyLoad) {
                var deferred = $q.defer();

                require.ensure([], function() {
                    var mod = require('./organizationStructure.module.js');
                    $ocLazyLoad.load({
                        name: 'app.organizationStructure'
                    });
                    deferred.resolve(mod.controller);
                });

                return deferred.promise;
       }]
    }  

For more detailed information on how to use the new approach in ui-router, refer to the official API documentation at: https://github.com/angular-ui/ui-router/wiki#resolve

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

When trying to show a Vue view, there was an issue with reading properties of null, specifically the 'style' property

I am experiencing an issue with a header that has an @click event in the body. Instead of displaying a Vue view upon clicking, I am encountering the following error: Cannot read properties of null (reading 'style') Upon researching on Stack Ove ...

What is the method for smoothly transitioning the vertical flip of an image within its current position using CSS?

Can someone help me figure out how to smoothly flip my image vertically using rotateX after a few minutes at its center position? The image is flipping, but not on its actual center. It seems to be rotating from a point above the image. I've tried adj ...

What is the process for installing fontawesome using npm?

I encountered an error while attempting to install that looks like the following: $ npm install --save @fortawesome/fontawesome-free npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\Admin\Desktop\package.json&a ...

Oops! There seems to be an error with the <path> attribute. It looks like we were expecting a number, but received something different: "

I'm currently working on creating a basic line graph using d3.js and integrating it into a React component. However, I'm encountering this error: Error: <path> attribute d: Expected number, "MNaN,36.393574100…" Unfortunately, the similar ...

What could be causing the failure of loading CSS images or JS in my Laravel project?

This is a continuation of my previous question where I managed to get the site up and running. Initially, all files including css, js, and images were loading properly. However, now I am encountering issues as the files are not loading and the console disp ...

What is the best way to display a loading animation until the entire wizard has finished loading in the jQuery-steps

I need help with implementing a loading animation using the jQuery-steps plugin in my wizard type form. I want the animation to be displayed until the entire wizard has loaded completely, but I'm unsure of how to enable this feature as there is a labe ...

The issue with Multiselect arises when the array is being set up initially

Using primeng Multiselect, I have implemented a logic to push data based on search value from the backend. To avoid the error of pushing undefined elements, initialization is required before pushing. However, when I initialize the dropdown's array var ...

Tips on quickly validating a form using JavaScript

I've set up a form with 3 text inputs and a validation function that triggers on submit. Here's a snippet of the code: <form action="" method="post" onSubmit="return checkForm(this.form)"> and checkForm(): var pattern_name = /^([a-zA-Z ...

bash: The command "nodemon" could not be located

My experience with nodemon has been smooth for the past few months. However, today I encountered an error that I couldn't resolve. Despite uninstalling and reinstalling nodemon, as well as force installing it, I still received the same error message w ...

Step-by-step guide on how to activate a colorbox using a targeted Id or class

Below is the code I'm currently working with: <div class="hidden"> <div id="deletePopContent" class="c-popup"> <h2 class="c-popup-header">Delete Practice Sheet</h2> <div class="c-content"> <h3 ...

How can I modify the date format using the Google Ajax Feed API?

Currently, I am utilizing Google's AJAX Feed API to pull data from an RSS feed. However, I am curious about how to modify the date format. The current format fed by "datePublished" appears as follows: Sun, 29 Jan 2012 23:37:38 -0800 Is there a way t ...

Best practice for incorporating type definition file into a fresh Angular webpack configuration

After migrating to the latest version of Angular 2.0 and utilizing angular-cli and webpack for our application build process, we encountered an issue with automatic compilation in Webstorm. While running commands like ng test or build worked fine, webstorm ...

Tips for implementing permission-based functions in a React frontend with a Django Rest API

I am currently using Django Rest Framework in conjunction with React on the frontend. Utilizing Token Authentication has been successful for me thus far. Now, I am looking to add permission-based functions to my React frontend. Specifically, I want only th ...

Exploring AngularJS: Discovering the matching string in an array

I am working on creating a search filter to look up the status of an item in my database. The statuses in my DB are represented as integers, so I have assigned each index with its equivalent status. For further clarification, here is the code: MVC Contro ...

Revitalize your PHP skills by incorporating JavaScript

Looking for a script that will automatically refresh specific functions every 30 seconds along with a visible timer. Here is what I have so far: $ping, $ms window.onload=function(){ var timer = { interval: null, seconds: 30, sta ...

Encountering an error while using TypeScript, Mocha, and Express: "TypeError: app.address is not a

While transitioning an API from ES6 to TypeScript, a particular issue arises when attempting to run unit tests on the Express REST Endpoints: TypeError: Cannot read property 'address' of undefined The server code has been slightly adjusted for ...

Simple CSS for creating a "red alert badge" with a number count

Looking for the best way to display the popular red notification indicator with count in a consistent manner across various browsers. It seems tricky to achieve a design that looks seamless on all platforms, as different browsers interpret paddings differe ...

What are the steps to bring in a module from a URL?

I have integrated a Vue.js npm package into my application. However, due to certain reasons, I now need to directly use the CDN URL. Let's assume that this is the CDN link for the library: https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-prot ...

What is the best way to trigger a snackbar notification when two passwords do not match?

I'm currently developing a full stack application and I am facing an issue with displaying a snackbar in my signup component when the user's password and confirm password do not match. I have been advised to pass the setOpenAlert method as props ...

How to retrieve a value from an AngularJS service

I recently completed a tutorial on how to upload images for an ionic app. While the process works, I encountered a problem with retrieving and saving the new filename returned by the server. Saving this value to a variable in the controller proved challen ...