Error with angular-generator [Solucion momentanea]

0

run the generator, install the dependencies

and when executing gulp serve it shows me the page of the following way and with errors:

Ok, how do I solve it?:

in .bowerrc change the bower component path to "app / bower_components"

delete the bower component folder that was outside the app and in the terminal I wrote bower install (all inside the project folder)

in the file gulpfile.js approaching line 146

gulp.task('bower', function () { 

I change:

.pipe(gulp.dest(yeoman.app + '/views')); 

for

.pipe(gulp.dest(yeoman.app));

Then approximate line 165 delete .pipe ($. useref ({... the first line where the .pipe starts and paste this:

      return gulp.src(paths.views.main)
   .pipe($.useref({
    searchPath: [yeoman.app, '.tmp'],
    transformPath: function(filePath) {
    return     filePath.replace('/bower_components','/app/bower_components')
    }
}))

Then I went to the index located in the app to see if there were the links to the .js and .css of the dependencies installed inside the bower, if they are not, in console start the gulp server and write: gulp serve and the routes should be loaded automatically and solved!

If you do not do it manually, I'll leave you here.

    <!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->

    <!-- bower:js -->
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
  <script src="bower_components/angular-animate/angular-animate.js"></script>
  <script src="bower_components/angular-cookies/angular-cookies.js"></script>
  <script src="bower_components/angular-resource/angular-resource.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="bower_components/angular-aria/angular-aria.js"></script>
  <script src="bower_components/angular-messages/angular-messages.js"></script>
  <script src="bower_components/angular-touch/angular-touch.js"></script>
    <!-- endbower -->

and with that, it should be displayed without error.

When installing a new dependency it should be with --save to be automatically added to the index.

ex: bower install angular-sweetalert --save

Greetings and thanks to everyone.

    
asked by Hernan Humaña 28.09.2016 в 20:26
source

2 answers

2

Apparently it is a bug in the generator, according to this issue in the GitHub repository. The problem according to that same thread is that the serve of gulp task does not map the directory path bower_components .

The solution according to comments in that thread would be to modify the gulpfile.js to add the static mapping of the bower components:

gulp.task('start:server', function() {
  $.connect.server({
    root:['./.tmp', yeoman.app],
    livereload:true,
    port: 9000,
    middleware:function(connect, opt){
      return [['/bower_components', 
        connect["static"]('./bower_components')]]
    }
  });
});
  

Find and change the bower folder and put it in the app

The bower_components directory should not go inside ./app should go in the root.

    
answered by 28.09.2016 / 20:35
source
0

so you can use the bower_components folder in different location and take the gulp, the best thing you can do is edit the file .bowerrc and modifying the next line of directory with the path where bower_components is found .

For example:

{   "directory": "src/bower_components" }
    
answered by 29.09.2016 в 09:21