I have references to some external JS files in my index.html like this:
<!-- build:js(app) /scripts/vendor.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/jquery-ui/ui/jquery-ui.js"></script>
<!-- endbower -->
<!-- endbuild -->
Every time I run grunt serve
(generator-angular-fullstack), the initial slashes are removed ("/bower_components/..."
→ "bower_components/..."
), which ruins my pages >1 steps down in the hierarchy.
Is there a quick fix?
From https://github.com/stephenplusplus/grunt-bower-install/issues/43#issuecomment-33799772:
'bower-install': {
myTask: {
fileTypes: {
html: {
replace: {
js: '<script src="/{{filePath}}"></script>'
}
}
}
}
}
You will likely have to un- and re-install grunt-bower-install to use this new type of configuration. You should also consider using <base href="/">
as well.
I am using the angular-generator
with yo
and this is what worked for me:
Gruntfile.js
(line 160ish)
bowerInstall: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: '<%= yeoman.app %>/',
fileTypes: {
html: {
replace: {
js: '<script src="/{{filePath}}"></script>',
css: '<link rel="stylesheet" href="/{{filePath}}" />'
}
}
}
}
}
Not sure why my bower-install
config looks different, but this is how I got it to work:
Original settings:
'bower-install': {
app: {
html: '<%= yeoman.app %>/views/index.html',
ignorePath: '<%= yeoman.app %>/',
replace: {
js: '<script src="/{{filePath}}"></script>'
}
}
},
Change:
ignorePath: '<%= yeoman.app %>',
(removing the ending slash)
I had the same problem. Turned out that I put the base tag below the stylesheet section. Once I placed it on top it worked like a charm:
<base href="/"> <!- correct!! -->
<!-- build:css(client) app/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
<!-- endbower -->
<base href="/"> <!- wrong!!! -->