Javascript file has reference, but returns an error

360

November 26, 2016, at 7:16 PM

I have a pretty straightforward code and I don't understand what it's not working.

I want to reference app.js from within index.html. In the part, I have a reference to it (if I press Ctrl + click it sends me to the right file), but when i run it in browser, I have the following error:

Uncaught SyntaxError: Unexpected token <

Due to this, I also get the failed to load module from Angular, since it's not finding it.

Uncaught Error: [$injector:modulerr] Failed to instantiate module userApp due to: Error: [$injector:nomod] Module 'userApp' 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.

angular.module('userApp', [
    'app.routes',
    'authService',
    'mainCtrl',
    'userCtrl',
    'userService',
    'ngAnimate',
    'ngRoute'
]);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User CRM</title>
    <base href="/">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.1/paper/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
    <link rel="stylesheet" href="../assets/css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body data-ng-app="userApp" data-ng-controller="mainController as main">
</body>
</html>

The folder placement is like this

public/
----------
 - index.html
 - app.js
 - other_stuff

If I take the code from app.js and write it within <script></script> like this it works.

<script type="text/javascript">
    angular.module('userApp', [
        'app.routes',
        'authService',
        'mainCtrl',
        'userCtrl',
        'userService',
        'ngAnimate',
        'ngRoute'
    ]);
</script>

What am I doing wrong?

Answer 1

Try with angular.bootstrap() there is no dependency with ng-app directive:

<body data-ng-controller="mainController as main">
</body>

now in the script file:

<script type="text/javascript">
    angular.module('userApp', [
        'app.routes',
        'authService',
        'mainCtrl',
        'userCtrl',
        'userService',
        'ngAnimate',
        'ngRoute'
    ]);
    angular.bootstrap(document, ['userApp']);
</script>

The issue seems to be with the usage of <base href="/"> and you can learn about nobase here.