AngularJS - エラー：未知のエラー：[$ injector：modulerr] http：//

私はAngularJSを初めて使っていて、小さなウェブサイトで作業しています。現時点では、すべてのページをリンクして、Gulpで配布用のフォルダを作成しています。配布は問題なく作成されますが、私は上記のエラーを得ることになります。それは

var gulp = require('gulp'), 
    minifycss = require('gulp-minify-css'), 
    jshint = require('gulp-jshint'), 
    stylish = require('jshint-stylish'), 
    uglify = require('gulp-uglify'), 
    usemin = require('gulp-usemin'), 
    imagemin = require('gulp-imagemin'), 
    rename = require('gulp-rename'), 
    concat = require('gulp-concat'), 
    notify = require('gulp-notify'), 
    cache = require('gulp-cache'), 
    changed = require('gulp-changed'), 
    rev = require('gulp-rev'), 
    browserSync = require('browser-sync'), 
    ngannotate = require('gulp-ng-annotate'), 
    del = require('del'); 

gulp.task('jshint', function() { 
    return gulp.src('app/scripts/**/*.js') 
    .pipe(jshint()) 
    .pipe(jshint.reporter(stylish)); 
}); 

// Clean 
gulp.task('clean', function() { 
    return del(['dist']); 
}); 

// Default task 
gulp.task('default', ['clean'], function() { 
    gulp.start('usemin', 'imagemin','copyfonts'); 
}); 

gulp.task('usemin',['jshint'], function() { 
    return gulp.src('./app/**/*.html') 
     .pipe(usemin({ 
     css:[minifycss(),rev()], 
     js: [ngannotate(),uglify(),rev()] 
     })) 
     .pipe(gulp.dest('dist/')); 
}); 

// Images 
gulp.task('imagemin', function() { 
    return del(['dist/images']), gulp.src('app/images/**/*') 
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) 
    .pipe(gulp.dest('dist/images')) 
    .pipe(notify({ message: 'Images task complete' })); 
}); 

gulp.task('copyfonts', ['clean'], function() { 
    gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*') 
    .pipe(gulp.dest('./dist/fonts')); 
    gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*') 
    .pipe(gulp.dest('./dist/fonts')); 
}); 

// Watch 
gulp.task('watch', ['browser-sync'], function() { 
    // Watch .js files 
    gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}', ['usemin']); 
     // Watch image files 
    gulp.watch('app/images/**/*', ['imagemin']); 

}); 

gulp.task('browser-sync', ['default'], function() { 
    var files = [ 
     'app/**/*.html', 
     'app/styles/**/*.css', 
     'app/images/**/*.png', 
     'app/scripts/**/*.js', 
     'dist/**/*' 
    ]; 

    browserSync.init(files, { 
     server: { 
     baseDir: "dist", 
     index: "index.html" 
     } 
    }); 
     // Watch any files in dist/, reload on change 
    gulp.watch(['dist/**']).on('change', browserSync.reload); 
    });

を場合に役立ちます。ここに私のコード

index.htmlを

<!DOCTYPE html> 
<html lang="en" ng-app="arabicApp"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head 
     content must come *after* these tags --> 

    <title>Ristorante Con Fusion</title>  
     <!-- Bootstrap --> 
<!-- build:css styles/main.css --> 
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> 
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 
    <!--<link href="styles/bootstrap-social.css" rel="stylesheet"> 
    <link href="styles/mystyles.css" rel="stylesheet">--> 
<!-- endbuild --> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 

<body> 

    <div ui-view="sidebar"></div> 
    <div ui-view="content"></div> 

    <!-- build:js scripts/main.js --> 
     <script src="../bower_components/angular/angular.min.js"></script> 
     <script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script> 
     <!--<script src="https://code.angularjs.org/1.6.4/angular.js"></script> 
     <script src="https://code.angularjs.org/1.6.4/angular-route.js"></script>--> 
     <script src="scripts/app.js"></script> 
     <!--<script src="scripts/controllers.js"></script> 
     <script src="scripts/services.js"></script>--> 
    <!-- endbuild --> 

</body> 

</html>

app.js

'use strict'; 

angular.module('arabicApp', ['ui-router', 'ngResource']) 
    .config(function($stateProvider, $urlRouterProvider) { 
     $stateProvider 
      .state('app', { 
       url:'/', 
       views: { 
        'sidebar': { 
         templateUrl: 'views/sidebar.html', 
        }, 
        'content': { 
         templateUrl : 'views/home.html', 
         //controller : 'IndexController' 
        } 
       } 
      }) 
      .state('app.verbSelect', { 
       url: 'verbSelect', 
       views: { 
        '[email protected]': { 
         templateUrl: 'views/VerbSelect.html', 
         //controller: 'verbsController' 
        } 
       } 
      }) 
      .state('app.verbPractice', { 
       url: 'verbPractice', 
       views: { 
        '[email protected]': { 
         templateUrl: 'views/verbPractice.html', 
         //controller: 'verbsController' 
        } 
       } 
      }); 
     $urlRouterProvider.otherwise('/'); 
    }) 
;

sidebar.html

<div id="sidebar-wrapper"> 
    <ul class="sidebar-nav"> 
     <li class="sidebar-brand"><a href="#">Lessons</a></li> 
     <li><a ui-sref="app.verbSelect">Verbs</a></li> 
     <li><a ui-sref="app">Nouns</a></li> 
    </ul> 
</div>

は、ここに私のgulpfile.jsあります

誰かが私がここで行方不明を説明できますか？どうやら、私はすべきことを含めていません。どんな助けもありがとう。

はあなたに

編集ありがとう：ここでエラー

main-665edfe53c.js:1 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=arabicApp&p1=Error%…20(http%3A%2F%2Flocalhost%3A3000%2Fscripts%2Fmain-665edfe53c.js%3A1%3A8239) 
    at main-665edfe53c.js:1 
    at main-665edfe53c.js:1 
    at o (main-665edfe53c.js:1) 
    at u (main-665edfe53c.js:1) 
    at Bt (main-665edfe53c.js:1) 
    at i (main-665edfe53c.js:1) 
    at Q (main-665edfe53c.js:1) 
    at X (main-665edfe53c.js:1) 
    at main-665edfe53c.js:6 
    at HTMLDocument.n (main-665edfe53c.js:1)

編集です：ここに私のbower.jsonファイルです。エラーが、私は私のapp.jsファイルに依存「UI-ルータ」を追加事実によって引き起こされた：私はそれがここに

{ 
    "name": "class", 
    "description": "Arabic Class", 
    "main": "index.html", 
    "keywords": [ 
    "Arabic", 
    "Class", 
    "Practice" 
    ], 
    "authors": [ 
    "Ba" 
    ], 
    "license": "MIT", 
    "homepage": "", 
    "dependencies": { 
    "bootstrap": "^3.3.7", 
    "angular": "^1.6.4", 
    "angular-ui-router": "^0.4.2" 
    }, 
    "devDependencies": { 
    "font-awesome": "^4.7.0", 
    "angular-resource": "^1.6.4", 
    "angular-route": "^1.6.4", 
    "angular": "^1.6.4", 
    "angular-ui-router": "^0.4.2" 
    } 
}

編集などの価値があるかもしれないと思います。問題を見つけようと2日後、私は代わりに 'ui.router'を追加しなければならないことに気付きました。それはイライラしていた！

出典

2017-04-13 The_Questioner

コンソールから完全なエラー・トレースを共有することはできますか？どのモジュールがそれについて不平を言っていますか？ –

@ Pete。確かに。投稿を編集します –

角度エラーページ（エラーログのURL）を確認していただきたいと思います。また、あなたのアプリケーションに '' ngResource''の依存関係がありますが、それは含まれていないようです。 ngResourceは 'angular.js'に含まれていない別のjsファイルに入っています。 https://code.angularjs.org/1.6.4/angular-resource.js –

あなたはngResourceを含める必要があります。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.js" type="text/javascript"></script>

または、バウアーを使用している場合：その後、

bower install angular-resource#1.6.4

とあなたのindex.htmlに追加します。

<script src="../bower_components/angular-resource/angular-resource.js"></script>

また、あなたのde細分化するときに文字列の配列で保留にするAngularJSドキュメントのa note on minificationを参照してください。ここで

はinject property annotationを注入し、あなたのconfigです：

// arabic-app.module.js 
(function() { 

    'use strict'; 

    angular.module('arabicApp', ['ui-router', 'ngResource']); 

})(); 

// arabic-app.config.js 
(function() { 

    'use strict'; 

    angular.module('arabicApp').config(Config); 

    Config.$inject = ['$stateProvider', '$urlRouterProvider'] 

    function Config($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('app', { 
     url: '/', 
     views: { 
      'sidebar': { 
      templateUrl: 'views/sidebar.html', 
      }, 
      'content': { 
      templateUrl: 'views/home.html', 
      //controller : 'IndexController' 
      } 
     } 
     }) 
     .state('app.verbSelect', { 
     url: 'verbSelect', 
     views: { 
      '[email protected]': { 
      templateUrl: 'views/VerbSelect.html', 
      //controller: 'verbsController' 
      } 
     } 
     }) 
     .state('app.verbPractice', { 
     url: 'verbPractice', 
     views: { 
      '[email protected]': { 
      templateUrl: 'views/verbPractice.html', 
      //controller: 'verbsController' 
      } 
     } 
     }); 
    $urlRouterProvider.otherwise('/'); 
    } 

})();

出典

2017-04-13 20:53:15 cnorthfield

返事をありがとう。私はあなたのapp.jsファイルを置き換えましたが、私はまだ同じエラーが発生します。 –

['ngResource']（https://docs.angularjs.org/api/ngResource）もありません。私の更新された回答を参照してください – cnorthfield

実際には、Bowerでダウンロードした後にangular-resource.min.jsファイルを含めてしまいました。上記の私のコメントを参照してください。しかし、私はまだ同じエラーが発生しています。なぜ私は分からない。 –

AngularJS - エラー：未知のエラー：[$ injector：modulerr] http：//

答えて

関連する問題