Angular Import/Export modules in shared Module or Import in Multiple Modules

Question

I am restructuring Angular application and I need to clarify some stuff.

I am using modular structure (Core, Shared, etc). There are some common modules which used almost everywhere for ex CommonModule, FormsModule and many others. Practically I need to understand which approach would be more... native options are:

1. To include these modules into the Shared module import, exports arrays (thus they can be used everywhere where I import shared module.

2. To import common modules in all submodules.

Which approach to use?

Answer 1

Use the first approach since it allows for better organization/streamlining of code as a project gets larger. The Shared Module pattern is recommended by the Angular team .

That said, there is nothing wrong with importing each common module into submodules, but it becomes cumbersome to do so as your project grows in size. For a project with several modules, it will be extremely redundant to manually import commonly used modules into each newly created module, as opposed to making a single import.

Answer 2

According to Angular Style Guide. It's better to choose Option1.

You can refer to this document: Angular Stype Guide(Shared module)

Answer 3

Thanks a lot, it seems that importing child modules solved my problem,but than another issue arose.

I have also to import child route modules

In my case, it was because I had created a route file in a child module "A", but didn't import that route file in the root module, even though child module "A" was imported into the root module.