I am using typescript, and I have the following value:
export var app:ng.IModule = app || angular.module('app.common.values.authToken', []);
app.value('authToken', {authToken: ''});
Then, I have something similar to this code for registering my app:
export var app:ng.IModule = angular.module('app', [
'ionic',
'templates',
'app.common.values.authToken',
'app.common.services.user'
]);
It seems to me that I have registered my value in the first code block, and I have included it as a dependency for my app in the second.
Now, I want to access this value {authToken: ''} in my service. I would like to use the injector, but it keeps returning an unknown provider error:
var injector = angular.injector(['ng']).get('$injector');
injector.get('authToken')
Error: [$injector:unpr] Unknown provider: authTokenProvider <- authToken
How should I reference the provider, or am I going about this in the wrong way?
You need to make sure to inject the module that the constant is into the injector.
Do something along the lines of this.
var injector = angular.injector(['ng','your.module.that.contains.constant']).get('$injector');
Related
I am attempting to upgrade a large angular.js app (1.5.9) to the latest version of Angular.
I am in the process of turning the app into a hybrid AngularJs/Angular app and have reached this step in the guide:
https://angular.io/guide/upgrade#bootstrapping-hybrid-applications
So far I have changed from using gulp to webpack 4 and the app is working the same as before.
The issue I am having is, when I switch from using the ng-app directive in my index.html to bootstrapping in Javascript the app fails to start, throwing this error:
Uncaught Error: [$injector:unpr] Unknown provider: StateServiceProvider <- StateService
This is coming from my app.js file which looks like this:
angular.module('app-engine', [
'app-engine.state',
'app-engine.api',
// other modules
])
.factory('bestInterceptor', bestInterceptor)
// other configs which aren't throwing Unknown provider errors
.run(startUp);
bestInterceptor.$inject = ['StateBootstrappingService'];
function bestInterceptor(StateBootstrappingService) {
return {
request: config => {
if (!StateBootstrappingService.isBestSsoOn()) {
config.headers['x-impersonated-user'] = StateBootstrappingService.getUserName();
}
return config;
}
};
}
startUp.$inject = ['$rootScope', '$state', '$timeout', 'StateService']
function startUp($rootScope, $state, $timeout, StateService) {
// start up code
}
There is a separate app.modules.js file, which defines the other modules in the app.
Including:
angular.module('app-engine.state', ['rx', 'app-engine.api']);
The service which is mentioned in the Unknown provider error looks like this:
(function() {
'use strict';
angular
.module('app-engine.state')
.factory('StateService', StateService);
StateService.$inject = [
'$state',
'$log',
'rx',
// a few other services that exist in the app
];
function StateService(
// all the above in $inject
) {
// service code
}
})();
As the guide instructs, I am removing the ng-app="app-engine" from my index.html and adding it into the JavaScript instead. I've added it at the bottom on my app.modules.js file.
angular.bootstrap(document.body, ['app-engine']);
After this change is when the Unknown provider error is thrown. I have confirmed the source is my startUp function in app.js. I have tried including all the modules in the app in the 'app-engine' requires array, which did not change anything. It's interesting that the bestInterceptor function is not throwing any errors, despite also using a service (The StateBootstrappingService is being set up in the same way as the StateService).
Is there anything obvious I am doing wrong? Or anyone have any ideas how to solve this?
Try this:
angular.element(document).ready(function () {
angular.bootstrap(document.body, ['app-engine'])
})
For me this was necessary because the other sub components (providers and services) had not yet been added to the module yet. Running the it on "document.ready()" gives those items an opportunity to attach before trying to manually bootstrap (because they cannot be added later when manually bootstrapping)
I don't love the use of document.ready() so I'm still looking for a more offical way to do this
I've just installed the following package with bower:
https://github.com/urish/angular-spinner
The package is added successfully. I've also added:
<script src="bower_components/spin.js/spin.js"></script>
<script src="bower_components/angular-spinner/angular-spinner.js"></script>
When I try to inject it like this:
(function()
{
angular.module('employeeApp',['angularSpinner']).controller('schoolController', schoolController);
It crashes and I receive the error:
Argument 'indexController' is not a function, got undefined
When I remove ['angularSpinner'] everything works again.
What should I do?
--EDIT--
indexController
angular.module('employeeApp').controller('indexController', indexController);
function indexController($location, authenticationFactory,constants)
{
var vm = this;
vm.setName = function()
{
return constants.firstname;
}
}
in angular you create module for your app and there you specify the dependencies. and once you create controller or service you get the module by name and create controller\ service in that module.
//create module for app
angular.module('employeeApp', [ /*add your dependencies here*/ ]);
//create controller\ service
angular.module('employeeApp').controller(function(){
//controller implementation
});
what might happen is you may re initialize your app by mistake.
for simplification you could store your angular module in a variable as follows:
var app = angular.module('employeeApp', ['angularSpinner']);
and define a controller like this:
app.controller('indexController',function(angularSpinner){
//controller code here
});
I wanted to rewrite my existing code, but I failed as I run into this error:
ionic.bundle.js:8900 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.routes due to:
Error: [$injector:unpr] Unknown provider:
My working snippet:
angular.module('app.routes', [])
.config(function() {});
My rewritten snippet (this one fails):
(function () {
// use strict mode to write clean code!
'use strict';
// This configures the routes
var RouteProvider = function () {
};
// init the config
angular.module('app.routes', [])
.config(['', RouteProvider]);
}());
I have created a Plunker for this: Plunker
Thanks for your help ;)
You have an empty string into your .config call - this is effectively telling Angular you want to inject a service with a blank string as the name into your config function. This doesn't exist, so you get an unknown provider error - a pretty unclear one at that, because it tries to show you the name of the service, but it's blank, so you just end up with Error: [$injector:unpr] Unknown provider: and nothing else!
Your .config call should look more like this:
// init the config
angular.module('app.routes', [])
.config(RouteProvider);
You don't need the array syntax if you're not actually injecting anything into the function.
I am implementing $firebaseObject in my code. However, when I include $firebaseObject as a dependency in my controller (or service), I immediately receive the following Angular error:
Unknown provider:
My controller:
angular.module('myapp.controllers-account', [])
.controller('AccountCtrl',
function($firebaseObject, $state, $anchorScroll, $location, $rootScope, $stateParams,
OtherDependencies) {
var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
// download physicsmarie's profile data into a local object
// all server changes are applied in realtime
$scope.profile = $firebaseObject(ref.child('profiles').child('phsyicsmarie'));
})
Removing the dependency, fixes the issue. What is going on?
Note: I have put firebase as a dependency in my module, as I am using it on other places and it works fine.
You need to register firebase as a module with angular app.
angular.module('myapp.controllers-account', ["firebase"])
Refrences
I have been looking for a way to get services on initialization of my angular-js application, but could not find how to get it to work. In my case I want to get the $location service to observe the url.
Looking around, I found the services can be retrieved from the injector. To get the injector, I bootstrapped my application like this:
var angularApp = angular.module("MyApp", []);
var angularInjector = angular.injector(["MyApp", "ng"]);
angularApp.run(initializeAngularApp);
initializeAngularApp()
{
var location = angularInjector.get("$location");
}
This throws an Error:
Unknown provider: $rootElementProvider <- $rootElement <- $location
My understanding is that initializeAngularApp() should get called once the injector is done initializing. But judging from the error I get, it would not be the case.
What is the best way to get the services from the injector when my application initializes?
I found my answer and I did not need to instantiate the injector myself to get the service.
Services are injectable in the run() function, so doing:
angularApp.run(intializeAngularApp);
with
initializeAngularApp($rootScope, $location)
{
$rootScope.location = $location;
$rootScope.$watch("location.url()", function () { alert("url changed"); });
}
works.