I am in the process of updating a current Angular application that uses AMD with TypeScript 1.5 ES6 module syntax. Our modules are currently stored in separate files, and the main "app" module is defined like this...
define('app', ['angular'], (angular) => {
return angular.module('app', []);
});
... and all Angular components are registered using the require() method such as...
require(['app'], (app: ng.IModule) => {
app.config(config);
function config() {
// Some configuration settings
}
});
But with TypeScript ES6 module syntax, AMD modules are being created using the define() method like so...
define(["require", "exports"], function (require, exports) {
...
});
Previously we used ASP.NET Bundling & Minification (System.Web.Optimization) and included the bundle directly as a <script> tag. However, when trying to include the AMD modules declared with define(), we are encountering the common MISMATCHED ANONYMOUS DEFINE() error.
None of the suggested solutions seem optimal for us. So, how can we correctly handle this considering that TypeScript compiles modules into anonymous define() calls?