What kind of code we write inside class declared under ngModule decorator?

Question

I am just starting to learn Angular. I have come across several examples using ngModule decorators over an empty class.

What I want to know is... Is the class declared directly below the ngModule decorator only used to initialize a module or does it serve any other purpose?

score 5 · Answer 1 · edited Jan 19 '18 at 20:34

5

You can for example use the constructor or implement ngDoBootstrap to execute code when a lazy loaded module was loaded the first time (initialized)

You can also inject services to the constructor so that they are instantiated by DI when the application or the lazy loaded module is initialized.

I can't remember seeing other examples. Besides that it only carries the @NgModule() decorator and the information provided there. (There might be some additional code generated when the app is built)

See also the ngDoBootstrap comment in https://angular.io/guide/entry-components

edited Jan 19 '18 at 20:34

yurzui

205,937
32
433
399

answered Jan 19 '18 at 14:12

Günter Zöchbauer

623,577
216
2,003
1,567

1

@yurzui Thanks. I knew I there was something else. I guess I saw this in one of your great answers several months ago. – Günter Zöchbauer Jan 19 '18 at 14:31
Do you have any examples with code that you can share? – CodyBugstein Jan 22 '18 at 00:07
1

Just add a constructor or `ngDoBootstrap` and add code of your choice to be executed. I have seen some questions where that was asked for, but I don't know a use case myself. – Günter Zöchbauer Jan 22 '18 at 04:10
vs @GünterZöchbauer I had no chance for the bounty :-) – Flavien Volken Jan 22 '18 at 21:27
@FlavienVolken sorry for that :-/ – Günter Zöchbauer Jan 22 '18 at 21:35

Luca Taccagni · Answer 2 · 2018-01-16T09:09:20.153

you need the class declaration for the effective export. The module is initialized with imports, but you have access to functionalities from the class export (in fact, what are you importing?)

Hope this helped

EDIT --

"The body of the class is empty. But that decorator above the class (@NgModule) is giving that class its functionality. So really, that class isn't empty. It just doesn't require any extra logic after the decorator is applied to it. bootstrapModule takes a class as input and assumes that that class is decorated with @NgModule configured in a manner similar to what you have (declarations, imports, providers, etc.)." from: Why Angular export empty class in app.modules.ts?

I did not understand this at all – CodyBugstein Jan 15 '18 at 16:15 — CodyBugstein, Jan 15 '18 at 16:15

Flavien Volken · Answer 3 · 2018-02-13T16:04:03.653

The class is only used as a reference you can import from typescript. The decorator cannot be put without a class or member to decorate.

After the compilation, it will hold the annotation you used to decorate that class. Those will be used by angular to configure the injector, especially which class it needs to create when a component needs to inject a given member type.

Now, you could put something into the constructor, for instance if you want to do something at the time the module (and related components / providers) are about to be injected. This is the only use I can think about right now.

[edit] I just used it to register a locale when the app do start.

export class AppModule {
    constructor() {
        registerLocaleData(localeDeCH);
    }
}

The idea came from here where they do not specify where to call registerLocaleData

score 2 · Answer 4 · answered Jan 19 '18 at 14:09

Take a look at the official documentation for angular NgModules. https://angular.io/guide/ngmodules

The following are from that:

@NgModule takes a metadata object that describes how to compile a component's templates and how to create an injector at runtime

NgModule metadata does the following:

Declares which components, directives, and pipes belong to the module.
Makes some of those components, directives, and pipes public so that other module's component templates can use them.
Imports other modules with the components, directives, and pipes that components in the current module need. Provides
services at the other application components can use.

What kind of code we write inside class declared under ngModule decorator?

4 Answers4