Module error Angular 1.5

Question

It looks like I can't instantiate my module. Here is my files :

--tv
   -- contents (folder)
       -- contents.template.html
       -- contents.component.js
   -- index.html
   -- bootstrap.js

Now, here's the code :

Contents.component.js :

angular
.module('contents', [])
.component('myContents', {
    controller: contentController,
    templateUrl: 'contents/content.template.html',


});
function contentController() {
console.log('Le content est appelée !');
}

index.html :

    <!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY"             crossorigin="anonymous">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>TV</title>
    <!-- SCRIPT DE CONNEXION -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bootstrap.js"></script>
    <script src="/bower_components/angular-component-router/angular_1_router.js"></script>
    <script src="/bower_components/angular-component-router/ng_route_shim.js"></script>
    <script src"/contents/contents.component.js"></script>


</head>
<body ng-app="app">
    <my-contents></my-contents>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <!-- Tether -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
</body>
</html>

Finally bootstrap.js :

angular
.module('app', ['ngComponentRouter', 'contents'])
.config(function ($locationProvider) {
    $locationProvider.html5Mode(true);
})
.value('$routerRootComponent', 'myApp')
.component('app', {

});

And the error catched in the browser console :

    Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module contents due to:
[$injector:nomod] Module 'contents' 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.8/$injector/nomod?p0=contents
minErr/<@http://127.0.0.1:8080/bower_components/angular/angular.js:68:12
module/<@http://127.0.0.1:8080/bower_components/angular/angular.js:2082:17
ensure@http://127.0.0.1:8080/bower_components/angular/angular.js:2006:38
module@http://127.0.0.1:8080/bower_components/angular/angular.js:2080:14
loadModules/<@http://127.0.0.1:8080/bower_components/angular/angular.js:4617:22
forEach@http://127.0.0.1:8080/bower_components/angular/angular.js:321:11
loadModules@http://127.0.0.1:8080/bower_components/angular/angular.js:4601:5
loadModules/<@http://127.0.0.1:8080/bower_components/angular/angular.js:461

I made a copy/paste of another project that I built yesterday that works. I have no idea why it's not working.

move script tag of contents.component.js above the script tag of bootstrap.js in your index.html — Ja9ad335h
– Ja9ad335h, Commented Aug 17, 2016 at 13:10
Cissokho hein ? :P Salut ! I did, looks like it doesn't change anything ! — Kalas Yagami
– Kalas Yagami, Commented Aug 17, 2016 at 13:12

AranS · Accepted Answer · 2016-08-17 13:11:13Z

1

You are bootstrapping your app, then you load the contents script. Change their order, like this:

<script src="bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-component-router/angular_1_router.js"></script>
<script src="/bower_components/angular-component-router/ng_route_shim.js"></script>
<script src"/contents/contents.component.js"></script>
<script src="bootstrap.js"></script>

answered Aug 17, 2016 at 13:11

AranS

1,91113 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kalas Yagami Over a year ago

bootstrap.js is just a name, all the bootstrap stuff is at the end of index.html no ?

Dan M. CISSOKHO Over a year ago

bootstrap is the Angular initialization process

AranS Over a year ago

bootstrap.js is the file in which you declare your module. library files (such as angular and jQuery) should come first, then your app .js files.

Kalas Yagami Over a year ago

So I take the 3 scripts at the end (jquery, tether and bootstrap.min.js) and I copy them at the beginning of the scripts group in the head ?

Collectives™ on Stack Overflow

Module error Angular 1.5

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related