When setting up an AngularJS project using TypeScript, I encountered the following error:
Error: [ng:areq] http://errors.angularjs.org/1.5.5/ng/areq?p0=MovieCtrl&p1=not%20aNaNunction%2C%20got%20undefined
I am also utilizing watchify to compile my app.ts into bundle.js
In my index file, Angular is bootstrapped using ng-app, including an HTML file that loads correctly, and external files are imported at the end of the body section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
</head>
<body ng-app="app">
<div ng-include="'movie.html'"></div>
<!--Libraries-->
<script src="Scripts/angular.min.js"></script>
<script src="bundle.js"></script>
<!--Controllers-->
<script src="app/movieCtrl.js"></script>
</body>
</html>
The movie.html file includes:
<div ng-controller="MovieCtrl as vm"></div>
This is the content of movieCtrl file:
class MovieCtrl {
// fields
// constructor
// properties
// functions
}
angular
.module('app')
.controller('Movie',
MovieCtrl);
Lastly, here is my app.ts file:
angular.module("app", []);
Any thoughts on why I am experiencing an error with the MovieCtrl?