I'm trying to bundle an angular 4.0.0 app.
I've tried browserify but the new angular-loader plugin (that allows for not needing the moduleId in components with templateUrl) does not get called and so the templates end up with the wrong path.
So I moved to systemjs-builder but the problem is that when it runs that plugin it crashes saying that document is not defined.
Is there a way to inject document into the builder?
Or am I doing something wrong?
This is the simple builder I'm testing ( the systemjs-config is the angular quickstart one).
var path = require("path");
var Builder = require('systemjs-builder');
var builder = new Builder('src/frontend', 'src/frontend/systemjs.config.js');
builder .bundle('main.js', 'bundle.js')
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('Build error');
console.log(err);
});
I have been looking for the solution to this problem for long hours. As I could not find it, I modified systemjs-angular-loader.js to bypass the error.
With this hack systemjs-builder is now working.
var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
module.exports.translate = function(load){
if (load.source.indexOf('moduleId') != -1) return load;
var document=document || null;
if(document){
var url = document.createElement('a');
url.href = load.address;
var basePathParts = url.pathname.split('/');
basePathParts.pop();
var basePath = basePathParts.join('/');
var baseHref = document.createElement('a');
baseHref.href = this.baseURL;
baseHref = baseHref.pathname;
if (!baseHref.startsWith('/base/')) { // it is not karma
basePath = basePath.replace(baseHref, '');
}
}
else{
var address=load.address;
address=address.replace('file:///'+__dirname+'/', '');
var basePathParts = address.split('/');
basePathParts.pop();
var basePath = basePathParts.join('/');
}
load.source = load.source
.replace(templateUrlRegex, function(match, quote, url){
var resolvedUrl = url;
if (url.startsWith('.')) {
resolvedUrl = basePath + url.substr(1);
}
return 'templateUrl: "' + resolvedUrl + '"';
})
.replace(stylesRegex, function(match, relativeUrls) {
var urls = [];
while ((match = stringRegex.exec(relativeUrls)) !== null) {
if (match[2].startsWith('.')) {
urls.push('"' + basePath + match[2].substr(1) + '"');
} else {
urls.push('"' + match[2] + '"');
}
}
return "styleUrls: [" + urls.join(', ') + "]";
});
return load;
};