Search code examples
typescriptvisual-studio-2013requirejsamd

mismatched anonymous define() module typescript with AMD and export module


I am trying to create an application using Typescript(1.7.5) and AMD module. I have added reference to r.js and requirejs.js. below is my TS code:

export module TestNs {
    export class TestClass {
        public fn(): void{
            debugger;
        }
    }
}

here is my aspx page to call "fn()":

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TypeScriptPage.aspx.cs" Inherits="WebApplication1.TypeScriptPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="div1">
        </div>
        <script src="Scripts/r.js"></script>
        <script src="Scripts/require.js"></script>
        <script src="Scripts/TypeScriptBegin.js"></script>
        <script type="text/javascript">

            var testObj = new TestNs.TestClass();
            testObj.fn();

        </script>
    </form>
</body>
</html>

but I am getting below errors:

TestNS is undefined

"JavaScript runtime error: Mismatched anonymous define() module: function (require, exports)"

however when I remove "export" keyword, above code works fine. I am new to Typescript and requirejs. Can anyone point out what I am doing wrong and how to fix this?

thanks in advance.


Solution

  • I think you should remove the following line:

    export module TestNs
    

    Every file in type script is a module, so you do not need that part.

    EDIT

    Then in your javascript remove script tag to load your class and use something like this:

    var moduleName = 'Scripts/TypeScriptBegin';
    require([moduleName], function(TestNs){
                var testObj = new TestNs.TestClass();
                testObj.fn();
    })
    

    Hope this will help.