angular - different directory structure in prod and dev - how to manage templateUrl

Question

I am using gulp to minify and copy my html views from dev to prod directories. The issue I am having is that somehow I need to account for the changing directory structure in the templateUrl parameter of my custom directives.

For example if dev and prod look like:

dev -> js -> views -> view.html

and

prod -> js -> views -> view.html

my directive would look like:

directive = {
    templateUrl = 'dev/js/views/view.html'
}

Of course, this works fine in dev but when I build my production app, it does not work...

Is there a standard approach for dealing with this? Do I simply have to give up on having two different view directories (one for dev and one for prod)?

Thanks in advance.

Answer 1

You can use tokens to replace your URLs (or other values) at build time. Take a look at the gulp-token-replace node module.

Essentially what you will end up with is

directive = {
    templateUrl = {{url}}
}

And in your gulp config you change url based on the type of build you are doing.

Here is a good article showing how its done gulp and other systems.

Answer 2

Will

<base href="/dev/">

Work for you? Can you get your server to emit this? so it just works when lifted from one ENV' to another.

Also, you web server/platform maybe able todo this for you, ASP.NET would be "~"

also, have a look at Stating directive templateUrl relative to root

Steve

Answer 3

Define a constant

app.constant('APP_CONFIG', {
   'ENVIRONMENT': 'dev/prod'
});

Directive

(inject APP_CONFIG in directive)

directive: {
   templateUrl: function () {
      return APP_CONFIG.ENVIRONMENT === 'dev' ? '/dev/path' : 'prod/path'
   }
}