This page: https://docs.angularjs.org/guide/providers has a table at the bottom which states that both constants and providers are available in config phase.
When I try to use some constant in my config I get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module testApp due to:
TypeError: undefined is not a function
The constant is set up as follows:
'use strict';
angular.module('services.config', [])
.constant('configuration', {
key: 'value';
});
then the configuration is:
angular
.module('testApp', ['services.config', 'ngRoute'])
.config(function ($routeProvider, configuration) {
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
});
// do something with configuration.key - causes error
});
Does anyone know what I'm doing wrong?
Thanks in advance.
var app = angular.module('TestApp', []);
app.constant('configuration', {
key: 'value'
});
app.config(function (configuration) {
console.log(configuration.key); //value
});
app.constant('configuration', {
key: 'value'
});
here is the jsFiddle: http://jsfiddle.net/gopinathshiva/0701k7ke/8/
Related
What is the problem with the following code?
(function() {
angular
.module('myapp')
.config(ConfigureProvider);
ConfigureProvider.$inject = ['$routeProvider'];
function ConfigureProvider($routeProvider){
$routeProvider.
when('/',{
templateUrl:'main.html',
controller:'GalleryController'
}).
when('/1',{
templateUrl:'favourites.html',
controller:'FavouritesController'
})
}
})();
I am getting the following error: Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.5.3/$injector/nomod?p0=myapp
You have not defined your module
angular.module('myapp',[])
and then
angular
.module('myapp')
.config(ConfigureProvider);
ConfigureProvider.$inject = ['$routeProvider'];
function ConfigureProvider($routeProvider){
$routeProvider.
when('/',{
templateUrl:'main.html',
controller:'GalleryController'
}).
when('/1',{
templateUrl:'favourites.html',
controller:'FavouritesController'
})
}
I am using the angular seed project and try to use ui-router for user login based routing.
I get following error in the console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module MyApp due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.state due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.router due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.util due to:
TypeError: forEach is not a function
at new $UrlMatcherFactory
...
My code in app.js is:
'use strict';
// Declare app level module which depends on views, and components
angular
.module('MyApp', [
'ui.router'
])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state("root", {
url: "",
template: "<section ui-view></section>",
controller: function($state, user) {
if ($state.is("root")) $state.go(user.loggedIn ? "main" : "login");
}
})
.state("login", {
templateUrl: "login/login.html",
controller: "LoginCtrl"
})
.state("main", {
templateUrl: "main/main.html",
controller: "MainCtrl"
});
}])
.controller("MainCtrl", function($scope, user, $state) {
$scope.user = user;
$scope.logout = function() {
user.loggedIn = false;
$state.go("root");
}
})
.controller("LoginCtrl", function($scope, user, $state) {
$scope.login = function() {
user.loggedIn = true;
$state.go("root");
}
});
I didn't find anything with Google and hope someone can help me here.
Best regards
Probably a solution here ?
See this link : https://github.com/ded/script.js/issues/86
in my angular application i want to make redirect with $location.path('/');
but i'm getting this error
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module myApp.login due to:
TypeError: Cannot read property 'html5Mode' of undefined
here is my code
angular.module('myApp.login', ['ngRoute', 'angular-md5'])
.config(['$routeProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/login', {
templateUrl: 'login/login.html',
controller: 'loginCtrl'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
}).hashPrefix('!');
}])
You missed to add dependency in the DI array before using it in factory function of a config block.
Code
.config(['$routeProvider', '$locationProvider', //<-- added dependency before using it in function
function($routeProvider, $locationProvider) {
I use Typescript 1.4 with angularjs 1.3.6.
Using VS 2015 RC with webessentials, with no module system (no --module flag)
I have a working code like this:
demoModule.ts
module Demo.Test {
'use strict';
(() => {
var app = angular.module('Demo.Test', []);
// Routes.
app.config([
'$stateProvider', $stateProvider => {
$stateProvider
.state('demo', {
url: '/demo',
templateUrl: '/views/test/demo.html',
controller: 'demoController as vm'
});
}
]);
})();
demoController.ts
module Demo.Test {
'use strict';
export class DemoController {
constructor(/* ... */) { /* ... */}
}
angular.module('Demo.Test').controller('demoController', Demo.Test.DemoController);
}
But when I move this line:
angular.module('Demo.Test').controller('demoController', Demo.Test.DemoController);
to the demoModule.ts file(see below) it will compile, but getting JS error when run:
Error: [ng:areq] Argument 'demoController' is not a function, got undefined
Any idea how can I make it work? I mean like this:
module Demo.Test {
'use strict';
(() => {
var app = angular.module('Demo.Test', []);
angular.module('Demo.Test').controller('demoController', Demo.Test.DemoController);
// Routes.
app.config([
'$stateProvider', $stateProvider => {
$stateProvider
.state('demo', {
url: '/demo',
templateUrl: '/views/test/demo.html',
controller: 'demoController as vm'
});
}
]);
})();
If you used the script reference not in the right order, then you are going to get the runtime error.
as: Error: [ng:areq] Argument 'demoController' is not a function, got undefined
Add demoController.ts before demoModule.ts in your html file.
<script src="demoController.js"></script>
<script src="demoModule.js"></script>
Its got to do with ordering of files. One of the well known errors caused by using --out in TypeScript : https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md#runtime-errors
i have the below in my module config block:
var appModule = angular.module('myApp',['ngRoute'])
.config(['$httpProvider', '$routeProvider', '$locationProvider', '$translateProvider', function ($httpProvider, $routeProvider, $locationProvider, $translateProvider) {
$locationProvider.html5Mode(true)
$routeProvider
.when('/services/main', {templateUrl: '/services/main/html/main.html', controller: 'MainCtrl', resolve: {
myVar: function (varService) {
return varService.invokeService();
}
}})
}])
Spec File:
describe("Unit Testing: config - ", function() {
var appModule;
var routes;
beforeEach(function() {
appModule = angular.module("myApp");
});
it('should test routeProvider', function() {
inject(function($route, $location, $rootScope) {
routes = $route;
});
});
});
however, while running the test i am getting the below error:
Unit Testing: config - should test routeProvider FAILED
Error: [$injector:unpr] http://errors.angularjs.org/1.2.15/$injector/unpr?p0=%24routeProvider%20%3C-%20%24route
at Error (native)
my karma config includes the angular-route.min.js file. Any suggestions will be helpful.
The issue was resolved with use of angular.mock.module instead of angular.module.
appModule = angular.mock.module("myApp");
What i found that we should use mock to inject the module and it includes the configuration as well where as module is used to register a newly module. So if one is refering to the module already registered, we should use angular.mock.module.
The documentaion says:
This function registers a module configuration code. It collects the configuration information which will be used when the injector is created by inject.