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.

Rent Charter Buses Company
READ ALSO
Wrong charset from AJAX

Wrong charset from AJAX

When I want to printout the output of jQuery AJAX, which has been recived from serverIt doesn't show the right charset

377
List of key value pairs to array of arrays

List of key value pairs to array of arrays

have something like the following:

371
Uncaught SyntaxError: Unexpected end of input in parseJSON method javascript

Uncaught SyntaxError: Unexpected end of input in parseJSON method javascript

In a webpage that uses javascript, I pass data to a hidden input field using

935