How to run a TypeScript app compiled into a single file with AMD modules?

TypeScript compiler produces only define calls. To trigger module loading you need at least one top level require call.

When using RequireJS's r.js for bundling there is nice option for this reason.

Not sure how to use --outFile to achieve this. I believe you would need to use RequireJS API directly in .ts or .js in similar way you did in your index.html. Calling just require(["Project/MainModule"]); should be enough.

It there a reason why you don't want or can't use solution with r.js, browserify or webpack?


You should be loading the built file via a script tag:

<head>
    <script src="bower_components/dojo/dojo.js"></script>
    <script src="built/run.js"></script>
</head>

Then you can load the modules using require:

<body>
    <script>require(["app"], run => run());</script>
</body>

The tsconfig.json:

{
    "compilerOptions": {
        "declaration": false,
        "module": "amd",
        "target": "es5",
        "noImplicitAny": true,
        "sourceMap": false,
        "out": "./built/run.js",
        "moduleResolution": "node"
    },
    "exclude": [
        "bower_components"
    ]
}

See https://github.com/ca0v/ags-lab/blob/master/index.html for a dojo example.

See https://github.com/ca0v/react-lab/blob/master/rawgit.html for a requirejs example.

See https://github.com/ca0v/html-playground/blob/master/playground/svg/svgeditor/index.html for an almond example.

Alternatively, you can use data-main to load a requirejs configuration. That configuration can specify the built script as a dependency. For example:

requirejs.config({
    paths: {
        "openlayers": "bower_components/ol3/ol",
        "jquery": "bower_components/jquery/dist/jquery.min"
    },
    deps: ["built/run"],
    callback: () => {
        requirejs(["app"], run => run());
    }
});

And load this using data-main:

<head>
    <script src="bower_components/requirejs/require.js" data-main="config.js"></script>
</head>

See https://github.com/ca0v/ol3-lab/blob/master/index.html

Tags:

Typescript

Amd

Recent Posts