why can't omit module dependency in angular.module when define component

Question

The main moduleapp.js:

angular.module("myApp",["phoneList"]);

and I follow the tutorial to make a sperate component module named phoneList

angular.module("phoneList")
                      //^ omit the empty bracket here, cause no dependency needed
    .component('phoneList', {
        templateUrl: 'template/phone-list.html',
        controller: function (){
            this.phones = [
                {name: "iphone", snippet: "designed by apple"},
                {name: "nexus", snippet: "phone that could explode"}
            ]}

});

but it will complain that:

angular.min.js:6 Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.6.1/$injector/nomod?p0=phoneList
    at angular.min.js:6
    at angular.min.js:25
    at b (angular.min.js:24)
    at Object.module (angular.min.js:25)
    at phone-list.js:5

When I add an empty [] back:

angular.module("phoneList",[])
     .component(//balabla)

things will work just fine. I checked the API Reference, it demonstrate that the dependency is optional thus could be omitted.

So what cause the problem?

Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module as you are creating phoneList a new module so you have to pass 2nd parameter — muneebShabbir
– muneebShabbir, Commented Feb 9, 2017 at 4:15

Sajeetharan · Accepted Answer · 2017-02-09 04:15:35Z

3

According to the documentation,

angular.module(name, [requires], [configFn]);

If specified then new module is being created. If unspecified then the module is being retrieved for further configuration.

It means you need to pass an empty array []. To make it work without any dependency module, you can use it as

angular.module("phoneList",[])

Update

if the module is already declared you do not have to pass the dependencies again. So you can use your component/controller/service/factory as

angular.module('phoneList').controller(...)...

edited Feb 9, 2017 at 4:15

answered Feb 9, 2017 at 4:09

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

3 Comments

armnotstrong Over a year ago

check the snap-shot I just appended to the question

Sajeetharan Over a year ago

@armnotstrong module and component are two different things, when you declare a component , if the module is alreaydy declared you do not have to pass the depdencies again

armnotstrong Over a year ago

thanks @Sajeetharan, now I get the point, I have a misunderstanding of the specification

ChiefTwoPencils · Accepted Answer · 2017-02-09 04:14:08Z

1

Once you have the module defined you can refer to it without the second argument. The first time you do.

So...

angular.module('app',[ dependencies... ]);
angular.module('app').controller(...)...

would be correct.

answered Feb 9, 2017 at 4:14

ChiefTwoPencils

14k8 gold badges55 silver badges80 bronze badges

Comments

Parantap Parashar · Accepted Answer · 2017-02-09 04:18:04Z

1

This is because passing an array in the second argument tells angular to create a new instance of the module with all the dependencies mentioned. If you do not have any dependencies you have to pass a empty array in order to create a new module.

By omitting this parameter you ask angular to retrieve the existing module. And, in your code you do not have a module previously named phoneList. That is why it is giving you the error.

answered Feb 9, 2017 at 4:18

Parantap Parashar

2,0311 gold badge17 silver badges22 bronze badges

Collectives™ on Stack Overflow

why can't omit module dependency in angular.module when define component

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related