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

Question

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

Navigation

#1 by (2 votes)

0

I'm having a problem using Angular Material JS . I have my index with the references for 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><scriptsrc="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><!--AngularJSMaterialJavascriptusingGitCDNtoloaddirectlyfrom'bower-material/master'--><scriptsrc="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 make any mistake, but when I try to run my application it 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 you register the module, please ensure that you specify the dependencies as the second argument.

Any help?

Follow the code for my _layout view

<!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><scriptsrc="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><scriptscr="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><scriptsrc="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><scriptsrc="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><scriptsrc="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>@*<scriptsrc="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>

Here is the code for 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>

Here is the code for my controller:

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

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

        $scope.model.titulo = 'Simulador';


        initController();


        function initController() {

                ...

        }

});

javascript angularjs angular-material

asked by anonymous 06.08.2017 / 22:03

1 answer

How to accept a list as input? Android and Stream Java 8

score 2 · Accepted Answer

The version of your imported angular-material was too outdated (0.11). I've done the right import for your code to work as below.

Using the module to create its controller was incorrect, since it used the second parameter ( array ) that 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><scriptsrc="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><scriptsrc="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 have changed the declaration of your select to a simplified form.