CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
tholo
tholo

Reputation: 541

Uncaught Error: [$injector:modulerr] when loading Angular Materials

What am I doing wrong here?

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <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>
    <script src="https://ajax.googleapis.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.4/angular-sanitize.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="components/app/app.js"></script>
    <link rel="stylesheet" href="css/app.css">
</head>
<body data-ng-app="myApp">
<div class="overview">
    <md-button>Button</md-button>
</div>

<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->

</body>

App:

var app = angular.module('myApp', ['ui.router', 'ngSanitize', 'ngMaterial']);

I know this is nprobably something stupid and something small, but I have no idea why I keep getting this error:

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=myAp‌​p&p1=Erro…ogleapis.c‌​om%2Fajax%2Flibs%2Fa‌​ngularjs%2F1.6.4%2Fa‌​ngular.min.js%3A22%3‌​A179) at angular.js:38 at angular.js:4920 at q (angular.js:403) at g (angular.js:4880) at eb (angular.js:4802) at c (angular.js:1914) at Sc (angular.js:1935) at ue (angular.js:1820) at angular.js:33367 at HTMLDocument.b (angular.js:3431)

Upvotes: 1

Views: 2660

Answers (1)

Mike Feltman
Mike Feltman

Reputation: 5176

Angular material requires some other angular modules in order to function. Add these script tags to your header and you should be good to go:

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

Note: you many not need angular.messages. I'm not sure of that one.

Upvotes: 1

Related Questions