Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

James Kim
James Kim
8,475 Points
Posted by James Kim
James Kim
8,475 Points

Uncaught Error: [$injector:modulerr] Angular, Angular-ui-router with Webpack

I've been having this problem for awhile, but I can't seem to crack it. I'm using angular 1.5, angular-ui-router 0.2.18 (from bower components) with webpack 1.13.1 and I provided the code on the bottom. I'm getting the error messages with a Link 1 that directs me to angular's website saying this error happens when a module fails to load due to some exception and saying to use ngRoute (but I'm not using ngRoute) and on top of that it shows another Link 2 saying my module is not available. So I'm not sure if its angular or angular-ui-router causing this.

webpack.config.js

var webpack = require('webpack');
var debug = process.env.NODE_ENV !== "production";
var bower_dir = __dirname + '/public//bower_components';
module.exports = {
    context: __dirname + '/public/app/',
    entry: {
        app: './app.js',
        vendor: ['angular']
    },
    output: {
        path: __dirname + '/public/app',
        filename: 'app.min.js'
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap:  false })
    ],
    resolve: {
        alias: {
            'jquery': bower_dir + '/jquery/dist/jquery.js',
            'angular': bower_dir + '/angular/angular.min.js'
        }
    }
};

app.js

require("../bower_components/jquery/dist/jquery.min.js");
require("../bower_components/bootstrap/dist/js/bootstrap.min.js");
require("../bower_components/slick-carousel/slick/slick.min.js");
var ui_router = require("../bower_components/angular-ui-              router/release/angular-ui-router.js");
require("../bower_components/angular/angular.min.js");
var app = angular.module("flyHawaii", [ui_router]);
app.config(function($stateProvider, $urlRouterProvider){
    $stateProvider.state("landing", {
        url: "/",
        templateUrl: "../templates/_landing.html",
        controller: "mainCtrl"
    });
    $urlRouterProvider.other("/");
});
app.controller("myCtrl", function($scope){
    $scope = "fooBar";
});

index.html:

<!DOCTYPE html>
<html lang="en" ng-app="flyHawaii">
<head>
    <title>flyhawaii</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-controller="mainCtrl">
    <div ui-view></div>
    <script src="app/app.min.js"></script>
</script>
</body>
</html>

UPDATE

navbar.html is a template which leads to a component for _landing.html:

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <h1><a class="navbar-brand" href="#"></a>{{message}}</h1>
</div>

_landing.html:

<navbar></navbar>