0

I asked a similar question a while ago when I was trying requireJS here, I'm not sure what I did then is correct or not, but I cannot get it working with systemJS.

I'm trying to create a single module file which contains export for multiple classis for a given module. This is the sample module (called module1). 

import {Module1ComponentA} from "./a.component";
import {Module1ComponentB} from "./b.component";

export * from "./a.component";
export * from "./b.component";

angular.module("module1", [])
    .component("module1ComponentA", new Module1ComponentA())
    .component("module1ComponentB", new Module1ComponentB())
;

I can then reference either component using 

import {Module1ComponentA} from './module1/module1

The problem is I get an exception when loading the app.

Error: TypeError: i.setters[l] is not a function
    at exportStar_1 (http://127.0.0.1:8080/output/module1/module1.js:10:9)
    at Array.setters.b_component_1 (http://127.0.0.1:8080/output/module1/module1.js:16:17)
    at execute (http://127.0.0.1:8080/output/module1/a.component.js:14:13)
Error loading http://127.0.0.1:8080/output/boot.js

If instead I do not include the 'export' statement but references the imports by their source file, then it loads.

This is the SystemJS config

    <script>
    System.config({
        packages: {
            output: {
                format: 'register',
                defaultExtension: 'js'
            }
        },
        map: {
            app: 'output/boot.js',
            module1: 'output/module1/module1.js'
        },
        meta: {
            'app': { deps: [ 'module1' ] },
            '*.js': {
                scriptLoad: true,
            }
        }
    });
    System.import('output/boot.js')
          .then(null, console.error.bind(console));
</script>

This is the generated js file for the module

System.register(["./a.component", "./b.component"], function(exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var a_component_1, b_component_1;
function exportStar_1(m) {
    var exports = {};
    for(var n in m) {
        if (n !== "default") exports[n] = m[n];
    }
    exports_1(exports);
}
return {
    setters:[
        function (a_component_1_1) {
            a_component_1 = a_component_1_1;
            exportStar_1(a_component_1_1);
        },
        function (b_component_1_1) {
            b_component_1 = b_component_1_1;
            exportStar_1(b_component_1_1);
        }],
    execute: function() {
        angular.module("module1", [])
            .component("module1ComponentA", new a_component_1.Module1ComponentA())
            .component("module1ComponentB", new b_component_1.Module1ComponentB());
    }
}

}); //# sourceMappingURL=module1.js.map

Any suggestion on how to do this ?

Community
  • 1
  • 1
Jesper Kristiansen
  • 1,759
  • 3
  • 17
  • 29
  • would this help? http://stackoverflow.com/questions/34474651/typescript-compile-to-single-file/34475035#34475035 – toskv Jun 20 '16 at 08:16
  • Thanks for the suggestion, a single file per component might be useful when sharing components between apps, but I'm looking for a way to do this without using single file (and multiple tsconfig.json files, one per component) – Jesper Kristiansen Jun 20 '16 at 13:18
  • I doubt you'll be able to do that with typescript alone, you'll most likely need to get grunt or gulp involved. – toskv Jun 20 '16 at 13:58

0 Answers0