Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up


I am having a problem with setting up bowerSync, Gulp and angularJs.

I have set up my local development server with bowerSync and now I am trying to add angularJs to the project. But every time I run the development server my browser freezes and this problem occurs:
In Chrome it shows error in console and displays tried to load angular more than once (It starts to loop).

Here is my gulpfile:

    var gulp = require('gulp'),
    sass = require('gulp-sass'),
    bs = require('browser-sync').create(),
    concat = require('gulp-concat'),
    clean = require('gulp-clean'),
    merge = require('merge-stream'),
    install = require('gulp-install'),
    gutil = require('gulp-util'),
    wait = require('gulp-wait'),
    help = require('gulp-showhelp'),
    source = require('vinyl-source-stream'),
    browserify = require('browserify');

gulp.task('browserify', function(){
    return browserify('app/js/app.js')
        .bundle()
        .pipe(source('main.js'))
        .pipe(gulp.dest('js'));
})



//Installs bower and npm components for the project

gulp.task('install', function(){
    return gulp.src(['bower.json', 'package.json'])
            .pipe(install());
}).help="Installs bower and npm dependencies";

//Cleans dist and .tmp folders from the previous files

gulp.task('clean', function(){
    var cleanTmp = gulp.src('dist')
                .pipe(clean({read:false}));
    var cleanDist = gulp.src('.tmp')
                .pipe(clean({read:false}));
    return merge(cleanDist, cleanTmp)
            .pipe(wait(1500));

}).help="Cleans .tmp and dist folder from previous compiled files";

//Launches the development server

gulp.task('browser-sync', ['sass'], function(){
    bs.init(['app/index.html', 'app/views/**/*.html', 'app/css/*.css', 'app/js/**/*.js'],{
        server: {
            baseDir: "./",
            index: "app/index.html",
            routes: {
                "/bower_components": "bower_components",    
                "/css": "app/css",
                "/images": "app/images",
                "/app": "app" 

                }
            },
        ghostMode: {
                links: false
            }
    });
}).help="Sets up the local development environment";

//Compiles css files

gulp.task('sass', function(){
    return gulp.src('app/scss/*.scss')
        .pipe(sass())
        .pipe(concat('main.css'))
        .pipe(gulp.dest('app/css'))
        .pipe(bs.reload({stream: true}));
}).help="Compiles Scss to Css files";

gulp.task('js', function(){
    return gulp.src('app/js/**/*.js')
        .pipe(gulp.dest('.tmp/js'))
        .pipe(bs.reload({stream:true}));
});

//Watches the changes in the files and autorefreshes browser

gulp.task('watch', ['browser-sync'], function(){
    gulp.watch("app/scss/*.scss", ['sass']);
    gulp.watch("app/**/*.html").on('change', bs.reload);
    gulp.watch('app/js/**/*.js', ['browserify']);
}).help="Watches changes in HTML, JS and SCSS files and compiles them";

//Builds the files to .tmp and dist folder

gulp.task('build', ['sass', 'clean'], function(){
    var base = 'app/**/*';
    var pathsToBuild = ['.tmp', 'dist'];
    var tmpFolder = gulp.src(base)
                    .pipe(gulp.dest(pathsToBuild[0]));
    var distFolder = gulp.src(base)
                    .pipe(gulp.dest(pathsToBuild[1]));
    return merge(tmpFolder, distFolder);
}).help="Builds project to the dist folder";

//Environment for developing the front-end

gulp.task('dev', ['browser-sync', 'watch']).help="Sets up the environment for the local development";

//Displays gulp tasks

gulp.task('default', function(){
    help.show();
}); 

and here is my app.js file:

'use strict';

var app = angular.module('brainTextApp', ['ngRoute']);

app.config(function($routeProvider, $httpProvider){
    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
    $routeProvider
        .when('/', {
            templateUrl: "app/index.html"
        })
        .when('/login', {
            templateUrl: "app/login.html"
        })
        .when('/dashboard', {
            templateUrl: "dashboard.htm"
        })
});

app.controller('loginController', function($scope, $location){
    $scope.submit = function(){
        var uname = $scope.username;
        var pw = $scope.password;

        if($scope.username == 'admin' && $scope.password == 'admin'){
            $location.path('/dashboard');
        }
    }
});

I think it is a very silly mistake somewhere in there, but I am not abel to locate it. I have searched all over the internet and found no solutions for this problem
Hope you guys can help me somehow :)

share|improve this question

One easy way to do it would be with a boilerplate solution. I think it may help you a bit more.

https://github.com/jakemmarsh/angularjs-gulp-browserify-boilerplate

This is a boilerplate solution and it will offer for you a good example about how to do it.

share|improve this answer
    
Indeed this is a good solution for that. But just from curiosity I would like to know what I have done wrong :D – Oskar Martin Sep 13 '16 at 11:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.