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 - 無法實例化模塊

回答

相關問題