I love it when multiple technologies come together to produce a doozy...
The following AngularJS template squawks an error in the IDE ("can't resolve file"). I find the inspection wildly convenient and I don't simply want to turn it off.
/my_project/www/templates/logo.html
...
<img src="img/logo.png"/> <<< file at /my_project/www/img/logo.png
...
Question: How can we allow an IDE like IntelliJ IDEA or WebStorm to play nice with Ionic/AngularJS/Cordova in this situation?
NOTE: I cannot simply mark the www folder as a "resources root" and use absolute references because ionic needs relative refs...
Or does it? Is there a way to fix this on the cordova side of things to allow absolute refs? i.e., so it doesn't break when deploying to Android (because we need the prefix file://android_asset/www/)
Inspired by this answer, I ended up creating a recursive search/replace script in the build process. I made a cordova hook for "after_prepare" and used node with the replace package. Now I can use absolute refs and get the full benefit of the IDE... and then at build-time they get converted to relative.
Here is a sample hook file to get you started. Don't forget to add refs for css files or things like templateUrl in your app.js if you're using angular/ionic. And of course don't forget to modify the platform specifics to your needs.
#!/usr/bin/env node
var replace = require("replace");
var wwwDir = process.argv[2] + '\\platforms\\android\\assets\\www';
// convert all src and href tags to relative in index.html + components\*
replace({
regex: '(src|href)=([\'"])/+',
replacement: '$1=$2',
paths: [
wwwDir + '\\components',
wwwDir + '\\index.html'
],
recursive: true,
silent: false
});