Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to include ui.router in AngularJS project?

I keep getting this error:

`Error: [$injector:nomod] Module 'ui.router' is not available! You either misspelled the module name or forgot to load it.

But I am pretty sure I have everything configured correctly

The project was created with Yeoman and uses Bower to manage dependencies, with Grunt to build everything.

The yeoman angular generator created the boilerplate with the basic ngRouter, so I installed ui.router with

bower install angular-ui-router --save

Angular Version

1.2.16

Bower file

The above line updated the bower.json file with this line in the dependencies list:

"angular-ui-router": "~0.2.10"

app Module set up

I updated the app.js file with by adding the dependency on ui.route (in addition to various other dependencies) angular.module('app', ['ngRoute', ... 'ui.router'])

index.html

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
...
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbower -->
<!-- endbuild -->

I have the above file in the above directory, I am positive it is there (I copied and pasted the path to avoid typos). I also tried the minified version with no difference.

EDIT

I am very, very new to all of this (angular, bower, yeoman, etc) So I may very well be doing this all wrong, so could it be that I no longer need to include the ui.router dependency? I mean, has it been integrated to the core angular framework somehow? Is ui.router deprecated?

like image 324
Cabbagesocks Avatar asked Jun 23 '14 21:06

Cabbagesocks


1 Answers

I'm dumb. Found the answer from this link. When running grunt on the cmd line, it is configured to not only build and check for errors, but run tests as well (using karma which I do not understand yet).

So what needed to change was the karma config file:

<project root>/test/karma.conf.js

Below, the indented line was what I needed to add:

// list of files / patterns to load in the browser
    files: [
      'bower_components/angular/angular.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'bower_components/angular-animate/angular-animate.js',
      'bower_components/angular-cookies/angular-cookies.js',
      'bower_components/angular-resource/angular-resource.js',
      'bower_components/angular-route/angular-route.js',
      'bower_components/angular-sanitize/angular-sanitize.js',
      'bower_components/angular-touch/angular-touch.js',
         'bower_components/angular-ui-router/release/angular-ui-router.js',
      'app/scripts/**/*.js',
      'test/mock/**/*.js',
      'test/spec/**/*.js'
    ],
like image 56
Cabbagesocks Avatar answered Oct 18 '22 15:10

Cabbagesocks