I am currently using the angularbknd-sdk in my Ionic 1 mobile app.
I installed it with Bower, I loaded it as a npm module thanks to browserify-shym:
package.json
"backand": "./bower_components/angularbknd-sdk/dist/backand.min.js"
then I injected the 'backand' module as a dependency of my app :
app.js
require('backand');
angular.module('myApp', ['backand'])
This works like a charm.
But now I would like to use the new Backand angular-sdk, and load it from NPM instead of Bower.
This is what I did :
I removed angularbknd-sdk from bower, from my package.json and the require('backand') line from my app.js.
Then,
I did :
$ npm i -S #backand/angular1-sdk
and I put this line in my app.js :
require('#backand/angular1-sdk');
But when I run my app, I got this error in the javascript console :
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=app&p1=Error%3A%20%…%2Fandroid_asset%2Fwww%2Flib%2Fionic%2Fjs%2Fionic.bundle.min.js%3A54%3A463)
What am I doing wrong ?
Thanks in advance.
Without more detail on the exact line that is failing it is hard to tell exactly what is not functioning properly, but this looks like it is missing an ionic include. I would check to make sure you have no occurrences of the Ionic JavaScript SDK in your vendor folder, and that the existing SDK has no files remaining in your project - it is possible that there is an include conflict if the physical javascript files for the old angular1bknd-sdk were not removed from the vendor folder managed by bower.
Related
So, I generated a fresh angular-fullstack with TypeScript, MongoDB, Bootstrap, Bootstrap UI, Authentication Boilerplate, Twitter and Google OAuth, Grunt, Jasmine, HTML, CSS, and UI-Router for the settings.
After I ran npm install and bower install. There were some unmet dependencies, so I installed
TypeScript, locally
Mocha, locally
Tslint, locally
Also, I was getting an error during build that was resolved by installing
grunt-babel#5.0.0, locally.
Now, when I run "grunt serve" It all works just fine, except when I go to the Admin page at http://localhost:9000/admin. There is no list of users. Instead it says, "The delete user and user index api routes are restricted to users with the 'admin' role." All of the links on the navigation bar are dead, except for the app title.
When I check the console I get these two errors:
Uncaught Error: [$injector:nomod] Module
'perfectAlgorithmDrillsApp.auth' 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.
Uncaught Error: [$injector:nomod] Module
'perfectAlgorithmDrillsApp.admin' 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.
I triple-checked. They are not misspelled and they are correctly included in the list of module dependencies.
Further errors arise because the module isn't loaded. Obviously, it can't find the controllers, since those modules aren't loaded.
At this point, I have not added or changed any code.
I've tried a couple things to resolve the situation:
updating yo and angular-fullstack and then recreating the project from scratch.
wrapping those "missing" modules in IFFE's.
I updated node.js to the latest LTS version
More Details:
I am running everything on OSX El Capitan 10.11.2
I'm running node version 4.2.6, npm version 2.14.12, yeoman 1.6.0
in the yo.rc file it says the generator version is "3.3.0-beta.0"
I have mongod running.
I'm doing my work in WebStorm, but I haven't used anything that's built in. It's all been command line.
The TypeScript is being compiled correctly, as the .tmp directory looks good.
I made sure grunt-cli is installed.
Thanks so much for the help. Let me know if you need any more details.
I too had this exact problem. The long answer (plus some other answers to questions you might not be asking for yet or possibly ever) is here, but in short, replace var module = /\.module\.js$/; with var module = /[\w/]+.module.ts$/; inside Gruntfile.js.
If that doesn't work, try going here to see the whole thread on this issue.
I'm just trying to run mean.js using grunt. Just did the installation steps in http://meanjs.org. But when loaded in localhost, console is showing error
Uncaught ReferenceError: angular is not defined
Can any one help how to resolve this problem?
It sounds like angular is not included on the page.
When the install process is over, npm will initiate a bower install command to install all the front-end modules needed (including angular) for the application
You can run bower manually using
bower install --config.interactive=false
make sure that angular appears in the public/lib folder and included on the page.
I'm just learning mean.js . Just did the installation steps in http://meanjs.org .
But when loaded in browser, console is showing error Uncaught ReferenceError: angular is not defined . do we need to include angularjs separately ?
Use this command
bower install --allow-root
No, you dont need to add angularjs one more time because angularjs is added as default in meanjs project.
You may try:
npm install
This command will install node packages and bower packages.
And then run project again:
npm start
Check running meanjs at http://localhost:3000
Hopefully you have a nice time with meanjs.
I'm using the yeoman generator-gulp-angular to scaffold my app. I installed ng-18next with bower, and the package and it's dependency were both correctly installed in the bower_components directory. However, when I run gulp serve and view the source the components aren't being injected into page, so I get a module instantiation error. If I hard code the deps into the page there are no errors. I also tried bower install --save and the deps are inserted into the bower.json file correctly. Any ideas?
Thanks.
I had hard-coded script references in index.html. Even though they were commented, this caused them not to be injected with wiredep.
I've been trying to create a project that utilizes AngularJS, Browserify and Gulp for an excellent developer experience, one that produces a distributable 'module' (in Angular parlance). The idea being to have a self-documented project, like Angular Bootstrap, that also produces a consumable distribution for use in another application.
We've had great results with Gulp, but we're having trouble with browserify/browserify-shim. Also, unfortunately, most of the examples out there either don't use gulp, or use gulp-browserify, which has been blacklisted/ended.
We're including AngularJS and JQuery from Google CDN as <script> tags and have declared "angular" : "global:angular" and "jquery" : "global:$" in our browserify-shim config in package.json, but we're getting "cannot find module" when we try to user var angular = require('angular') and var $ = require('jquery') inside of our browserified-code (once it runs in the browser).
I've created a sample project that distills this down close to the minimum.
A sample repository of the code is available at
Once cloned, you would run 'npm install', then 'bower install', then 'gulp' from the root of the multi-browserify folder to generate the files and run the test server.
With gulp running, you can access the live HTML at http://:4000/gulp.html
Any help would be greatly appreciated - I'm wondering if we've come across a bug/issue with the intersection of gulp, browserify, vinyl-source-stream, etc, or more likely, we just don't quite get it yet.
Is retrieving your dependencies from a CDN a requirement? If not, you could use npm for your dependencies and let browserify magic them up for you.
JQuery and Angular are available via npm, so using jquery as an example you could just declare it in your package.json, like so:
...
"dependencies": {
"jquery": "^1.11.1"
},
...
Alternatively, running npm install <package> -s from the directory containing your package.json will install the specified module and save it as a dependency in your package.json file.
Once you have installed this dependency (and any others you desire), you can go ahead and use them in your app.js as follows:
var $ = require('jquery');
$('<div>Hello World, I\'m using JQuery!</div>').appendTo('body');
Simple as that, and no need to use bower or browserify-shim - browserify will look through your node_modules folder and find them. I haven't tried this with angular (I had an issue trying to install it) - but it is available through npm, so it should work.
# assuming you have installed jquery locally instead of globally
npm install jquery -s # without -g flag
instead of require("jquery"), give relative path from source directory
require("./node_modules/jquery/dist/jquery.min.js");
Try the following:
<script>window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>
OR
<script>var $ = jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>