IntelliJ IDEA / Webstorm and AngularJS / Ionic

Question

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/)

Answer 1

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
});