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

我正在解除TypeScript AMD（RequireJs）和AngularJs。Typescript AMD和AngularJs - 无法实例化模块

我想使用AMD打字稿代码，而不是休息：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在角度误差后执行。

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

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

来源

2014-09-03 Javier Ros

正如罗布说。 ng应用程序被角度检测到时，基础应用程序未加载。 – basarat 2014-09-03 22:17:11

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

基本上你只需要从你的HTML删除ng-app并添加到您的JS

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

来源

2014-09-03 20:52:07 rob

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

回答

相关问题