モジュールスターターのインスタンス化に失敗しました：TypeError：$ stateProvider.stateが関数ではありません

私は新しい角度です。私はサーバー上でアプリケーションを実行しようとしていますが、これをエラーとして取得しています。

Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to: 
TypeError: $stateProvider.state is not a function

私app.js

は

angular.module('starter', ['ngRoute','ui.router', 'ngAnimate','controllers', 'services']) 
.config(['$urlRouterProvider', '$stateProvider', function ($stateProvider, $urlRouterProvider) { 
$stateProvider 
    .state('college', { 
    url: '/college', 
    templateUrl: 'html/colleges.html', 
    controller: 'collegeCtrl' 
    }) 
    $urlRouterProvider.otherwise('/college'); 
}]);

私のindex.htmlページには、以下の

<!DOCTYPE html> 
<html> 
<head> 
<!--Import Google Icon Font--> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
<!--Import materialize.css--> 
<link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css" media="screen,projection" /> 
<link type="text/css" rel="stylesheet" href="css/style.css" /> 
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css" /> 
<!--Import jQuery before materialize.js--> 
<script type="text/javascript" src="node_modules/angular/angular.js"></script> 
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.js"></script> 
<script type="text/javascript" src="node_modules/angular-route/angular-route.js"></script> 

<script type="text/javascript" src="node_modules/angular-animate/angular-animate.js"></script> 
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 
<script type="text/javascript" src="app.js"></script> 
<script type="text/javascript" src="materialize/js/materialize.min.js"> 
</script> 
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script> 
<!--controllers --> 
<script type="text/javascript" src="controllers/collegeCtrl.js"></script> 
<!--Services --> 
<script type="text/javascript" src="services/httprequestService.js"> 
</script> 
<!--Let browser know website is optimized for mobile--> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
</head> 
<body ng-app="starter"> 
<div class="content"> 
<div ui-view ng-class="transition"> 
    default content 
</div> 
</div> 
</body> 
</html>

アップデートのようになります

colleges.jsある

angular. 
module('controllers',[]). 
controller('collegeCtrl', function ($scope,$state) { 

});

私は本当に理解していない、何がうまくいかない。私は解決策のためのエラーを見つけたが、うまくいかなかった。エラーで私を助けてください。事前

出典

2017-10-04 Karrthik

の依存性注入の不一致ソートすることができ注入何であれ試してみてください

<html lang="en" ng-app="starter">

出典

2017-10-04 06:45:14

魅力的な作品です。私がやっていた間違いは何だったのですか？ bodyセクションにng-appを追加しました。どんな違いがあるの？ – Karrthik

bodyタグでも動作するはずなので、バージョンの問題があるかもしれません。 https://ui-router.github.io/ng1/tutorial/helloworld –

で

おかげで、これを試してみてください：

.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) { 
... 
}

あなたが同じ順序でなければなりませんか、そうでなければあなたができる問題

出典

2017-10-04 06:16:25 Raghav

申し訳ありません。それはうまくいかなかった。エラーは同じままです。 – Karrthik

注入の前に 'npm install angular-ui-router'を実行する必要があります。https://github.com/angular-ui/ui-router/tree/legacy – Raghav

私はこれを行い、 index.htmlにあるangle-ui-router.jsのパス – Karrthik

モジュールスターターのインスタンス化に失敗しました：TypeError：$ stateProvider.stateが関数ではありません

答えて

関連する問題