AngularJS App not working anymore

Question

I just noticed that my Angular Webapp doesn't work anymore since I added leaflet directive. This is the error message shown on the console:

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

But the app works on every other browser I have tried, so the problem doesn't seem to be a syntax error or something similar.

Here is the link to my test page if you want to have a live look at it: http://zoiglapp.bplaced.net

My code: (I have no idea what is important since I don't know where the error comes from, so I'll just post the index, the module and a sample controller)

index.html

<!DOCTYPE html>
<html lang="de" ng-app="ZoiglApp">
<head>
    <title>Der Zoigl Kalender</title>
    <meta charset="utf-8">
    <!--KEYWORDS EINFÜGEN!!!!!!!!-->
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
    <!--FONTS-->
    <link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <link href='/css/fontello/css/fontello.css' rel='stylesheet' type='text/css'>
    <link href='/css/fontello/css/fontello-codes.css' rel='stylesheet' type='text/css'>
    <link href='/css/fontello/css/fontello-embedded.css' rel='stylesheet' type='text/css'>
    <link href='/css/fontello/css/fontello-ie7-codes.css' rel='stylesheet' type='text/css'>
    <link href='/css/fontello/css/fontello-ie7.css' rel='stylesheet' type='text/css'>
    <link href='/css/fontello/css/animation.css' rel='stylesheet' type='text/css'>
    <!--STYLESHEETS-->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <!--SCRIPTS-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//code.angularjs.org/1.0.8/i18n/angular-locale_de-de.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <script src="//raw.githubusercontent.com/tombatossals/angular-leaflet-directive/master/dist/angular-leaflet-directive.min.js"></script>
</head>
<body>
<div id="wrapper">

    <!---Header--->
    <div id="header">
        <div id="logo" class="fullwidth">
            <a href="#home"><img src="images/logo.jpg"/></a>
        </div>
    </div>

    <!---Seiteninhalt--->
    <div id="content" class="container-fluid">
        <div ng-view></div>
    </div>

    <!---Footer Nav--->
    <div id="nav" class="fullwidth" ng-controller="MainController">
        <ul class="list-unstyled">
        <li><a href="#home"><span class="navicon"><i class="icon-home"></i></span>
            <span class="navdesc small">Home</span></a></li>
        <li><a href="#help"><span class="navicon"><i class="icon-help-circled"></i></span>
            <span class="navdesc small">Hilfe</span></a></li>
        <li><a href="#list"><span class="navicon"><i class="icon-list-bullet"></i></span>
            <span class="navdesc small">Lokale</span></a></li>
        <li><a href="#map"><span class="navicon"><i class="icon-location"></i></span>
            <span class="navdesc small">Orte</span></a></li>
        <li><a href="#calendar/{{dt | date : 'yyyy,MM,dd'}}"><span class="navicon"><i class="icon-calendar"></i></span>
            <span class="navdesc small">Daten</span></a></li>
        <li><a href="#types/0"><span class="navicon"><i class="icon-beer"></i></span>
            <span class="navdesc small">Typen</span></a></li>
        </ul>
    </div>
</div>

<!---- Javascript: ---->
<script src="js/style.js"></script>


<!----Modules---->
<script src="js/app.js"></script>

<!----Controllers---->
<script src="js/MainController.js"></script>
<script src="js/HomeController.js"></script>
<script src="js/HelpController.js"></script>
<script src="js/ListController.js"></script>
<script src="js/MapController.js"></script>
<script src="js/CalendarController.js"></script>
<script src="js/DateController.js"></script>
<script src="js/TypesController.js"></script>

<!----Services---->

<!----Directives---->

</body>
</html>

app.js

var app = angular.module('ZoiglApp', ['ngAnimate', 'ui.bootstrap', 'ngRoute', 'leaflet-directive']);

app.config(function($routeProvider) {
    $routeProvider
    .when('/home', {
        controller: 'HomeController',
        templateUrl: 'views/home.html'
    })
    .when('/help', {
        controller: 'HelpController',
        templateUrl: 'views/help.html'
    })
    .when('/list', {
        controller: 'ListController',
        templateUrl: 'views/list.html'
    })
    .when('/map', {
        controller: 'MapController',
        templateUrl: 'views/map.html'
    })
    .when('/calendar/:dt', {
        controller: 'CalendarController',
        templateUrl: 'views/calendar.html'
    })
    .when('/date/:dt', {
        controller: 'DateController',
        templateUrl: 'views/date.html'
    })
    .when('/types/:zoiglType', {
        controller: 'TypesController',
        templateUrl: 'views/types.html'
    })
    .otherwise({
        redirectTo: '/home'
    });
});

MapController.js (where leaflet is used)

app.controller('MapController', ['$scope', function($scope) {
    angular.extend($scope, {
        center: {
            lat: 49.77,
            lng: 12.23,
            zoom: 11,
            autoDiscover: true,
        }
    });
}]);

score 3 · Accepted Answer · edited May 23 '17 at 11:44

On the Leaflet directive documentation/demo see how it should be added to your project:

http://tombatossals.github.io/angular-leaflet-directive/#!/

<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="/js/angular-leaflet-directive.min.js"></script>

Files should not be added to your project directly from raw github source (like CDN), because browsers will have trouble identifying them as correct MIME type. In above example you can see that both cdn.leafletjs.com and ajax.googleapis.com are configured to serve files remotely, github isn't.

If you don't want to manually download libraries from various sources to your server, try using bower to manage all your dependencies. Your Leaflet directive is on bower: http://bower.io/search/?q=leaflet%20directive

Also you can use rawgit.com, which will re-host github files so that you can import them remotely. Check relevant post: Link and execute external JavaScript file hosted on GitHub

Thanks. That's really good to know, I always used the github link (and it seemed to work so far, too) — Linda, Nov 13 '15 at 13:15
@Linda you can also use rawgit.com to re-host github sources, edited my post — rsobon, Nov 13 '15 at 13:25

Adam Jenkins · Answer 2 · 2020-04-01T11:04:54.137

2

Your leaflet script isn't being loaded:

Refused to execute script from 'http://raw.githubusercontent.com/tombatossals/angular-leaflet-directive/master/dist/angular-leaflet-directive.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

GitHub is not a CDN, if you want to use somebody's GitHub code, then download their script, upload it to your server, and serve it from there.

edited Apr 01 '20 at 11:04

answered Nov 13 '15 at 13:01

Adam Jenkins

51,445
11
72
100

Thanks. That's really good to know, I always used the github link (and it seemed to work so far, too) – Linda Nov 13 '15 at 13:15

AngularJS App not working anymore

2 Answers2