I'm currently in the process of migrating an AngularJS (1.5.8) from a Gulp pipeline to a webpack pipeline.
One of the dependencies we have is angular-permission.
We're relying on the commonjs style (require) and as documented here I added a require('angular-permission') before the declaration of my angular module.
I also added the angular dependencies permission and permission.ui right after ui.router.
The bundling process goes through, however every time we try to load the app we have this error message in the console: Unknown provider: PermissionStoreProvider <- PermissionStore(…)
I guess the problem is because angular-permission is not injecting the services properly but even playing with the require statement, adding provide plugin or few other attempts didn't solve the issue.
So the question is: how can I properly integrate angular-permission with webpack?
Finally found out what it was with the help of a friend. During my transition from bower to npm for client side deps I unintentionally changed the version of angular permission to the latest. And they changed the name of the service to PermPermissionStore (same thing for Role Store)
Related: https://github.com/Narzerus/angular-permission/issues/310
Related
I'm having an issue when deploying a React/Redux site to Azure App Service.
It builds and deploys fine, but when visiting the site I get JS errors for babel-polyfill - Uncaught TypeError: define is not a function.
We're using webpack with a few loaders and there is one in particular that I have a feeling could be the problem - imports-loader. We had it set as use: 'imports-loader?define=>false' which I believe overrides the define method. I tried this as true also but with no affect. I tried removing the define=>false altogether and the whole build broke...
See webpack config here.
Advice much welcome!
Cheers
Dave
I'm currently in the process of migrating a project (ng 1.5.8) from gulp pipeline to webpack.
I'm facing an issue where textAngular gives me the following error message Module 'ngSanitize' is not available.
if I add a require('angular-sanitize') before the require('textangular') then I get the following error message The textAngular-sanitize provider has been replaced by another -- have you included angular-sanitize by mistake?
I've tried playing with the externals of my webpack config with no luck so far. I've also tried using angular-module-sanitize, didn't work either.
So here is my question: how can I configure properly webpack + my requires so textAngular has the proper dependencies provisionned?
Thanks!
finnaly got it to work.
The solution is to:
- not require angular-sanitize
- not do anything special to the webpack config
- use these lines to require text angular instead (the generic one was including to much stuff)
require('../../node_modules/textangular/dist/textAngular-sanitize.min');
require('../../node_modules/textangular/dist/textAngular.umd');
I am trying to implement a 'remember me' option on my login page and have ventured down the path of using ngCookies to store a local cookie to handle this. However, in trying to follow the instructions from angular documentation I am unable to get the module working in my Web Application.
I am using AngularJS version 1.4.8 and have made sure my angular-cookies.min.js is running the exact same version. I have made sure to add my <link> tags in the correct order:
<script src="../vendor/jquery/dist/jquery.min.js"></script>
<script src="../vendor/angularjs/angular.min.js"></script>
<script src="../vendor/angularjs/angular-cookies.min.js"></script>
However, when I try to load the module into my application:
var EdgeApp = angular.module('EdgeApp', [
'ngCookies',
'ngAnimate',
....
])
I get an $injector:modulerr error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=EdgeApp&p1=Error%3A…2Fdrake-monitor%2FRestApi%2Fvendor%2Fangularjs%2Fangular.min.js%3A19%3A463)
All other modules and dependencies load correctly and work fine.
Based on the advice from #WonderGrub, I stripped my project back to the bear basics and worked from the ground up.
To start with, I installed all of my external modules correctly using Bower (something I wasn't doing before), then I added one module at a time to see if I had any conflicts.
I also reverted back to using .js files instead of .min.js files for my development to help me identify errors more accurately.
I'm unsure what the actual cause of my issue was, but going through the procedures above and the advice from my initial post has worked for me without errors.
I have a web app I am launching from Eclipse using Spring Boot. I am trying to use Angular modals to have a nice looking confirm delete modal and I was following this tutorial to get the right dependencies. The Bower install seemed to go well:
bower install angular-modal-service --save
And I copy this into my html:
<script src="bower_components\angular-modal-service\dst\angular-modal-service.min.js"></script>
And I add the dependency in my Angular file:
var app = angular.module('myApp', ['angularModalService']);
But that is the point at which it fails. If I launch my app I just get a blank page, nothing at all loads. My console output from Chrome's developer tools gives me:
Uncaught Error: No module: angularModalService
This is a general problem I have had, anytime I try to add a dependency with something like
var app = angular.module('myApp', ['DEPENDENCY']);
it doesn't work. Is there something more I need to do in Eclipse in order for it to get it to pick up on my Bower dependencies?
When you have such problem, we can't resolve it for you.
But we can give you some advices to resolve this kind of problem :
Identify the problem. Open the developper tools of your navigator (F12), then the console. If you have nothing here, try to refresh. Angular will let you know if there is a dependency injection problem.
Check if you didn't forgot something. You have to import in your page angular, THEN angular-modal-service, THEN your application. The order is important.
Check if the module you want to use doesn't depend to something else. In your case, do this module needs bootstrap JS files ? Again, take a look at the console. It's here to help you.
Perhaps not specifying type="text/javascript in the script declaration causes your browser not to parse and execute the script? It is required in HTML < 5. Try adding that. Maybe that will help. Post your HTML file, if it still does not work.
just purchased Angle - Bootstrap Admin app from wrapbootstrap
Tried to run the angular-meteor version of the app
The first issue was that meteor did not like the contents of the default index.html, so I renamed the file to be index.ng.html
Now the error I'm getting in the browser console is:
TypeError: $browser.addPollFn is not a function angular-cookies.js:60
What can be done to fix this?
Not sure about wrapbootstrap, but generally this error means you are using incompatible versions of angular and angular-cookies.
The external angular modules you use (e.g. ngAnimate, ngCookies, ngResource, ngRoute etc), should always be the same version as angular.
This issue can be Resolved by using same Version of angular.min.js and angular-cookies.js.
It always good to use same version of files