未捕获错误:[$ injector:modulerr] Angular,Angular-ui-router with Webpack

时间:2016-06-24 07:10:17

标签: javascript angularjs angular-ui-router webpack

我已经有一段时间没有这个问题了,但我似乎无法破解它。我使用angular 1.5,angular-ui-router 0.2.18(来自bower组件)和webpack 1.13.1,我在底部提供了代码。我收到了Link 1的错误消息,该消息指示我访问有角度的网站,说当由于某些异常导致模块无法加载并且说使用ngRoute时会发生此错误(但我&#39} ;我没有使用ngRoute)并且最重要的是它显示另一个Link 2说我的模块不可用。因此,我不确定它的角度或角度ui路由器是否会导致此问题。

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>

更新

navbar.html是一个模板,它指向_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>

0 个答案:

没有答案