Since I needed nested views in my AngularJS application (1.4), I decided to switch routing library from ngRoute to ui.router.
Now everything seems to work fine but in some controller I still have to import ngRoute in order not to crash the application.
One of these contrller is the controller for the landing page:
angular.module(
'myApp.landing', ['ngRoute'], ["$compileProvider", function($compileProvider){
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|sms|whatsapp):/);
}]).
Here if I switch from 'ngRoute' to 'ui.router' I get this error:
angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.10/$injector/modulerr?p0=myApp&p1=Error%3A%…Flocalhost%3A3003%2Fbower_components%2Fangular%2Fangular.min.js%3A20%3A274)
The problem is that the error does not really tell me much about what's going on and which part of my code still depend on the module ngRoute.
Do you have an idea about how to approach this problem?
Related
I'm building an app that should run inside of an AngularJS (1.3.19) module.
The motivation is to reuse AngularJS' already built services and controllers by the scope() and injector() functions.
I cannot use ng-upgrade because this will require refactoring a lot of our legacy code.
Is there a way I can combine two routers for two different AngularJS modules?
We use the angular-ui-router for our AngularJS app.
When I try to change a route on the Angular router, AngularJS' router removes the route and replaces it with an empty string (and runs the otherwise() function as configured).
Any ideas?
Thanks!
I got this.
Configure your paths on both ends. AngularJS' route should point at the html of your Angular app.
Also, I created a node script that imports Angular's routes and transforms them to be AngularJS' routes.
I did this with ts-node and webpack-shell-plugin.
Thanks.
I am trying to fix this problem, but I can't get it to work. I want to include the NgCookies (angular-cookies) into my app, but it's just giving me an error.
I have this:
Including the JS:
<html>
<script src="js/angular1.6.1.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-cookies.js"></script>
</html>
Application controller:
var myApp = angular.module('myApp', ['ionic', 'ui.router', 'ngCordova', 'ngCookies']);
The controller:
myApp.controller('HomeController', ['$scope', '$cookies', function ($scope, $cookies) {
// Retrieving a cookie
$scope.userName = $cookies.userName || "";
// Setting a cookie
$cookies.userName = 'testUser';
}]);
The error I am getting is:
Error: [$injector:unpr] Unknown provider: $cookiesProvider <- $cookies <- HomeController
I am using Angular version 1.6.1 and Angular-Cookies version 1.6.1
I don't know what I am doing wrong here. I checked other questions, but the solutions given there are not working for me. I checked the versions, I checked if I include Angular before Angular-Cookies etcetera. I am out of options now.
It should work as expected if you included the same version of angular and angular-cookie as in this plunkr.
I see that you are injecting ngCordova and i believe that you are using ionic framework in your development. By default, Ionic comes bundle with angularJS and there is no need to include additional angular.js script on top of ionic and you should avoid doing so as it could lead to unexpected break.
I would suggest you to check the angular version that comes bundle with the ionic version you are using and include the same version of angular-cookies with the angular version that comes bundle with ionic.
I'm trying to use ui-bootstrap for Tabs in my application keeping the example on ui-bootstrap's website as reference. For the same I included the js files given in the exapmle which are:
Angular.js, Animate.js, Sanitize.js and BootStrap-tpls.js
But after including these JS Files I'm shown an error:
[$injector:unpr] Unknown provider: $modalStackProvider <- $modalStack
I'm not able to resolve this dependency.
You have some version mismatch.
It used to be $modal, $modalInstance, etc. in old Angular Bootstrap.
Now it is $uibModal, $uibModalInstance, etc.
So check versions of libraries that depends on Angular Bootstrap.
I have a main module, that loads ngRoute service.
angular.module("app", ["ngRoute", "app.settings"]
and my app.settings module is not loading ngRoute service,
angular.module("app.settings", [])
.config(["$routeProvider", function($routeProvider){
$routeProvider.when("/settings", {
template: "{{message}}",
controller:"SettingsController"
});
}])
But I can use $routeProvider in this module.
Does angular module loading order not care? Can I load any dependency any module?
The thing is that your app module is loading the ngRoute, and also is loading your app.settings modules, so the dependency is already injected into your Angular application, so there is no need to injected again.
Does angular module loading order not care?
The order doesn't matter Angular first resolve the dependencies and then compiles the modules, controllers etc.
angular.module("app", ["ngRoute", "app.settings"]
Is the same as
angular.module("app", ["app.settings", "ngRoute"]
However you can run into troubles in some Unit Test scenarios if you only load the module app.settings your test will fail. But in the most cases you are going to load the app module and all the main modules of your Angular application.
Can I load any dependency any module? Short answer, yes.
Long answer: Your ngRoute dependency should be loaded in the main module because is something which your app module is going to need it to define the basic routing, if the dependency is loaded in several modules is not going to throw any error, in fact you should add all the dependencies needed by each module because in large applications there is no guarantee that the ngRoute/myFactory/etc is already loaded.
Update to improve readability
When we write angular.module('app',['ngRoute']); what exactly dependencies here mean?
to be precise ngRoute is nothing but a simple angular module like
angular.module('ngRoute',['ng']) in which has $routeProvider
`angular.module('ngRoute',[]).provider('$roteProvider',[function(){}]).services('$route',function(){}).service('$routeParam',function(){})`
Its better to see the angular project in github https://github.com/angular/angular.js/blob/master/src/ngRoute/route.js
Dependencies means the list of modules that particular module in your case 'app' is dependent on , you when you state them as dependencies they get injected in the module at initialization and become available for usage