generator-angular icon indicating copy to clipboard operation
generator-angular copied to clipboard

Bower component links point to wrong directory

Open tetraquard opened this issue 8 years ago • 5 comments

Hey,

After running the generator and visiting /app/ you get missing resources, because all bower components seem to be linked to

/app/bower_components/angular/angular.js /app/bower_components/... However, the generator directory structure is:

/app/ /bower_components/ Am I missing something here ?

I'm having this "issue" using Gulp, index.html script tags:

<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>

In the other hand, if I manually copy the bower_components folder inside the app folder it works perfectly.

tetraquard avatar Aug 07 '16 12:08 tetraquard

The same problem occurs using Grunt instead of Gulp.

herczogzoltan avatar Sep 05 '16 13:09 herczogzoltan

Me too. I'm using Gulp though.

willseward avatar Sep 15 '16 03:09 willseward

I am also joining my scream to this issue. I use Grunt and I have found the the root of the problem is on the wiredep configuration, by default it has this configuration:

// Automatically inject Bower components into the app
    wiredep: {
      app: {
        src: ['<%= yeoman.app %>/index.html'],
        ignorePath:  /\.\.\//
      },
      test: {
        devDependencies: true,
        src: '<%= karma.unit.configFile %>',
        ignorePath:  /\.\.\//,
        fileTypes:{
          js: {
            block: /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi,
              detect: {
                js: /'(.*\.js)'/gi
              },
              replace: {
                js: '\'{{filePath}}\','
              }
            }
          }
      }
    },

I had to leave the relative path out of the configuration in order to wiredep to find the correct path. Once I have done with all the coding on app I added a dist configuration so that when I run the build task it catches the correct path.

// Automatically inject Bower components into the app
    wiredep: {
      app: {
        src: ['<%= yeoman.app %>/index.html'],
        exclude: ['/bower_components/html5shiv/dist/html5shiv.js']
      },
      dist: {
        src: ['<%= yeoman.app %>/index.html'],
        ignorePath:  /\.\.\//,
        exclude: ['/bower_components/html5shiv/dist/html5shiv.js']
      },
      test: {
        devDependencies: true,
        src: '<%= karma.unit.configFile %>',
        ignorePath:  /\.\.\//,
        fileTypes:{
          js: {
            block: /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi,
              detect: {
                js: /'(.*\.js)'/gi
              },
              replace: {
                js: '\'{{filePath}}\','
              }
            }
          }
      }
    },

Although this is not the best solution it has allow me to continue my work and finish the project I was working on.

Reedyseth avatar Nov 01 '16 17:11 Reedyseth

The same problem. It looks like nobody wants to fix it. It's necessary to link wiredep and useref to correct path specified in .bowerrc.

zhekaus avatar Nov 07 '16 14:11 zhekaus

Why are you visiting /app/? The root url should not have the app part of it.

eddiemonge avatar Dec 29 '16 07:12 eddiemonge