我已经有一段时间没有这个问题了,但我似乎无法破解它。我使用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>