How to include ui.router in an AngularJS project?

Question

I keep getting this error:

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

But I'm sure everything is set up correctly

The project was created using Yeoman and uses Bower to manage dependencies, and Grunt is everything.

The yoman angular generator created a template with the base 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 dependency list:

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

module setup application

I updated the app.js file by adding a 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'm sure it is (I copied and pasted the path to avoid typos). I also tried the mini version without any differences.

EDIT

I am very, very new to all of this (angular, bower, yeoman, etc.). So I can very well do it all wrong, so maybe I no longer need to include the ui.router dependency? I mean, is it somehow integrated into the underlying angular infrastructure? Is ui.router outdated?

Answer 1

I'm dumb. Found the answer from this link . When running grunt in the cmd line, it is configured not only to build and check errors, but also to run tests (using karma, which I still don't understand).

So what needed to be changed, this is the karma configuration file:

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

The following indented line has been added:

 // 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' ], 

Answer 2

Follow this link, you will get the full structure for working with angular.js using ui router

Github repository