Why do Angular docs suggest importing both on module and on component level?

Question

In the docs for reactive forms, it's suggested that I should add the following lines to my app.module.ts.

import { ReactiveFormsModule } from '@angular/forms';
...
@NgModule({ imports: [ ReactiveFormsModule, ... ], ... })
export class AppModule { }

Then, in a later section, it's suggested to also add the following in my actual.component.ts.

import { FormControl, FormGroup } from '@angular/forms';

I've tried to skip the module part and only import stuff in the component, which seems to work, as far I can tell. It seems reasonable to me that if I'd do the opposite and added the module part, I wouldn't have to import in the components of that module. It's the combination of module part and component part that confuses me.

I don't understand the purpose of the both operations together. Why do they do that?

J. Pichardo · Accepted Answer · 2018-05-16 14:46:10Z

5

Importing at module level allows you to declare that module as a dependency of your module hence being able to use its providers, directives, pipes and other stuff in your templates.

Importing at component level allows you to use those classes in your typescript code.

Further explanation

In angular importing a module "merges" that module, so that when your template is compiled it recognizes template elements (components, directives and pipes) as angular elements.

In typescript and javascript in order to use code (classes, functions, constants) that is declared in another file or module you need to import it, in node you use the require() function, in typescript the import from expression.

So if you look at your code you will realize you are importing two different things, the module and the class, the first in order to merge that module and the second in order to use that class.\

Update

In typescript it is possible to have index files which are usually used to export elements whithout having to go deep into the folder structure, the file for '@angular/forms' exports the following (among other things):

export {AbstractControl, AbstractControlOptions, FormArray, FormControl, FormGroup} from './model';
export * from './form_providers';

Where form_providers has the declaration of FormsModule and ReactiveFormsModule.

Hence you are able to import both your module and your classes from one file.

edited May 16, 2018 at 14:46

answered May 16, 2018 at 14:28

J. Pichardo

3,1151 gold badge23 silver badges37 bronze badges

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

1 Comment

DonkeyBanana Over a year ago

Yeah, but that doesn't really answering my question. It's not about providers, pipes etc. It's specifically about the module in their example. It's being added to the root module of the application, also, so it's not meant to be imported into other stuff, neither. Please elaborate.

user4676340 · Accepted Answer · 2018-05-16 14:44:27Z

In simple words :

Importing the module allows you to use the features of the module. Reactive forms allow you to create FormGroups with FormBuilders, that contain FormControls.

Importing the features in the component allows you to use those features. If you don't do it, your IDE won't know what FormGroup or FormControl means.

It may work without importing the features because they have been loaded in a bundle, but if you try to build your application without importing them, an error will be thrown.

Also, you need to import modules where you want to use their features. In Angular, modules don't inherit from their parents, so if you import the module at a too high level, you won't have access to it.

Collectives™ on Stack Overflow

Why do Angular docs suggest importing both on module and on component level?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related