this sound like a simple question but i am a newbie with angular, basicly i want to use AngularFileUpload to upload images on my website, so i did this when i initialize my app:
var app = angular.module('myApp',['ui.router'],['angularFileUpload']);
before i installed the angularFileUpload module trough npm, so my module is inside node_modules, but i get an error evertyme i start my app
error:
Failled to instantiate module due to:
'fn' is not a function, got string.
someone know what is happening?
That happens because you are injecting the modules in a wrong way.
You are inserting two arrays:
var app = angular.module('myApp',['ui.router'],['angularFileUpload']);
Instead you should insert just one array with all modules:
var app = angular.module('myApp',['ui.router','angularFileUpload']);
You should use bower instead of npm for loading your client side dependencies in AngularJs. There are following steps required to correctly load your module:
Download using following bower command
bower install angular-file-upload
Then include this library in the script tag, by providing correct location to minified js.
Last inject modules in correct way
var app = angular.module('myApp',['ui.router','angularFileUpload']);
And that's it. Please let me know if it helped you!
Related
I'm working on a project with Ionic v1 and AngularJS and Cordova.
I'm trying to include this firebase plugin in my project with no luck so far: https://github.com/dpa99c/cordova-plugin-firebasex
I was told to try out this node module: https://github.com/ionic-team/ionic-native#angularjs
However, I keep getting this error:
Error: [$injector:nomod] Module 'ionic.native' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
<script src="../node_modules/#ionic-native/core/ionic-native-plugin.js"></script>
How can I make this work in my project and how can I import ionic-native properly?
Actually, I'm using ionic-native 5.23.0 in my angularJS project and I believe all 5.x versions have support for this angular version. If you take a look in ionic-native/core you will notice that exists a file called ng1. That file have a function called initAngular1 who iterate across object's properties creating angularJS services. Here's what I did.
First, I opened the script that I use as entry point in my webpack.config to create a bundle (Since I already had webpack installed, I used)
Inside this script, I wrote the following:
require('#ionic-native/core');
const appVersion = require('#ionic-native/app-version');
const sqlite = require('#ionic-native/sqlite');
const statusbar = require('#ionic-native/status-bar');
const toast = require('#ionic-native/toast');
const ng1 = require('#ionic-native/core/ng1')
ng1.initAngular1({
AppVersion: appVersion.AppVersion,
SQLite: sqlite.SQLite,
Statusbar: statusbar.StatusBar,
Toast: toast.Toast
});
Run webpack
Inject ionic.native module in your app.
Inject any plugin you would like to use with a $cordova prefix.
angular.module('myApp', ['ionic.native'])
.controller('MyPageController', function($cordovaToast) {
$cordovaToast.show('Hello from Ionic Native', '5000', 'center');
});
Don't forget to install the cordova plugin used by the ionic-native plugin.
ionic-native stopped the support to angular ionic v1/angular 1,
https://github.com/ionic-team/ionic-native/tree/v3.x
For Ionic V1/Angular 1 support, please use version 2 of Ionic Native. See the 2.x README > for usage information.
In Jhipster v3.9.1,
i tried add module to my projet, but i can't .
For example, i want to add this module http://hakib.github.io/MassAutocomplete/
so i run bower install angular-mass-autocomplete --save
after i run gulp inject:vendor and gulp inject:dep
So the index.html is refreshed now and the module is there 👍
So when i want to use it, i tried to add the .$inject=[] array , it didn't work, i tried use it next to module, it didn't work too ! .module('moduleName', ['mass-autocomplete'])
It gives me always this error :
angular.js:13920 Error: [$injector:unpr] Unknown provider: mass-autocompleteProvider <- mass-autocomplete <- ControllerName
Can't we use a bower module or NPM module ??
Thank you
The first javascript example on linked page shows the injection
var app = angular.module('app', ['ngSanitize', 'MassAutoComplete']);
when in your question you do it like
.module('moduleName', ['mass-autocomplete'])
change 'mass-autocomplete' to 'MassAutoComplete' and it should work - unless you didn't included the JS library in your output JS
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
I am new to TypeScript but trying to work out a way to manage my environment variables as I deploy and build through each. We are using gulp and I found gulp-ng-config. Issue with this is it writes out a js file but the rest of my site is written in TypeScript. So it creates this JS.
angular.module('myModule', []).constant('EnvironmentConfig', {"environment":"dev"});
In my TypeScript code I want to be able to access this constant but just cannot figure out how to. I read this post on SO and tried what is said there but no go.
Here is what I have done:
Created a TypeScript Interface for it:
export class IEnvironmentConfig {
environment: string
}
Imported and declared a variable in my service:
import EnvironmentConfig = require("../EnvironmentConfig");
declare var mEnviornmentConfig: EnvironmentConfig.IEnvironmentConfig;
Tried to use this variable in my service:
console.info(mEnviornmentConfig.environment);
So TypeScript does not complain now but when I run the code I get this error:
mEnviornmentConfig is not defined
What am I missing? The myModel is declare at the start of my app and does other module and controller configuration so I know it is getting registered.
Thanks to #keithm for getting me in the right direction.
Figured it out. Once I realized that injecting it into my main module was working my thought turned to how gulp is doing webpack. And sure enough the webpack was just skipping the .js file this other gulp package was creating. Once I updated webpack to account for this new file all was good.
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.