How do I get document injected into systemjs-builder for bundling a angular 4.0.0 app?

Question

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've been using this https://github.com/laxa1986/gulp-angular-embed-templates with `gulp`. Also, have a look at http://stackoverflow.com/questions/35867660/build-angular2-html-and-typescript-to-a-single-file/35868706#35868706 — martin, Apr 17 '17 at 10:07
thanks @martin, I'm trying to get away from gulp and do all the tooling using just npm to minimize dependencies (I'm tired of having my packages.json be a mile long), but I'll have a look at repo. I might be able to just incorporate that in the systemjs builder. Still, to anyone else coming here it seems strange to me that we can't do this it just systemjs builder, there must be a way and if anyone has an idea I'll be very thankful. — Ricardo Gomes, Apr 17 '17 at 13:32
This is killing me, I can't seem to find a solution. I find it hard to believe that we are the only ones trying to come up with a systemjs build that just works :( — Tamas, May 04 '17 at 21:08
I'm not a systemJS user, so I don't know if this is helpful, but There is a DI token for DOCUMENT inside platform-browsers. I would say, pull that in, and use that. — Sander Elias, May 15 '17 at 06:51

score 1 · Answer 1 · edited Jun 04 '22 at 10:00

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

How do I get document injected into systemjs-builder for bundling a angular 4.0.0 app?

1 Answers1