AngulaJs + TypeScript: Uncaught Error: [$injector:modulerr] Failed to instantiate module

Question

我正在尝试使用 Type Script + Angular Js.I 已经声明了我的控制器和 interfaces.But 当我尝试运行我的系统时它将通过并且错误

Uncaught Error: [$injector:modulerr] Failed to instantiate module .

我已经阅读了所有内容，但无法理解确切的问题是：- 我在下面提到了我的代码：-

我的浏览页面

        <html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
     <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/Scripts/angular.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/Scripts/angular.min.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/app/app.routes.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/app/app.module.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/app/Controller/CreateCustomerController.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/app/Interface/Interface.js" />

    <title>Create Customer</title>

</head>
<body>
    <div data-ng-app=" CustomerNew">
        <div id="page" style="width:90% ! important;" data-ng-controller="CreateCustomerCtrl as custom">

Answer 1

真正的问题（不确定是否只是）是我们 hide/redefine 模块定义。一旦我们这样做：

var app = angular.module("CustomerNew", ['ngRoute']);

和下一个/以前

var CreateCustomerapp = angular.module("CustomerNew", []);

我们can/must只定义一次模块，然后只通过getter:

请求它

// firstly create
var app = angular.module("CustomerNew", ['ngRoute']);
...
// later get it
// var CreateCustomerapp = angular.module("CustomerNew", []); // setter
var CreateCustomerapp = angular.module("CustomerNew"); // getter

Answer 2

另一个问题could/would 是加载到页面的脚本的顺序。这是当前的 (不工作):

<head>
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" ></script>     
     // angular is not in play yet here   
     <dnn:DnnJsInclude runat="server" FilePath="/app/app.module.js" />
     <dnn:DnnJsInclude runat="server" FilePath="/app/Controller/CreateCustomerController.js" />
     <dnn:DnnJsInclude runat="server" FilePath="/app/Interface/Interface.js" />
     // too late....
     <dnn:DnnJsInclude runat="server" FilePath="/Scrpts/angular.js" />
     <dnn:DnnJsInclude runat="server" FilePath="/Scrpts/angular.min.js" />
     <dnn:DnnJsInclude runat="server" FilePath="/app/app.routes.js" />
     ...

我们应该使用这个定义顺序：

<head>
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" ></script>     


     // ANGULAR First
     <dnn:DnnJsInclude runat="server" FilePath="/Scrpts/angular.js" />
     <dnn:DnnJsInclude runat="server" FilePath="/Scrpts/angular.min.js" />
     <dnn:DnnJsInclude runat="server" FilePath="/app/app.routes.js" />

     // angular is now ready to start solve app
     <dnn:DnnJsInclude runat="server" FilePath="/app/app.module.js" />
     <dnn:DnnJsInclude runat="server" FilePath="/app/Controller/CreateCustomerController.js" />
     <dnn:DnnJsInclude runat="server" FilePath="/app/Interface/Interface.js" />
     ...

更新后...定义了3次angular:

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/Scripts/angular.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/Scripts/angular.min.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/app/app.routes.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/app/app.module.js" />
    ...

这不好（也许有用但不好）应该就一次

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
    // just once
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/app/app.routes.js" />
    <dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/Customer.New/app/app.module.js" />
    ...

所有代码现在都应该以正确的顺序加载。但是因为它抛出错误......我能看到的其他问题是 Module.js

的内容

// this is typescript
((): void=> {
    var app = angular.module("CustomerNew", ['ngRoute']);
    app.config(CustomerNew.Routes.configureRoutes);
})()

应该编译：

(function () {
    var app = angular.module("CustomerNew", ['ngRoute']);
    app.config(CustomerNew.Routes.configureRoutes);
})();

而且大多数情况下，我们需要 UI-Router，而不是 ngRoute:

(function () {
    var app = angular.module("CustomerNew", ['ui.router']);
    app.config(CustomerNew.Routes.configureRoutes);
})();

'ui.router' 必须注入主模块。检查 that example ... 真的运行

Answer 3

我通过更改我的 ng-app 的声明解决了这个错误，因为我已经在我的表单标签之前声明了我的 ng-app 但现在我进行了更改并删除了在表单标签之前声明的 div 和将其应用为：-

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

     <dnn:DnnJsInclude runat="server" FilePath="/Scripts/angular.js" />
    <dnn:DnnJsInclude runat="server" FilePath="/app/app.routes.js" />
    <dnn:DnnJsInclude runat="server" FilePath="/app/app.module.js" />
    <dnn:DnnJsInclude runat="server" FilePath="app/Controller/CreateCustomerController.js" />
    <dnn:DnnJsInclude runat="server" FilePath="/app/Interface/Interface.js" />

    <title>Create Customer</title>
</head>
<body>
       <form data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom" name="form" class="css-form" novalidate >

AngulaJs + TypeScript: Uncaught Error: [$injector:modulerr] Failed to instantiate module

AngulaJs + TypeScript: Uncaught Error: [$injector:modulerr] Failed to instantiate module

angularjs

typescript

angularjs-scope

typescript1.4