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 ?

3
  • would this help? stackoverflow.com/questions/34474651/… Commented Jun 20, 2016 at 8: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) Commented Jun 20, 2016 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. Commented Jun 20, 2016 at 13:58

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.