Uncaught Error: [$injector:modulerr] for angular-material.js

Asked

Viewed 1,501 times

0

I have a problem using the Angular Material JS. I have my index with references to the Angular-Material project. 

<head>

    <!-- AngularJS Material CSS using GitCDN to load directly from `bower-material/master` -->
    <link rel="stylesheet" href="https://gitcdn.link/repo/angular/bower-material/master/angular-material.css">

  </head>
  <body>

    <!-- AngularJS Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.js"></script>

    <!-- AngularJS Material Javascript using GitCDN to load directly from `bower-material/master` -->
    <script src="https://gitcdn.link/repo/angular/bower-material/master/angular-material.js"></script>

  </body>

And in my module I’m calling the ngMaterial reference. 

angular.module('myApp', ['ngMaterial']);

Apparently, it should not give any error, but when I try to run my application is returning me:

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

Some help?

Follow my view code _layout

<!DOCTYPE html>

<html lang="pt-br" >
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
</head>

<body ng-app="simulador" ng-cloak>

    <!--Bootstrap-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!--Angular-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.js"></script>
    <script scr="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script>


    <!-- Angular Material requires Angular.js Libraries -->
    @*<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>*@

    <!-- Angular Material Library -->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
    @*<script src="https://gitcdn.link/repo/angular/bower-material/master/angular-material.js"></script>*@

    <!--Aplicação | Controller-->
    <script src="~/Scripts/Controllers/simulador-controller.js"></script>

    <!--Aplicação | Serviços-->
    <script src="~/Scripts/Regras/ServicoFipe.js"></script>

    <div>
        @RenderBody()
    </div>
</body>
</html>

Follow the code from my view:

<div ng-controller="SimuladorController" ng-cloak>
    <div>
        <h1>{{model.titulo}}</h1>
    </div>
    <form ng-submit="$event.preventDefault()">
        <div id="veiculo" class="col-xs-12">
            <section data-role="content">
                <div class="col-xs-12">
                    <h1>Seu veículo:</h1>
                    <div>
                        <label>
                            Tipo:
                            <select ng-model="model.veiculo.tipoSelect" ng-change="changeTipo()">
                                <option ng-repeat="tipo in tipos" value="{{tipo.id}}">{{tipo.nome}}</option>
                            </select>
                        </label>
                    </div>
                </div>
            </section>
        </div>
    </form>
</div>

Follow the code of my controller:

angular.module('simulador', []);

angular.module('simulador', ['ngMaterial'])
    .controller('SimuladorController',
    function ($scope) {

        $scope.model.titulo = 'Simulador';


        initController();


        function initController() {

                ...

        }

});
javascript angularjs angular-material

  • Post the full code when you call your module? when does it matter? all libraries are 200 status? apparently everything is right...

  • Felipe, what I managed to evolve was over the dependencies. With the Angular version (all references) in 1.5.11 gives this error. When I change to 1.4.8 the error does not occur. Now I need to understand why or whether I will have to use old Angular libraries :(

  • Vish guy :/, I really don’t know why, maybe you’ll find issues in git of the angular material that explain this incompatibility, by the way, working with angular v1.5.3 and angular material v1.1.3, so even this version of the angular will be fine.

  • Thank you. I posted my full codes. If you want to take a look

  • You are instantiating your application twice. Use the syntax of angular.module("simulador", ['ngMaterial']); only the first time and the second (when instantiating the controller) use angular.module("simulador").controller...

1 answer

2


The version of his angular-material imported was very outdated (0.11). I performed the correct import for your code to work as below.

The use of the module in the creation of its controller was incorrect, since it used the second parameter (array) which identifies the dependency modules, recreating its main application. The correction was as below:

angular
  .module('simulador', ['ngMaterial']);

angular.module('simulador')
  .controller('SimuladorController', SimuladorController);

SimuladorController.$inject = ['$scope'];

function SimuladorController($scope) {
  initController();

  function initController() {
    $scope.tipos = [];
    
    $scope.tipos.push({id: 1, nome: 'Carro'});
    $scope.tipos.push({id: 2, nome: 'Moto'});
    
    $scope.model = {};
    $scope.model.titulo = 'Simulador';
    $scope.model.veiculo = {};
    $scope.model.veiculo.tipoSelect = $scope.tipos[0].id;
  }
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>

<div ng-app="simulador">
  <div ng-controller="SimuladorController" ng-cloak>
    <div>
      <h1>{{model.titulo}}</h1>
    </div>
    <form ng-submit="$event.preventDefault()">
      <div id="veiculo" class="col-xs-12">
        <section data-role="content">
          <div class="col-xs-12">
            <h1>Seu veículo:</h1>
            <div>
              <label>Tipo:
                <select ng-model="model.veiculo.tipoSelect" ng-options="tipo.id as tipo.nome for tipo in tipos">
                </select>
              </label>
            </div>
          </div>
        </section>
      </div>
    </form>
  </div>
</div>

Note also that I changed your statement select for a simplified form.

Browser other questions tagged javascript angularjs angular-material

You are not signed in. Login or sign up in order to post.