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.