Should the core module import the shared module in Angular2

Question

Following several advices on how to structure an angular application, I end up with this file organization :

- app
    - core
        - header
        - sidenav
        core.module.ts
    - shared
        - material
            custom-material.module.ts
        shared.module.ts
    - features
    app.module.ts

I have a core module and a shared module
The core module exports global components such as HeaderComponent or SidenavComponent
The shared module exports a CustomMaterial submodule (I heard it was the way to do things)
The CustomMaterial submodule exports the different material components I need
The app module only imports the core module (since shared module should only be imported by elements that need it)
The modules in features/ are lazy loaded

But now, my problem is : my header component needs some material components.

Should I import my shared module into my core module or into my app module ? But it seems like an anti-pattern to me.

This question is pretty old, and the only answer given doesn't really seem to answer the question. I came here looking for an answer to this as well. From what I have found, it seems that it is okay for the CoreModule to import the SharedModule, but should not export it. — crush
– crush, Commented Oct 4, 2019 at 0:25

matirmv · Accepted Answer · 2019-02-21 14:26:14Z

0

The only thing you have to do is to create a shared.module.ts inside whom you should import all the material modules you want to use everywhere(MatInputModule, MatButtonModule,etc..) and export all these imported modules (which makes you able to import them in another module, calling this shared module).

The small thing to do after that, is just to import this shared module containing all the material modules, inside your header module and footer module for example (if you need MatInputModule of course)

Hope i have been clear

Have a nice day !

answered Feb 21, 2019 at 14:26

matirmv

2812 silver badges14 bronze badges

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

3 Comments

Loheek Over a year ago

But this way the shared module is imported into the header module, that is imported into the core module, that is imported into the app module... and I heard it was not a good practice to import the shared module into the app module, implying the shared module to be global, am I wrong ? Have a nice day too :)

matirmv Over a year ago

Not if you are doing lazy loading ;). The shared Module will be loaded inside HeaderModule for example, but not inside the app.module because it won't be imported to the app.module at run time ;)

Loheek Over a year ago

Even if my HeaderModule is inside my CoreModule ? I mean, there is no routing inside CoreModule and HeaderModule is not lazy loaded, Can you explain why it won't be imported at run time ?

Eric Aya · Accepted Answer · 2020-08-05 15:35:40Z

0

Importing needed modules should be ideal unless you are not facing recursive import conflicts between two or more modules.

edited Aug 5, 2020 at 15:35

Eric Aya

70.2k36 gold badges190 silver badges266 bronze badges

answered Aug 5, 2020 at 15:18

Ravi Anand

5,54211 gold badges54 silver badges81 bronze badges

Collectives™ on Stack Overflow

Should the core module import the shared module in Angular2

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related