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

Question

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:nomod] Module 'myApp' 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.

Good day, before I asked this question, I looked through all the previous answers to this question as well as went through documentation, unfortunately non did help me that is why I am asking.

This is the how I am using angular and controller:

html file:

<!DOCTYPE html>
<html>

<head>
</head>

<body ng-app="myApp">

    <div ng-controller="login.controller">
        <input ng-model="foodDescription">
        <button ng-click="onSomethingChanged(foodDescription)">Do Something</button>
        <h1>The Food is {{viewModel.foodDescription}}</h1>
    </div>
    <script type='text/javascript' src="./node_modules/angular/angular.js"></script>
    <script type='text/javascript' src="./module.js"></script>
</body>

</html>

Module file:

import angular = require('angular');

import loginControllerImport = require('./Views/login/login.Controller');

var app: angular.IModule = angular.module("myApp", []);

app.controller(loginControllerImport.name, loginControllerImport.loginController);

loginControllerImport.loginController.$inject = ['$scope'];

export = app;

Controller file:

import angular = require('angular');
import loginViewModelImport = require('./login.viewModel');

export interface ILoginControllerScope extends angular.IScope {
    viewModel: ILoginViewModel;
    onSomethingChanged: (myFood: string) => void;
}

export class loginController {

    constructor(private $scope: ILoginControllerScope) {
        this.$scope.viewModel = new loginViewModelImport.loginViewModel();
        this.$scope.onSomethingChanged = this.onSomethingChanged.bind(this);
    }

    private onSomethingChanged(myFood: string) {
        this.$scope.viewModel.foodDescription = myFood;
    }
}

export var name: string = "login.controller";

View Model file:

export class loginViewModel implements ILoginViewModel {

    private _foodDescription: string;

    get foodDescription(): string {
        return this._foodDescription;
    }
    set foodDescription(value: string) {
        this._foodDescription = value;
    }
}

So what would be the problem for this error to appear? Why is it appearing? how can I fix it? How can I avoid it in the future?

Many thanks.

that error just means that there is a typo in myApp, usually there is a more specific javascript error before that angular specific error comes up in the console , was that the only error? — Scott Selby
Where is the js for your controller called? I don't see it there in the html you provided. — Matthew Green
@ScottSelby No there is only this one and stack trace leading to angular library where exception was thrown, tried to see the call stack, but no luck. — vsarunov
@MatthewGreen Could you exagerate on this one? I pass the scope to the controller and manipulate the scope when I assign a controller to the html element? Or am I thinking wrong on this point? — vsarunov
Unless all of your code is in module.js then you are missing js files (controller, viewmodel). If that's the case, then that is what is causing your error. — Matthew Green

DotBert DotBert · Accepted Answer · 2017-05-23T07:33:25

Since you use require() to load your dependencies, you should also a) bundle them into one output file, b) load them manually or c) load them with a library like RequireJS. I cannot verify if module.js is your bundle file, otherwise this code won't succeed unfortunately.

If I would face this problem myself, I would strip down the app to the bare minimum (just load the myApp module itself) and get that one working. After getting this spinning up, add your view models and controllers (tip: one by one).

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

1 Answers