babel-plugin-ng-template-url-absolutify

Transform AngularJS templateUrl relative paths to absolute URLs.

$ npm install babel-plugin-ng-template-url-absolutify --save-dev

Usage

Use in either package.json or with gulp:

a) Package.json

Add the transform in package.json:

Babel

{
  "babel": {
      "presets": ["env"],
      "extensions": [".es6"],
      "plugins": [
        ["babel-plugin-ng-template-url-absolutify", {"baseDir": "./app", "baseUrl": "http://mysite.com/"}]
      ]
  }
  
}

Browserify with Babelify

{
  "browserify": {
    "transform": [
      ["babelify", {
          "presets": ["env"],
          "extensions": [".es6"],
          "plugins": [
            ["babel-plugin-ng-template-url-absolutify", {"baseDir": "./app", "baseUrl": "http://mysite.com/"}]
          ]
        }
      ]
    ]
  }
}

b) With Gulp + Browserify with Babelify

Add it to the babelify object and specify a baseDir and baseUrl.

var gulp  = require('gulp'),
    browserify = require('browserify');
 
gulp.task('scripts', function() {
  return browserify('./src/app.js')
    .transform("babelify", {
                presets: ["env"],
                extensions: [".es6"],
                plugins: [[
                  "babel-plugin-ng-template-url-absolutify",
                  {baseDir: "./app", baseUrl: "http://mysite.com/"}
                ]]
            })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./dist'));
});

Example

Before:

'use strict';
 
angular.module('app').component('cmp', {
    controller: function () {/* ... */},
    templateUrl: './template.html'
});

After:

'use strict';
 
angular.module('app').component('cmp', {
    controller: function () {/* ... */},
    templateUrl: 'http://mysite.com/app/template.html'
});

License

MIT License