使用 TypeScript ES6 模块和 RequireJS 注册 Angular 元素

Posted 2023-03-13

【中文标题】使用 TypeScript ES6 模块和 RequireJS 注册 Angular 元素

【英文标题】：Registering Angular elements using TypeScript ES6 modules and RequireJS

【发布时间】：2015-11-18 23:16:45

【问题描述】：

我希望将现有的基于 AMD 的 Angular 应用程序转换为使用新的 TypeScript 1.5 ES6 模块语法。目前我们将所有模块放在单独的文件中，主“app”模块定义为...

define('app', ['angular'], (angular) =>   
    return angular.module('app', []);
); 

...以及所有使用require()方法注册的Angular元素，例如

require(['app'], (app: ng.IModule) => 
    app.config(config);
    function config() 
        // Some config
    
);

但是使用 TypeScript ES6 模块语法，AMD 模块是使用 define() 方法生成的，例如

define(["require", "exports"], function (require, exports) 
    ...
); 

我们之前一直在使用 ASP.NET Bundling & Minification (System.Web.Optimization) 并将包直接输出为 <script> 标记。但是，当尝试包含使用 define() 方法声明的 AMD 模块时，我们会遇到常见的 MISMATCHED ANONYMOUS DEFINE() error。

这些建议似乎都不理想或不适合我们，那么鉴于 TypeScript 将模块编译成匿名的 define() 调用，应该如何正确地做到这一点？

【参考方案1】：

我使用 NPM TsProject gulp 适配器捆绑 Typescript ES6 模块。查看TsProjectTodoMVC 应用程序，该应用程序展示了如何使用 Typescript ES6 模块包、Angular 1.4.7 和 AMD/Require 获取单个 js。