0
코딩에 익숙하지 않지만 Gulp를 성공적으로 몇 번 사용했기 때문에 내가 잘못하고 있는지 확실하지 않습니다. 이 문제를 스스로 해결하려고 시도하면서 node_modules를 삭제하고 다시 설치하고 최신 CDN을 업데이트 한 다음 (일시적으로) js 및 css의 축소를 비활성화하고 내 파일 경로를 이중으로 올바르게 확인했습니다. 또한 Gulp를 사용하기 전에 스크립트에 대한 모든 파일 경로가 index.html에 하드 코드되어 잘 작동했습니다.내 IDE에서 꿀꺽 꿀꺽하게 컴파일되지만 nodemon을 사용하여 localhost를 볼 때 사이트가 깨집니다.
현재 꿀꺽 꿀꺽하는 소리가 내 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
을 그리고 여기 내 코드입니다 : 오류 관리자 나이 제공 또한, 나는 컨트롤러와 서비스의 decloration의 예를 제공하도록 요청 받았다
//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'
]);
.
//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;
});
};
});
ng-annotate 당신에게 있습니까 컨트롤러 및 서비스를 사용할 수 있습니까? 이런 종류의 오류가 발생할 수 있습니다. 'Uncaught Error : [$ injector : modulerr]'는 의존성을 해결할 수 없음을 나타냅니다. 당신의 컨트롤러와 서비스에 대한 선언의 예를 게시하십시오. 그것은 당신을 돕기 위해 유용 할 것입니다. – lealceldeiro
@lealceldeiro 빠른 답장을 보내 주셔서 감사합니다! 명확하게하기 위해, Gulp를 사용하기 전에 모든 것이 올바르게 작동했지만 제어기가 정확하게 주입되지 않을 가능성이 있습니다. 그렇다면, 나는 완전히 수정 작업을 시작할 것입니다. –
예, 가능합니다. 파일을 축소하기 전에 _ "주입"하지 않아도 오류가 발생하지 않습니다. 축소 이후에만 오류가 발생합니다. 이것은 AngularJS의 주입 시스템이 어떻게 작동하기 때문입니다. Controller ('myCtrl', function (someService) {// ...}); ' – lealceldeiro