Typescript AMD 和 AngularJs - 无法实例化模块答案

【问题标题】：Typescript AMD and AngularJs - Failed to instantiate moduleTypescript AMD 和 AngularJs - 无法实例化模块
【发布时间】：2014-09-03 19:58:52
【问题描述】：

我正在取消 TypeScript AMD (RequireJs) 和 AngularJs。

我想将 AMD 用于我的 typescript 代码，而不是其他代码：jquery、angular、bootstrap、... 对于第三方 js，我正在使用 MVC 捆绑，我想继续这种方式。

这是我的第三方捆绑配置：

bundles.Add(new ScriptBundle("~/bundles/thirdparty").Include(
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/bootstrap.js",
            "~/Scripts/respond.js",
            "~/Scripts/require.js",
            "~/Scripts/angular.js",
            "~/Scripts/angular-route.js"
            ));

我的 _Layout.cshtml 类似于：

<!DOCTYPE html>
<html ng-app="PafBase">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    @Scripts.Render("~/bundles/thirdparty")

    <script>
        require.config({
            baseUrl: 'typescript/'
        });
        require(['module/BaseApplication']);
    </script>
</head>
<body>
  @RenderBody()
</body>

BaseApplication.ts 类似于：

var app: ng.IModule = angular.module('PafBase', ['ngRoute']); // Breakpoint here ****
app.config(['$routeProvider', ($routeProvider) => { ... }]);

当运行应用程序时，我得到这个 javascript 错误：

[$injector:modulerr] Failed to instantiate module PafBase due to:

Error: [$injector:nomod] Module 'PafBase' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

如果我继续执行，我可以看到 BaseApplication.ts 在角度错误之后执行。

我认为这可能是由于在准备好并找到 <html ng-app="PafBase"> 之后对 DOM 进行角度扫描，然后搜索“PafBase”模块但由于 requireJs 在角度扫描 DOM 之前未加载 BaseApplication.ts 而未找到它。

我的代码执行后如何对 dom 进行角度扫描？

【问题讨论】：

正如罗布所说。当 Angular 检测到 ng 应用程序时，基础应用程序未加载。

标签： asp.net-mvc angularjs requirejs typescript amd

【解决方案1】：

您可以手动引导 Angular 而不是指定 ng-app="PafBase"。看看这里的文档：https://docs.angularjs.org/guide/bootstrap

基本上你只需要从你的html中删除ng-app并将它添加到你的JS中

angular.element(document).ready(function() {
  angular.bootstrap(document, ['PafBase']);
});

【讨论】：