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.

Answer 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");