angular1 - 未捕获的错误 $injector:modulerr;角路由器答案

【问题标题】：angular1 - Uncaught Error $injector:modulerr; angular-routerangular1 - 未捕获的错误 $injector:modulerr;角路由器
【发布时间】：2016-10-21 20:46:00
【问题描述】：

我正在尝试设置角度路由器。

我正在关注this 教程。

我已经使用 bower 安装了 angular 和 angular-router 并在我的 html 中列出了它们。一切似乎都按预期加载（控制台中没有 404 错误），所以脚本在那里：

<html>
<head>
    <title>Miha Šušteršič</title>
    <!-- JQUERY -->
    <script src="assets/vendor/jquery/dist/jquery.min.js"></script>
    <!-- FOUNDATION -->
    <script src="assets/vendor/foundation-sites/dist/foundation.min.js"></script>
    <!-- ANGULAR -->
    <script src="assets/vendor/angular/angular.min.js"></script>
    <script src="assets/vendor/angular-route/angular-route.min.js"></script>
    <!-- APP -->
    <script src="assets/js/app.min.js" type="text/javascript"></script>
    <!-- FOUNDATION -->
    <link rel="stylesheet" href="assets/vendor/foundation-sites/dist/foundation.min.css">
    <!-- APP -->
    <link rel="stylesheet" href="assets/css/main.css">
</head>
<body ng-app="IntroductionApp">
    <!-- ANGULAR APP -->
    <portfolio></portfolio>
    <!-- FOUNDATION -->
    <script>
        $(document).foundation();
    </script>
</body>
</html>

现在我正在尝试设置一些基本路由。这是我的 app.js 文件（编译成 angular.min.js）：

// MAIN ANGULAR JS FILE
angular
    .module('IntroductionApp', ['ngRoute'])
    .config(['$locationProvider', '$routeProvider',
        function config($locationProvider, $routeProvider) {
            $locationProvider.hasPrefix('!');

            $routeProvider.
                when('/landing', {
                  templateUrl: 'templates/landing.html'
                }).
                when('/portfolio', {
                  templateUrl: 'templates/portfolio.html'
                }).
                otherwise('/landing');
            }
    ]);

现在我在控制台中收到以下错误：

angular.js:68 未捕获的错误：[$injector:modulerr] 失败实例化模块 IntroductionApp 由于：TypeError: t.hasPrefix is 不是函数在http://localhost:48080/assets/js/app.min.js:1:108 在 Object.invoke (http://localhost:48080/assets/vendor/angular/angular.js:4709:19) 在 runInvokeQueue (http://localhost:48080/assets/vendor/angular/angular.js:4602:35) 在http://localhost:48080/assets/vendor/angular/angular.js:4611:11 在 forEach (http://localhost:48080/assets/vendor/angular/angular.js:321:20) 在 loadModules (http://localhost:48080/assets/vendor/angular/angular.js:4592:5) 在 createInjector (http://localhost:48080/assets/vendor/angular/angular.js:4514:19) 在 doBootstrap (http://localhost:48080/assets/vendor/angular/angular.js:1751:20) 在引导程序 (http://localhost:48080/assets/vendor/angular/angular.js:1772:12) 在 angularInit (http://localhost:48080/assets/vendor/angular/angular.js:1657:5) http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=IntroductionApp&p1=…2F%2Flocalhost%3A48080%2Fassets%2Fvendor%2Fangular%2Fangular.js%3A1657%3A5)

我做错了什么？

【问题讨论】：

您应该更改为angular.js 而不是angular.min.js 来解决此问题，因为缩小版不会给出明确的错误消息。此外，您有时可以通过将ng-strict-di 添加到ng-app 所在的元素来发现依赖注入错误。
使用错误日志更新了主要问题

标签： javascript angularjs ngroute angularjs-ng-route

【解决方案1】：

错别字

$locationProvider.hasPrefix('!');

应该是

$locationProvider.hashPrefix('!');

【讨论】：