Gulp在我的IDE中编译，但在使用nodemon查看本地主机时打破了网站

我对编码相当陌生，但成功地使用了Gulp几次，因此我不确定自己做错了什么。在试图自己解决这个问题时，我已经删除了node_modules并重新安装了，将我的CDN更新为最新版本，（暂时）禁用了js和css的缩小，并且双重检查了我的文件路径被正确引用。另外，在使用Gulp之前，脚本的所有文件路径都在index.html中硬编码并且工作正常。Gulp在我的IDE中编译，但在使用nodemon查看本地主机时打破了网站

目前Gulp似乎是在我的IDE（原子）编译，但是当我使用nodemon，并去localhost，我的网站被打破。这些错误检查器会为我有：

GET http://localhost:5000/bundle.css localhost/:23 
GET http://localhost:5000/bundle.js angular.js:38 
Uncaught Error: [$injector:modulerr]

Here's what my file structure looks like

这里是我的代码：

//index.html 

<!DOCTYPE html> 
<html ng-app="app"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="./bundle.css" media="screen" title="no title"> 
    <title></title> 
    </head> 

    <body> 
    <ui-view></ui-view> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script> 
    <script src="./bundle.js"></script> 

    </body> 

</html> 

//gulpfile.js 
var gulp = require('gulp'); 
var concat = require('gulp-concat'); 
var sass = require('gulp-sass'); 
var annotate = require('gulp-ng-annotate'); 

var uglify = require('gulp-uglify'); 
var rename = require('gulp-rename'); 
var cssmin = require('gulp-cssmin'); 
var htmlmin = require('gulp-htmlmin'); 
var watch = require('gulp-watch'); 

var paths = { 
    jsSource: ['./public/js/**/*.js'], 
    sassSource: ['./public/styles/**/*.scss'], 
    indexSource: ['./public/index.html'], 
    routesSource: ['./public/routes/**/*.html'] 
}; 

gulp.task('sass', function() { 
return gulp.src(paths.sassSource) 
    .pipe(sass()) 
    .pipe(concat('bundle.css')) 
    .pipe(gulp.dest('./dist')); 
}); 

gulp.task('js', function() { 
    return gulp.src(paths.jsSource) 
     .pipe(concat('bundle.js')) 
     // .pipe(annotate()) 
     // .pipe(uglify()) 
     // .pipe(rename({extname: ".min.js"})) 
     .pipe(gulp.dest('./dist')) 
}); 

gulp.task('routes', function() { 
    gulp.src(paths.routesSource) 
     .pipe(htmlmin({collapseWhitespace: true})) 
     .pipe(gulp.dest('./dist/routes')) 
}) 

gulp.task('index', function() { 
    gulp.src(paths.indexSource) 
     .pipe(htmlmin({collapseWhitespace: true})) 
     .pipe(gulp.dest('./dist')) 
}) 

gulp.task('watch', function() { 
    gulp.watch(paths.jsSource, ['js']); 
    gulp.watch(paths.sassSource, ['sass']); 
    gulp.watch(paths.indexSource, ['index']); 
    gulp.watch(paths.routesSource, ['routes']); 
}); 

gulp.task('default', ['js', 'sass', 'watch', 'index' 
]);

而且，我被要求给一个控制器和服务的decloration的例子。

//homeCtrl 
angular.module('app') 
    .controller('homeCtrl', function ($scope, $state, mainService, homeService, user) { 

    $scope.user = user; 

    $scope.addpo = function (ponum) { 
    homeService.addpo(ponum).then(function (response) { 
     alert("PO added successfully"); 
     $state.reload('home'); 
    }) 
    }; 
//homeService 
angular.module('app') 
.service('homeService', function ($http) { 
    this.addpo = function (ponumber) { 
    return $http ({ 
     method: 'POST', 
     url: '/api/checkin', 
     data: { 
     ponumber: ponumber, 
     checkpoint_id: 1 
     } 
    }).then(function (response) { 
     return response.data; 
    }); 
}; 

});

来源

2017-03-01 howdy_c

你_“注入” _控制器和适当的服务与他们的依赖呢？这可能会导致这种错误。 '未捕获的错误：[$ injector：modulerr]'表示无法解析依赖关系。发布一个控制器声明和你的服务的例子。这对你的帮助很有用。 – lealceldeiro

@lealceldeiro感谢您的快速回复！澄清，尽管在使用Gulp之前一切工作正常，控制器有可能没有正确注入？如果是这样，我会完全开始修复。 –

是的，这完全有可能。在对文件进行缩小之前，即使它们没有正确“注入”，也不会抛出任何错误。只有在缩小后才会抛出这些错误。这是因为AngularJS的注射系统如何工作。这就是我要求你提供控制器/服务声明的一段代码，例如'angular.module（'app'）.controller（'myCtrl'，function（someService）{// ...}）;' – lealceldeiro

更换

//homeCtrl 
angular.module('app') 
    .controller('homeCtrl', function ($scope, $state, mainService, homeService, user) { 
//...

为

//homeCtrl 
angular.module('app') 
    .controller('homeCtrl', ['$scope', '$state', 'mainService', 'homeService', 'user', function ($scope, $state, mainService, homeService, user) { 
//...

注意，现在你必须在年底]关闭支架，前)

，做同样的永远y控制器和服务依赖于您的项目。

还有另一种方法可以做到这一点，但最终的结果是一样的。您可以咨询它的$injector服务的官方文档，

...或者你可以使用ng-annotate

来源

2017-03-01 21:50:11 lealceldeiro

只要您提到它，我就给出这是一个镜头，但我无法解决问题。到一天结束的时候，我做了一个非常基本的应用程序来尝试隔离问题。你是对的，只要我进入一个控制器和服务，我得到[$ injector：modulerr]，后面跟着ng-app的名字，在上面的例子中是“app”，但是因为我已经把它重命名为houndApp。这是错误： [$ injector：modulerr]无法实例化模块houndApp，原因如下：错误：[$ injector：nomod]模块'houndApp'不可用！' –

但....要小心，这可能是其他（和不同的故事），当这个错误说'错误：[$注射器：nomod]模块'houndApp'不可用！'它可能意味着模块''houndApp' 'ng-app'指令试图找到它（由于拼写错误，没有导入一些'js'文件或任何其他问题）。如果我是你，我会仔细检查所有这些细节。 – lealceldeiro

这里有一些相关的问题与这个主题类似的解决方案：http://stackoverflow.com/questions/41002441/angular-depandency-problems-at-minify-compiling和http://stackoverflow.com/questions/40639922/ angularjs脚本 - 犯规 - 工作后，部署-IT-给出错误，injectorunpr / – lealceldeiro

Gulp在我的IDE中编译，但在使用nodemon查看本地主机时打破了网站

回答

相关问题