Fixing an $injector:unpr issue with Angular 1.6, MVC 4.6, and UI-Grid: A Step-by-Step Guide

Hello there!

I'm currently in the process of developing a Web-App using Angular 1.6 / MVC 4.6 / E.F 6.0, and I've integrated UI-Grid into it from UI-Grid. The setup is running smoothly as intended. However, I've encountered an issue while trying to implement a custom filter similar to the one outlined in this section of the documentation. My goal is to replicate the custom "Age" filter functionality. It's working fine on my local environment but throws two errors once I publish the Web-App:

Possibly unhandled rejection: canceled
Error: [$injector:unpr] http://errors.angularjs.org/1.6.2/$injector/unpr?p0=nProvider%20%3C-%20n%20%3C-%20myCustomModalCtrl

After some investigation, I believe the issue lies within the controller/directive that I added for the custom filter. I have referred to the Angular JS help page, but unfortunately, I am unsure how to resolve this error and why it only occurs after deployment.

Below is a snippet of the JavaScript code:

// JavaScript code here...
javascriptangularjsmodel-view-controller

Answer №1

It seems like the problem you're facing could be due to how the myCustomModalCtrl controller is declared. Unlike the other declarations, this one is missing the full qualified declaration for the injected services:

PrintersApp.controller('myCustomModalCtrl', function ($scope, $compile, $timeout) { [..] });

The correct way to declare it should be:

PrintersApp.controller('myCustomModalCtrl', ['$scope', '$compile', 
'$timeout', function ($scope, $compile, $timeout) { [..] }]);

During minification of your code, the parameter $scope may get renamed to something like a. This mismatch in service names will lead to the error you encountered, as there won't be a service named a in the $injector.

To prevent this issue, we need to ensure that the $injector knows the correct service name to inject for each parameter requested in our controller.

For more information, you can refer to this article.

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

Ways to address observables in Angular in a manner similar to deferred objects

Transitioning from AngularJS to Angular has posed a challenge for me, especially when it comes to moving from promises to observables. Below is an example of my code in AngularJS: var deferred = $q.defer(), frame = document.createElement('newFrame ...

javascriptangulartypescriptrxjs

Implementing nth-child selector in vanilla JavaScript

Is there a way to dynamically change the number within the nth-child brackets when clicking on a button? For instance, can I click a button and have the next slide in a slideshow appear? .slideshow:nth-child(n){} I specifically need to modify n using only ...

javascripthtmlcss

The functionality of jQuery slideDown() seems to be malfunctioning, while fadeIn() operates smoothly

I am having trouble getting the slideDown function to work properly. I have a div where I append some data from a PHP query, and I want to use slideDown to show it in a smooth animation. However, when I try to use slideDown, the content just appears withou ...

javascriptjquery

The prop type 'lg' supplied to 'ForwardRef(Grid)' is not valid and has failed

This particular code snippet is responsible for managing the layout of components on the webpage. However, I have encountered some warning messages in the console: Warning: Failed prop type: The lg prop provided to ForwardRef(Grid) is invalid, it should ...

javascriptreactjsmaterial-ui

Alter the subview in real-time

When using EmberJs, I need to develop a view that can hold different types of players (such as Youtube, Photosynth, Html Content, etc.) and it should change dynamically based on a controller property that specifies the item to play. I've already crea ...

javascriptember.jshandlebars.js

finding the file path in meteorjs

Currently, I am facing an issue with my project in meteorjs which involves using the nodes filesystem to read a file. Regrettably, I am encountering difficulty in locating the specific file that needs to be read. This is the location of my file: Server ...

javascriptnode.jsmeteorcoffeescriptnpm

I encountered an issue with Array map when attempting to access the data during a dynamic rendering process

function UserTransactionsComponent1() { const [accounts, setAccounts] = useState(); useEffect(() => { async function fetchData() { const res = await fetch( 'https://proton.api.atomicassets.io/atomicassets/v1/accounts' ...

javascriptreactjsnext.jsatomicassets

Display: Show view once forEach loop finishes execution

I'm facing an issue with my update query execution within a loop. Is there a way to trigger the rendering of a view once the forEach loop completes all its iterations? Here's the snippet of code: conn.query(`SELECT Id, ${sfColumn} from Lead`, ...

javascriptnode.jsexpress

Struggling to create a touch-friendly drop-down menu, facing challenges with identifying the target

Could use some help with making a touch-friendly drop-down menu. I've tried implementing it but it's not working as expected. To see the issue live, check out this website. Below is the code snippet in question: $('.myMenu > li').b ...

javascriptjquerydrop-down-menumenutarget

Vue js is throwing an error message that says "Reading 'push' property of undefined is not possible"

I've encountered an issue while trying to navigate to other routes. The error I'm receiving is: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push') at eval (JoinRoom.vue?bd9d:74:1) This is how I pu ...

javascriptvue.jsvuejs2

"Using the every() method in underscore.js with an undefined parameter

I recently wrote some code and encountered an unexpected result: var a = new Array(10); // should be [undefined * 10] var b = _.every(a, function(m){ if(_.isUndefined(m)){ return false; } return true; }); I anticipated that b would b ...

javascriptunderscore.js

The texture appears blurred in the three.js viewport and lacks clarity

I have loaded a shirt object with texture, set Ambient light and directional light, but the render part does not show clearly. Can someone help me figure out how to set the light effect? Here is my code: var container; var camera, scene, renderer; var mou ...

javascriptthree.js

What prevents variables defined in outer blocks from being accessed by nested describe() blocks?

In my real code, I encountered a problem that I wanted to demonstrate with a simple example. The code below functions properly. I defined a variable in the root describe() block that can be accessed in the it() blocks of nested describe()s. describe(&apo ...

javascriptjasmine

Obtaining NodeJS from a mysterious subdirectory

-- plugins ---- myplugin1 ------ core ---- myplugin2 ------ core If this represents the directory structure, is there a method to import all core directories from plugins without specifying the specific plugin names like myplugin1? require('/plugins ...

javascriptnode.js

Utilize the jQuery function as a callback argument

There is a jQuery plugin that I am currently working on: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title></title> <script type="text/javascript" sr ...

javascriptjqueryjquery-plugins

I am encountering issues with posting data when my custom class is initialized with a constructor

Here is some C# code that I am having trouble with: public class MeasurementListController : BaseController { readonly MeasurementListService _mlS; public MeasurementListController(MeasurementListService mlS) { _mlS = mlS; } [ ...

c#angularjspost

disable hover effect

Kindly visit the link below and click on 'Story': Upon mouseover, the animation can be observed: How can I remove this effect? The CSS I am using for this is as follows: .storypageThumb1 { float:left; width:175px; height:91px; ...

javascriptjqueryhtmlcss

The styles applied to the Angular 5 Component host element are not being reflected correctly in jsPlumb

As a beginner in Angular >2 development, I am excited to build my first application from scratch. One of the features I'm trying to implement is drawing flow charts using jsPlumb. However, I have encountered an issue where the connectors are not be ...

javascriptcssangularjsplumb

Why is my AJAX request not working in conjunction with my on-page JavaScript?

While working on an order confirmation page, I encountered a challenge with an AJAX request that I am making to a page containing JavaScript code for tracking cookies and recording data. Unfortunately, when the request is fired to this other page with the ...

javascriptphpjqueryajax

Show loading GIF on the screen and hide it once the script has finished loading

I have implemented lazy loading for my Facebook comments plugin, but I am facing an issue where the plugin takes some time to load. To provide a better user experience, I want to display a loading GIF while the plugin is loading. However, once the comments ...

javascriptjquery