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

Question

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

1.1k views Asked by Shian JA At 20 August 2024 at 11:53

I am trying to use Type Script + Angular Js.I have declared my controller and interfaces.But when i trying to run my system it will through and error of

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

I have read all but not able to get whats the exact problem is:- I have mentioned my code below:-

My View Page

        <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">

Please See Exception Here

Original Q&A

There are 3 answers

Radim Köhler On 24 June 2015 at 07:35

The real issue (not sure if only) is that we hide/redefine module definition. Once we do:

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

and next/previously

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

we can/must define module only once, and then only ask for it via getter:

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

Radim Köhler On 24 June 2015 at 09:30

Another issue could/would be the order of scripts loading into page. This is the current (not working):

<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" />
     ...

We should use this definition order:

<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" />
     ...

After update ... there is 3 times defined 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" />
    ...

this is not good (maybe working but not good) it should be just once

<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" />
    ...

All code now should be loaded in the correct order. But because it is throwing error... the other problems I can see is content of Module.js

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

that should be compiled:

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

And MOSTLY, we need UI-Router, not ngRoute:

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

The 'ui.router' must be injected into main module. Check that example ... with all really running

**Shian JA** · Accepted Answer · 2015-06-25 07:11:27

I solved this error byb making changes into the declaration of my ng-app as i have declared my ng-app before my form tag but now i made changes and removed the div declared before form tags and apply it as:-

<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 >

TechQA.

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

There are 3 answers

Related Questions in ANGULARJS

Related Questions in ANGULARJS-SCOPE

Related Questions in TYPESCRIPT

Related Questions in TYPESCRIPT1.4

Popular Questions

Popular Tags

Trending Questions