I'm trying to do upgrade components written in AngularJS1 to Angular6. I'm taking the approach of having the wrappers for all the existing AngularJS1 component by extending "UpgradeComponent" placed under the folder "directive-wrappers" in my example. When I try to add some controllers which doesn't have any directives, I get the error message
Error: [$injector:unpr] Unknown provider: testDirective2DirectiveProvider <- testDirective2Directive
https://errors.angularjs.org/1.7.8/$injector/unpr?p0=testDirective2DirectiveProvider%20%3C-%20testDirective2Directive
at eval (angular.js:138)
at eval (angular.js:4924)
at Object.getService [as get] (angular.js:5084)
at eval (angular.js:4929)
at Object.getService [as get] (angular.js:5084)
at Function.UpgradeHelper.getDirective (upgrade_helper.ts:56)
at new UpgradeHelper (upgrade_helper.ts:52)
at TestDirective2Wrapper.UpgradeComponent (upgrade_component.ts:106)
at new TestDirective2Wrapper (TestDirective2Wrapper.ts:27)
at createClass (provider.ts:265) "<app-root _nghost-c69="">"
I tried adding studentController and homePageController, but not able to load it. Any ideas why I'm facing this issue?
https://stackblitz.com/edit/ng6hybrid-c8h6uv
There are two issues that need to be addressed. First, in the studentController.js file, you are using the var mainApp = angular.module("testApp", []); syntax which is resetting the AngularJS module and everything that got instantiated before is being removed.
To answer your question about the controllers, AngularJS controllers can't be upgraded directly using UpgradeComponent (see https://angular.io/guide/upgrade#using-angularjs-component-directives-from-angular-code) because they aren't components/directives that have a template. That is why the error you get (after fixing the first issue) is Unknown provider: studentControllerDirectiveProvider <- studentControllerDirective. It can't find a directive for the reference studentController, so it is adding Directive to see if that has anything.
To fix this, either convert the controller in AngularJS to a directive with a template, or convert it to a service in AngularJS and then inject it into Angular using the UpgradeModule. Keep in mind you will need a template somewhere for this controller so it can be upgraded to Angular. Please see a working example of this in my stackblitz below.
https://stackblitz.com/edit/ng6hybrid-zs6waw?file=app%2Fdirective-wrappers%2FstudentControllerWrapper.ts
Related
After updating to Angular 1.5.3 (from 1.4.9) all my unit tests have started failing, where they worked before.
The error is as follows:
Error: [$injector:unpr] Unknown provider:
AuthenticationHttpInterceptorProvider
<- AuthenticationHttpInterceptor
<- $http
<- $templateRequest
<- $route
It is expected that the AuthenticationHttpInterceptorProvider is not known at this point, because it is part of a different module which is not unit tested here. If I provide a mock for this interceptor, I get the error that $httpBackend wasn't expecting a GET request for the defined default route.
My question is: Why does $route get loaded in the first place, and how can I prevent it? I'm not unit testing any routes and make no changes to $route after the .config stage in the app where routes are defined. I would expect to never receive any requests for the templateUrls of the views of routes.
I've not been able to find anything in the Angular Changelog that would make me expect a different behaviour with the newer version.
$route service is forced to be instantiated by ngRoute since 1.5.1:
Ensure $route will be instantiated in time to capture the initial
$locationChangeSuccess event. This is necessary in case ngView is
ncluded in an asynchronously loaded template.
This is the fix for the issue.
This means that ngRoute should be a dependency of app routing module, not other tested modules.
I have angular App defined with following:
var myApp = angular.module('myApp', ['ngRoute','infinite-scroll','geolocation', 'ngAnimate', 'ngTouch','ui.filters', 'AxelSoft','angularLazyImg','wu.masonry','ui.bootstrap','ngSanitize']);
Until now I was using AngularJS version 1.2.14. Now I need to use AngularJS form validations and in order to do that, I have decided to migrate to Angular's latest stable version 1.4.2.
When I have changed the angular version, things got broke and console throws
Uncaught Error: [$injector:modulerr] with following stack trace :
Error: $injector:modulerr
Module Error
Failed to instantiate module myApp due to:
TypeError: Cannot read property 'push' of undefined
at http://localhost:8000/static/mobile/js/angularApp/app.js:6:37
at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:39:156)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:37:328)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:37:452
at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:7:322)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:37:229)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:37:398
at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:7:322)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:37:229)
at eb (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:40:503
I have tried reading and understanding angularJS official migration guide but I coudn't able to figure out what's in it for me as I haven't used $animate in my code(It $animate and $touch are injected only for another plugin to work i.e. sliders and also I have used 'ngROute anywhere')
Does anyone have idea what should be done here as I have no idea about where do I start :)
So here is what was needed to be done to migrate my angular Application.
Migrate ngRoute and ngAnimate with the same version of angular
Remove HTTP interceptors which was in 1.2 and change them to the style of angular 1.4
In my case, removing $httpProvider and migration ngAnimate and ngRoute had solved my problem.
I'm new to AngularJS.
I want a range slider(noUiSlider) on a Angular view.
I found these 2 libraries to achieve that:
1) https://github.com/vasyabigi/angular-nouislider (Angular plugin)
2) https://github.com/Yankovsky/nouislider-angular (Angular plugin)
I chose option (2) and followed each steps exactly as mentioned there. But I'm getting this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module fastrankApp due to:
Error: [$injector:unpr] Unknown provider: $stateProvider
Any idea how to solve that? OR can anybody provide steps to implement noUiSlider in AgularJS in detail?
Any help would be appreciated.
do u inject your uislider to your App(same for javascript code in your web footer)?. Btw. its look like that problem is somewhere else.
For slider I use classic Bootstrap Slider
What is your AngularJs version.
Share your code.
I injected the 2.1.1 version ngtagsinput like this into my controller:
app.controller('homeCtrl', ['$scope','$http','ngTagsInput', function($scope,$http){
}])
*NOTE: TESTED! add ngTagsInput into the function() will not make a difference...
I loaded the ngtagsinput lib after angularjs lib.
I wonder what else I could test to resolve the error of:
Error: [$injector:unpr] Unknown provider: ngTagsInputProvider <- ngTagsInput
http://errors.angularjs.org/1.2.9/$injector/unpr?p0=ngTagsInputProvider%20%3C-%20ngTagsInput
Don't get me wrong, I know basically this provider is not detected.
but my lib is found (did not report 404), I saw ngTagsInput used in its library....
So, its really bugging me the same solution no more works for this lib! What's special about this lib and why this error is there while I met all the standard to fix it?
It looks like you have tried to inject ngTagsInput into your controller, while you should be injecting it into your module as a dependency. For example:
angular.module('myApp', ['ngTagsInput'])
note module, not controller
You can see as per the creators example: https://github.com/mbenford/ngTagsInput#example
This happens because there are multiple types of injection used in angular. When you declare a module, you need to specify which other modules are available to use within your module.
See: https://docs.angularjs.org/guide/module
When you inject into say a controller, you are basically saying that you want to use a particular object inside it. That object must be a part of your module to be valid. For a third party library, this usually means adding it as a module dependency (as above), and then injecting any object that is part of that library into your controllers and services.
I have a JS Fiddle here: Angular module injection. I also have a respository here that from what I can tell, duplicates my code: Blink-Example
When I open index.html I get the error:
Error: Unknown provider: fromBadFactoryProvider <- fromBadFactory
I'm trying to inject a module into my app that has a factory on it and use that factory in the app, but always get this error. What am I doing wrong?
It's because your copy of 1.0.6 is mangled -- you deleted an asterisk from it on line 1128.
Edit: Another reason to use a shared CDN. :)