Failed to instantiate angular module

Question

I am trying to create a simple angular app and i keep getting this error.

[Error] SyntaxError: Unexpected token '<'
    (anonymous function) (app.js:1)
[Error] SyntaxError: Unexpected token '<'
    (anonymous function) (controller.js:1)
[Error] Error: [$injector:modulerr] Failed to instantiate module thisApp due to:
[$injector:nomod] Module 'thisApp' 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.
http://errors.angularjs.org/1.5.5/$injector/nomod?p0=thisApp
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:68:32
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:2070:32
ensure@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:1994:45
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:4564:35
forEach@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:322:24
loadModules@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:4548:12
createInjector@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:4470:30
doBootstrap@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:1746:34
angularInit@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:1652:14
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:30863:16
trigger@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:3166:9
defaultHandlerWrapper@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:3456:15
eventHandler@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:3444:23
http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=thisApp&p1=%5B%24injector%3Anomod%5D%20Module%20'thisApp'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.5.5%2F%24injector%2Fnomod%3Fp0%3DthisApp%0Ahttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.js%3A68%3A32%0Ahttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.js%3A2070%3A32%0Aensure%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.js%3A1994%3A45%0Ahttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.js%3A4564%3A35%0AforEach%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.js%3A322%3A24%0AloadModules%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.js%3A4548%3A12%0AcreateInjector%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.js%3A4470%3A30%0AdoBootstrap%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.js%3A1746%3A34%0AangularInit%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.js%3A1652%3A14%0Ahttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.js%3A30863%3A16%0Atrigger%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.js%3A3166%3A9%0AdefaultHandlerWrapper%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.js%3A3456%3A15%0AeventHandler%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.js%3A3444%3A23
    (anonymous function) (angular.js:4588)
    forEach (angular.js:322)
    loadModules (angular.js:4548)
    createInjector (angular.js:4470)
    doBootstrap (angular.js:1746)
    angularInit (angular.js:1652)
    (anonymous function) (angular.js:30863)
    trigger (angular.js:3166)
    defaultHandlerWrapper (angular.js:3456)
    eventHandler (angular.js:3444)

Below is the folder structure of my app:

|-/ang-material
   |-/public
      |-/app
         |-app.js
         |-controller.js
      |-index.html
   |-am_server.js

index.html

<!DOCTYPE html>
<html lang="en" ng-app="thisApp">
<head>
    <meta charset="UTF-8">
    <title>Ang-Mat Test</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Angular Material style sheet -->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">

    <!-- Angular Material requires Angular.js Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-route.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

    <!-- Angular Material Library -->
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

    <!--Roboto Font-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

    <!--Cust Ang Files-->
    <script src="./app/app.js"></script>
    <script src="./app/controller.js"></script>
</head>
<body>
<div ng-controller="myController as ctrl">
    {{ctrl.simpleHeader}}
    <h1>{{ctrl.test}}</h1>
</div>
</body>
</html>

app.js

(function () {
    angular.module("thisApp", ['ngMaterial']);
})();

controller.js

(function () {
    angular
        .module("thisApp")
        .controller("myController", MainController);

    function MainController() {
        var vm = this;
        vm.simpleHeader = "Hello from MC";
        vm.test = "test";
    }
})();

am_server.js

var http = require('http');
var fs = require('fs');

function onResponse(req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    fs.readFile('./ang-material/public/index.html', null, function (error, data){
        if(error){
            res.writeHead(404);
            res.write('<h1>Page Not Found</h1>');
        } else {
            res.write(data);
        }
        res.end();
    });

}

http.createServer(onResponse).listen(5000);

I don't understand why i keep getting the error that it fails to load the thisApp module.

I can see that all my paths look fine and i am loading all my required files in my index.html.

Can someone let me know any hints as to what might be causing my issue?

You've truncated an error. Please, cite full error message with call stack — Estus Flask, Nov 12 '16 at 02:43
first, when using `ng-route`, it's version must match **exactly** to the version of angular. second, when troubleshooting an error with angular, you should use `angular.js` rather than `angular.min.js` — Claies, Nov 12 '16 at 02:49
ok changed versions to match and used `angular.js`. also updated the error. — rapidclock, Nov 12 '16 at 02:52
now you are getting somewhere. you *probably* have your server returning your index.html on unknown routes for Html5Mode; unfortunately, it is returning the index.html for your .js files as well. — Claies, Nov 12 '16 at 02:54
see this, for example: http://stackoverflow.com/questions/31495743/node-angular-app-uncaught-syntaxerror-unexpected-token — Claies, Nov 12 '16 at 02:59
ya, thanks. It was like you said, due to my server side code. I posted the code and updated my directory structure. i'm pretty new to this stuff. can you tell me what am i doing wrong in my `am_server.js` file? — rapidclock, Nov 12 '16 at 03:06
You may consider using Express for web server instead of pure Node, especially if you're new to it, i.e. serving static files if they exist and serving index on 404. This is standard setup for SPA. I would suggest to address it in dedicated question because the problem isn't related to Angular in any way. — Estus Flask, Nov 12 '16 at 04:04
ok thanks for the feedback, you are right, this should go in a new question. — rapidclock, Nov 12 '16 at 19:32

Failed to instantiate angular module

0 Answers0