I'm trying to start an app, however 2 things are causing errors
$locationProvider and $compileProvider in my config() function ? But can't seem to figure out why?
I'm running AngularJS v1.6.2.
The error I'm getting is this:
Uncaught Error: [$injector:modulerr] Failed to instantiate module zerochili due to:
Error: [$injector:unpr] Unknown provider: t
If I remove the config, the app runs without any problems...
The code:
import svg4everybody from 'svg4everybody';
import angular from 'angular';
import GlobalController from './Global/GlobalController';
let zeroChili = angular.module('zerochili', []);
zeroChili.config(function($locationProvider, $compileProvider) {
$locationProvider.html5Mode(true);
// this increases performance significant
$compileProvider.debugInfoEnabled(true);
// to run debug in production, run this in console:
// angular.reloadWithDebugInfo();
// see: https://docs.angularjs.org/guide/production
});
zeroChili.controller('GlobalController', GlobalController);
function runApp() {
angular.bootstrap(document, ['zerochili']);
}
runApp();
Related
I'm trying to inject two providers and I have an error:
Error: [$injector:modulerr] Failed to instantiate module App due to:
[$injector:unpr] Unknown provider: $paginationTemplateProvider
Here's my code:
var app = angular.module('App', ['angular-loading-bar', 'angularUtils.directives.dirPagination'])
.config(function ($paginationTemplateProvider, $cfpLoadingBarProvider) {
$paginationTemplateProvider.setPath('../lib/angular-utils-pagination/dirpagination.tpl.html');
$cfpLoadingBarProvider.includeSpinner = false;
});
Do you have any idea what is wrong?
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'm implementing Global Error Handling inside an Ionic application. I want to receive an IonicPopup telling me that an error occurred. For the errorExceptionHandler I created a new config based on an existing solution that holds an alert as Global Error Handling.
angular
.module('MyApp', ['ionic'])
.config(function ($provide, $ionicPopup) {
$provide.decorator('$exceptionHandler', ['$delegate', function ($delegate) {
return function (exception, cause) {
$delegate(exception, cause);
//Alert works fine
alert(exception.message);
//$ionicPopup will follow here
};
}]);
})
This immediately resulted into the following error.
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to
instantiate module app due to: Error: [$injector:unpr] Unknown
provider: $ionicPopup
What am I missing here?
Why are you injecting $ionicPopup inside a config function when you have to inject it in a controller/factory/service
http://ionicframework.com/docs/api/service/$ionicPopup/
config function accepts providers, you can inject only a provider,if at all you need it... you could do something like below.
angular.module('myApp').config(function () {
var injector = angular.injector(['ng']),
ionicPopup= injector.get('$ionicPopup'),
});
I am trying to use this package in a Laravel app.
I have successfully installed with npm but when I try to inject the dependency in my controller I am getting this error;
Error: $injector:unpr
Unknown Provider
This is in my app.js;
var app = angular.module('spotify', ['spotify']);
app.controller('TestController', ['$scope', 'Spotify', function ($scope, Spotify) {
}]);
I am sure it's something simple but am stuck. Has else tried this or have a suggestion?
Thanks!
I am trying to set up unit testing with Angular and have hit a bit of a wall with injecting into the module level config and run methods.
For example, if I have a module definition as such:
angular.module('foo', ['ngRoute', 'angular-loading-bar', 'ui.bootstrap']).config(function ($routeProvider, $locationProvider, datepickerConfig, datepickerPopupConfig) {
Karma yells at me because I am not properly mocking $routeProvider, datepickerConfig, etc with the following:
Error: [$injector:modulerr] Failed to instantiate module foo due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
(and then if I remove $routeProvider then it says Unknown provider: datepickerConfig and so on)
I also have the following code in a beforeEach:
angular.mock.module('foo');
angular.mock.module('ngRoute');
angular.mock.module('ui.bootstrap');
And the following in my karma.conf.js:
'components/angular/angular.js',
'components/angular/angular-mocks.js',
'components/angular/angular-route.js',
'components/angular-ui/ui-bootstrap-tpls.js',
'app/*.js', // app code
'app/**/*.js',
'app/**/**/*.js',
'test/app/*.js', // app.js
'test/specs/*.js', // angular.mock.module calls
'test/**/*.js', // tests
'test/**/**/*.js'
Thank you for any advice.
Make sure to include the angular-route module and all your dependencies into the flies array of your karma.conf.js. That should do the trick.
I also have the following code in a beforeEach:
angular.mock.module('foo');
angular.mock.module('ngRoute');
angular.mock.module('ui.bootstrap');
I don't think you need to mock ngRoute and ui.bootstrap
Generally I just set
describe('myApp', function() {
beforeEach(module('foo'));
it('should do something awesome', function() {
// arrange
// act
// assert
});
});