Angular 1.6 Cant put more than one custom component in a page

Question

I'm using angular 1.6, and I have two components, config-list and request-dates.

The components work correctly if they are the only component on the page, but if I put more than one on a page, only the second one works. So in the page, below, request-dates works right.

Can there only be one component on a page?

Here's the main page:

<div ng-app="playground" ng-cloak>
    <config-list></config-list>
    <request-dates></request-dates>
</div>uest-

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/app/module.js"></script>
<script src="~/Scripts/app/config-list.component.js"></script>
<script src="~/Scripts/app/request-dates.component.js"></script>

Here's module.js:

(function () {
    "use strict";

    angular.module("playground", []);    
}());

Here's config-list.component.js:

(function(){

    var module = angular.module("playground", []);

    function controller()
    {
        var model = this;
    };

    module.component("configList",
        {
            templateUrl: "/Scripts/app/config-list.component.html",
            controller: controller,
            controllerAs: "model"
        });
}());

Here's config-list.component.html:

<p>Hello from configlist</p>

Here's request-dates.component.js:

(function () {
    var module = angular.module("playground", []);

    function controller()
    {
        var model = this;
    }

    module.component("requestDates",
        {
            templateUrl: "/Scripts/app/request-dates.component.html",
            controller: controller,
            controllerAs: "model"
        });
}());

Here's request-dates.component.html:

<p>Hello from requestDates</p>

[Update] - as the correct answer showed, I was accidentally overwriting the module (which wiped out the first component) with a new module containing the second component, which explains why the first component was not appearing.

Try removing the brackets (and comma) from the module declaration in the external files — Dan
– Dan, Commented Feb 18, 2017 at 4:12
Possible duplicate of AngularJS best practices for module declaration? — Dan
– Dan, Commented Feb 18, 2017 at 4:14
No sh0ber, this is not a duplicate - a best practice link is not a duplicate answer, and as the answer below states I was accidentally redefining (and thereby overwriting) the existing module. Before you downvote someone's answer (which affects their reputation), you should be more careful. — Rick Hodder
– Rick Hodder, Commented Feb 22, 2017 at 16:15
This question is asked frequently (i.e. How do I use 2 modules / pages?) Also, I did not leave that comment hoping for a reply. It gets auto-generated by a close vote. — Dan
– Dan, Commented Feb 22, 2017 at 17:33

Chanthu · Accepted Answer · 2017-02-18 05:42:12Z

1

When accessing your playground module, you do not need the second parameter (dependencies).

So, in your module.js you have var module = angular.module("playground", []); which is the correct way to create a module.

Then in your config-list.component.js and request-dates.component.js, you should be just accessing your module, NOT creating them.

Accessing an already created module: var module = angular.module("playground");

edited Feb 18, 2017 at 5:42

answered Feb 18, 2017 at 4:12

Chanthu

1,7941 gold badge15 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Angular 1.6 Cant put more than one custom component in a page

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related