Search code examples
typescriptangularsystemjs

Angular2 Html views with systemJS and text plugin, 'exports.translate' is undefined

I know this is an older discussion, but i came across this problem while using angular2 with systemjs. The only things i have as meta are as follows:

System.config({
    'defaultJSExtensions': true,
     baseURL: '/js',
     map: {
         text: '/js/angular2/text.js'
     }
}

I use text plugin to load my html views and they do load properly, however I still get this error mentioned in followings, why is that?

"text.js:4 Uncaught ReferenceError: exports is not defined(anonymous function)"

The whole text.js file is pretty straight forward:

(function(System, SystemJS) {(function(require, exports, module, __filename, __dirname, global, GLOBAL) {/*
Text plugin
*/
exports.translate = function(load) {
  return 'module.exports = "' + load.source
    .replace(/(["\\])/g, '\\$1')
    .replace(/[\f]/g, "\\f")
    .replace(/[\b]/g, "\\b")
    .replace(/[\n]/g, "\\n")
    .replace(/[\t]/g, "\\t")
    .replace(/[\r]/g, "\\r")
    .replace(/[\u2028]/g, "\\u2028")
    .replace(/[\u2029]/g, "\\u2029")
  + '";';
}
}).apply(__cjsWrapper.exports, __cjsWrapper.args);
})(System, System);

Line 4, is indeed says exports.translate. I couldn't find an option for text.js to specify i'm not using NodeJS, so how would I get around this issue?

Solution

  • This happens if the request for text.js was sent via browser rather than SystemJS. It has to be requested and downloaded via SystemJS. Your dev bundling should be setup properly to accommodate for this.

    Although as @Thierry Themplier has mentioned, you can leave it as is and create package configurations for your folders to specify the default .js extensions and .html or any other extensions that you need. In my case this will be a maintenance nightmare with deep folder hierarchies and a bad dependency over where the source files are located.