5
votes

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.

2
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

2 Answers

0
votes

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 !

0
votes

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