I am trying to migrate my angularjs 1.2 app (which is working fine now) to angularjs 1.3. But I am getting the below error.
[$injector:modulerr] Failed to instantiate module constructionApp due
to: TypeError: Unable to get property 'push' of undefined or null
reference at Anonymous function (http://localhost/app/app.js:33:5)
Also, this is the code I am having in my app.js
var cmApp = angular.module('myApp',
['xeditable', 'ui.bindonce', 'gantt', 'angularFileUpload', 'ui.bootstrap', 'ui.router', 'ngAnimate', 'wc.Directives']);
cmApp.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
var interceptor = ['$rootScope', '$q', '$location', function (scope, $q, $location) {
function success(response) {
return response;
}
function error(response) {
var status = response.status;
if (status == 401 || status == 404) {
$location.path('#/Error');
return;
}
// otherwise
return $q.reject(response);
}
return function (promise) {
return promise.then(success, error);
}
}];
$httpProvider.responseInterceptors.push(interceptor); ***get error at this line
// For any unmatched url, redirect to /home
$urlRouterProvider.otherwise("/Home");
$stateProvider
.state('home', {
url: "/home",
templateUrl: "/app/views/home.html",
controller: "homeController"
})
.state('somepage', {
url: "/somepage/:ID",
templateUrl: "/app/views/somepage.html",
controller: "somePageController"
})
});
Please help me to solve this migration issue.
Related
I'm using Spring Boot for back end of my application. I'm trying to make redirect when user lost authorization during using website or when back end send 401 code to client.
I use interceptor in my config file:
var app = angular.module('myApp', [
'ngRoute', 'ngResource','ngDialog', 'tableSort', 'ngMaterial', 'ngMessages', 'timer', 'config'
]).config(function ($routeProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'LoginCtrl'
})
.when('/main', {
templateUrl: 'views/main.html',
controller: 'LoginCtrl'
})
.when('/home', {
templateUrl: 'views/home.html',
controller: 'UserAccount'
})
.when('/search', {
templateUrl: 'views/find_document.html',
controller: 'findDocument'
})
.otherwise({redirectTo: '/'});
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
var interceptor = ['$rootScope', '$q', function(scope, $q) {
function success(response) {
return response;
}
function error(response) {
var status = response.status;
if (status == 401) {
window.location = "/nologin"
return;
}
return $q.reject(response);
}
return function(promise) {
return promise.then(success, error);
}
}];
$httpProvider.responseInterceptors.push(interceptor);
});
When I try this code I gets error in console log
Error:
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…Flocalhost%3A8080%2Fbower_components%2Fangular%2Fangular.min.js%3A21%3A179)(…)
Where is the problem?
EDIT:
Error log from url
Failed to instantiate module myApp due to:
TypeError: Cannot read property 'push' of undefined
at http://localhost:8080/js/App.js:115:39
at Object.invoke (http://localhost:8080/bower_components/angular/angular.min.js:41:456)
at d (http://localhost:8080/bower_components/angular/angular.min.js:39:418)
at http://localhost:8080/bower_components/angular/angular.min.js:40:19
at q (http://localhost:8080/bower_components/angular/angular.min.js:7:355)
at g (http://localhost:8080/bower_components/angular/angular.min.js:39:319)
at cb (http://localhost:8080/bower_components/angular/angular.min.js:43:336)
at c (http://localhost:8080/bower_components/angular/angular.min.js:20:390)
at Bc (http://localhost:8080/bower_components/angular/angular.min.js:21:179)
at fe (http://localhost:8080/bower_components/angular/angular.min.js:20:1
Trying to find and replicate your issue, I found out that responseInterceptors are deprecated as this post point out:
Interceptor not working
So you need to refactor your code.
Hope it helps.
I am new in Angular JS and I stack with problem with inject resolve promise to controller.
I have next code:
var app = angular.module('app', ['ui.router', 'ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.config(function ($stateProvider, $urlMatcherFactoryProvider, $urlRouterProvider) {
$urlMatcherFactoryProvider.caseInsensitive(true);
$urlRouterProvider.otherwise('/refuel');
$stateProvider.state('refuels', {
url: '/refuel',
controller: 'refuelController',
controllerAs: 'refuelCtrl',
resolve: {
$refuelsPumpsResolve: function ($http) {
return $http({
url: "http://localhost:60000/Refuels/GetUserPumps",
method: "GET"
})
}
}
})
})
.controller('refuelController', function ($refuelsPumpsResolve) {
var $this = this;
this.isOpen = true;
this.isOpen = function () {
$this.isOpen = !$this.isOpen
}
this.pumpsData = $refuelsPumpsResolve;
});
However angular throws 'Unknown provider' exception for $refuelsPumpsResolve in controller.
I do not see any problem, more over the code was taken from ui-route tutorial on github.
Thanks for help
Try this, declaring the injection as you would normally do for say, a controller:
resolve: {
$refuelsPumpsResolve: ['$http', function ($http) {
return $http({
url: "http://localhost:60000/Refuels/GetUserPumps",
method: "GET"
})
}]
}
I want to use ngdialog to do with the 401 status, but I get the error:Uncaught Error: [$injector:cdep]
angular.module('ws.site.master', [
'ngResource',
'ngCookies',
'ngSanitize',
'ngAnimate',
'ui.router',
'ngDialog'
]);
here I add a factory to do with the 401 status.
angular.module('ws.site.master').factory('authHttpResponseInterceptor',['$q','$location','ngDialog',function($q,$location,ngDialog){
return {
response: function(response){
if (response.status === 401) {
console.log("Response 401");
}
return response || $q.when(response);
},
responseError: function(rejection) {
if (rejection.status === 401) {
console.log("Response Error 401",rejection);
ngDialog.open({
template: '/common/templates/at.modal.security.html',
className: 'ngdialog-theme-default modal-security',
closeByDocument: false,
closeByEscape: false,
trapFocus: false,
controller: ['$scope', function($scope) {
$scope.defaultView = defaultView || 'login';
}]
});
$rootScope.isSecurityModal = true;
}
return $q.reject(rejection);
}
}
}]);
here add the authHttpResponseInterceptor to $httpProvider
angular.module('ws.site.master').config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$httpProvider', 'ROUTE',
function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider, ROUTE) {
$locationProvider.html5Mode(true);
angular.forEach(ROUTE, function(_route, _name){
$stateProvider.state(_name, _route);
});
$urlRouterProvider.otherwise('/');
$httpProvider.interceptors.push('authHttpResponseInterceptor');
}
]);
Error: $injector:cdep - Circular Dependency
Please check the angular docs about this
angular.module('myApp', [])
.factory('myService', function (myService) {
// ...
})
.controller('MyCtrl', function ($scope, myService) {
// ...
});
you are injecting 'ngDialog' twice, to you main module and then to factory and all of this is in the same 'ws.site.master'
For dialog window, you have to have bootstrap-tpls included in your html header. And the app should be as follows:
angular.module('myModule', [ 'ui.bootstrap']);
In controller or factory have:
app.controller('myController', function($scope, $modal) {
...
$scope.openPopup = function() {
$scope.modalInstance = $modal
.open({
animation : true,
backdrop : 'static',
templateUrl : 'yourTemplatePath/template.html',
controller : 'yourPopupController'
});
$scope.modalInstance.result.then(function(returnResult) {
$scope.returnResult = returnResult;
});
};
My main module definition:
angular.module('app', ['app.animators',
'app.places',
'app.orders',
'app.excursions',
'app.events',
'app.hotel',
'app.controllers',
'app.services',
'angular-img-cropper',
'ui.router',
'templates',
'ngResource',
'ngCookies',
'ui.bootstrap',
'ngImgCrop',
'angularjs-dropdown-multiselect',
'uiGmapgoogle-maps'])
.config(['$httpProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider', ($httpProvider, $locationProvider, $stateProvider, $urlRouterProvider) ->
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
$urlRouterProvider.otherwise("/admin/home")
$stateProvider.state('admin.services'
url: '/services'
controller: 'ServicesController'
templateUrl: 'services.html'
).state('admin.home'
url: '/home'
templateUrl: 'home.html'
).state('signIn'
url: '/admin/signin'
controller: 'SignInController'
templateUrl: 'signin.html'
resolve:
user: ['authService', '$q', (authService, $q) ->
$q.reject({ authorized : true }) if authService.currentUser()
]
).state('admin.signOut'
url: '/signout'
controller: 'SignOutController'
).state('404'
url: '/404'
templateUrl: '404.html'
).state('admin'
abstract: true
url: '/admin'
template: '<ui-view />'
resolve:
user: ['authService', '$q', (authService, $q) ->
$q.reject({ unAuthorized : true }) unless authService.currentUser()
]
)
$locationProvider.html5Mode(true)
])
Also in index.html is <script src="/assets/angular-cookies/angular-cookies.js?body=1">. I get the error in this module:
angular.module('app.services', []).factory('authService', ['SIGN_IN_ENDPOINT', 'SIGN_OUT_ENDPOINT', '$http', '$cookies', (SIGN_IN_ENDPOINT, SIGN_OUT_ENDPOINT, $http, $cookies) ->
auth = {}
auth.signIn = (credentials) ->
return $http.post(SIGN_IN_ENDPOINT, { user: credentials })
auth.signOut = ->
return $http.delete(SIGN_OUT_ENDPOINT)
auth.currentUser = ->
$cookies.remember_token
auth
]).value('SIGN_IN_ENDPOINT', "#{ location.protocol }//#{ location.host }/sign_in").value('SIGN_OUT_ENDPOINT', "#{ location.protocol }//#{ location.host }/sign_out")
.factory("httpErrorInterceptorModule", ["$q", "$rootScope", "$location", ($q, $rootScope, $location) ->
success = (response) ->
return response;
error = (response) ->
if(response.status is 401)
$location.path('/admin/signin')
return $q.reject(response)
return (httpPromise) ->
return httpPromise.then(success, error)
]).config(["$httpProvider", ($httpProvider) ->
$httpProvider.responseInterceptors.push("httpErrorInterceptorModule")
])
Error is: Error: [$injector:unpr] Unknown provider: $$cookieReaderProvider <- $$cookieReader <- $cookies <- authService
What I do wrong? AngularJS version is 1.2.25.
angular-cookie.js version must have the same version that angular.js
"//code.angularjs.org/X.Y.Z/angular-cookies.js"
where X.Y.Z is the AngularJS version you are running.
If you use angularJs version 1.3 use angular-cookies 1.3.17!
In my project i have the same problem!
So i did a downgrade!
This is because when you initialize module app.services, you forget to inject ngCookies. You only include ngCookies in app, which is a different module.
A quick fix here is changing your module definition to
angular.module('app.services', ['ngCookies']).factory('authService', ...
i am new to angular and facing this exception when trying to retrieve a list of blog-posts from rails backend.
can anyone help me please, i am unable to find the exact solution of this problem.
Error: [$injector:unpr] Unknown provider: PostProvider <- Post
http://errors.angularjs.org/1.2.22/$injector/unpr?p0=PostProvider%20%3C-%20Post
var myApp = angular.module('Emangu', ['ngRoute', 'ngResource']);
//Routes
myApp.config([
'$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/blog', {
templateUrl: '/templates/posts/index.html',
controller: 'PostListCtr'
});
}
]);
//Controllers
myApp.controller("PostListCtr", ['$scope', '$http', '$resource', 'Posts', 'Post', '$location', function ($scope, $http, $resource, Posts, Post, $location) {
alert("hello");
$scope.posts = Posts.query();
$scope.deletePost = function (Post) {
if (confirm("Are you sure you want to delete this Post?")) {
Post.delete({ id: Post }, function () {
$scope.posts = Posts.list();
$location.path('/');
});
}
};
}]);
//resources
myApp.factory('Posts', ['$resource', function ($resource) {
return $resource('/posts.json', {}, {
query: { method: 'GET', isArray: true },
create: { method: 'POST' }
})
}]);
Add Post factory (service) or remove it from PostListCtr dependencies