Uncaught Error: [$injector:modulerr] this is the error I'm getting only when I'm using an external js file for my code otherwise if I just copy the angular code in the html/php file it just works.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="angular.min.js"></script>
<script src="app.js"></script>
<title>Learn</title>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myCtrl" >
</div>
</body>
</html>
app.js
(function(){
var app = angular.module('myApp', ["ngRoute"]);
app.controller('myCtrl', function($scope){
});
})();
Error :
angular.min.js:sourcemap:7 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.6/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.6%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.6.6%252F%2524injector%252Fnomod%253Fp0%253DngRoute%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A7%253A76%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A26%253A408%250A%2520%2520%2520%2520at%2520b%2520(http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A25%253A439)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A26%253A182%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A42%253A290%250A%2520%2520%2520%2520at%2520p%2520(http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A42%253A138)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A42%253A322%250A%2520%2520%2520%2520at%2520p%2520(http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A42%253A138)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A7%3A76%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A43%3A70%0A%20%20%20%20at%20p%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A42%3A138)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A42%3A322%0A%20%20%20%20at%20p%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A42%3A138)%0A%20%20%20%20at%20hb%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A46%3A250)%0A%20%20%20%20at%20c%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A22%3A332)
at angular.min.js:sourcemap:7
at angular.min.js:sourcemap:43
at p (angular.min.js:sourcemap:8)
at g (angular.min.js:sourcemap:42)
at hb (angular.min.js:sourcemap:46)
at c (angular.min.js:sourcemap:22)
at Uc (angular.min.js:sourcemap:22)
at we (angular.min.js:sourcemap:21)
at angular.min.js:sourcemap:334
at HTMLDocument.b (angular.min.js:sourcemap:38)
If you are using Angular Routing("ngRoute") as dependency Injection you have to add routing script below angular in your html file.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
or else remove dependency array.
var app = angular.module('myApp', []);
you must add script for "ng-route".and is better to move script tag end of body tag .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css" integrity="sha384-
PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Learn</title>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myCtrl" >
</div>
<script src="angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
<script src="app.js"></script>
</body>
</html>
and no need to fonction({}) in app.js
var app = angular.module('myApp', ["ngRoute"]);
app.controller('myCtrl', function($scope){
});