Content
View differences
Updated by Aleix Suau about 5 years ago
How do we handle modules?
* How are they split up?
* How are they organized in directories?
* Do we separate them by type (feature, core, etc.)?
* Structure:
* Core
Common functionalities that are instantiated once for the entire app.
_"The CoreModule takes on the role of the root AppModule , but is not the module which gets bootstrapped by Angular at run-time. The CoreModule should contain singleton services (which is usually the case), universal components and other features where there’s only once instance per application."_
* Shared
Functionalities that are used across the app.
_"The SharedModule is where any shared components, pipes/filters and services should go. The SharedModule can be imported in any other module when those items will be re-used. The shared module shouldn’t have any dependency to the rest of the application and should therefore not rely on any other module."_
* When to place in shared?
* Services should not go into shared
* should not have any dependency on any of the other modules in the application.
* Features
_"A feature module delivers a cohesive set of functionality focused on a specific application need such as a user, routing, or forms. A feature module is an organizational best practice."_
* _Doesn't need to be routed_
* [LIFT](https://angular.io/guide/styleguide#lift)
* Open questions:
* Should we create a “Pages” folder inside features?
* Should we create “Containers” and “Components” folder to differentiate smart from dumb components?
* Naming conventions:
* starts with Op, with OpenProject…
* Only prepend OP in selectors and modules but not in files and folder names?
* In files, prepending all with op would beat readability
* Prepending modules and component selectors would help to differentiate between own and third-party code.
* Should we prepend services, pipes, interceptors…
* Should we organize per type (component, service...) inside the main folders (core, features...)?
* OpenprojectEditorModule includes WikiIncludePageMacroModal, CodeBlockMacroModal, ChildPagesMacroModal?
* common/plugins moving it to core breaks
* Shared is divided per types (components....) but there are modules that contain components, directives...
* _where do we place sass partials?_
* _common/export-options sass_
* _common/header_
* Ideas:
* organize shared in categories
* per type: components/pipes…
* per functionality: layout, inputs…
* typings.d.ts
* index.ts
References:
* [https://angular.io/guide/styleguide#lift](https://angular.io/guide/styleguide#lift)
* [https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7](https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7)
* [https://medium.com/@motcowley/angular-folder-structure-d1809be95542](https://medium.com/@motcowley/angular-folder-structure-d1809be95542)
* [https://www.tektutorialshub.com/angular/angular-folder-structure-best-practices/](https://www.tektutorialshub.com/angular/angular-folder-structure-best-practices/)
* How are they split up?
* How are they organized in directories?
* Do we separate them by type (feature, core, etc.)?
* Structure:
* Core
Common functionalities that are instantiated once for the entire app.
_"The CoreModule takes on the role of the root AppModule , but is not the module which gets bootstrapped by Angular at run-time. The CoreModule should contain singleton services (which is usually the case), universal components and other features where there’s only once instance per application."_
* Shared
Functionalities that are used across the app.
_"The SharedModule is where any shared components, pipes/filters and services should go. The SharedModule can be imported in any other module when those items will be re-used. The shared module shouldn’t have any dependency to the rest of the application and should therefore not rely on any other module."_
* When to place in shared?
* Services should not go into shared
* should not have any dependency on any of the other modules in the application.
* Features
_"A feature module delivers a cohesive set of functionality focused on a specific application need such as a user, routing, or forms. A feature module is an organizational best practice."_
* _Doesn't need to be routed_
* [LIFT](https://angular.io/guide/styleguide#lift)
* Open questions:
* Should we create a “Pages” folder inside features?
* Should we create “Containers” and “Components” folder to differentiate smart from dumb components?
* Naming conventions:
* starts with Op, with OpenProject…
* Only prepend OP in selectors and modules but not in files and folder names?
* In files, prepending all with op would beat readability
* Prepending modules and component selectors would help to differentiate between own and third-party code.
* Should we prepend services, pipes, interceptors…
* Should we organize per type (component, service...) inside the main folders (core, features...)?
* OpenprojectEditorModule includes WikiIncludePageMacroModal, CodeBlockMacroModal, ChildPagesMacroModal?
* common/plugins moving it to core breaks
* Shared is divided per types (components....) but there are modules that contain components, directives...
* _where do we place sass partials?_
* _common/header_
* Ideas:
* organize shared in categories
* per type: components/pipes…
* per functionality: layout, inputs…
* typings.d.ts
* index.ts
References:
* [https://angular.io/guide/styleguide#lift](https://angular.io/guide/styleguide#lift)
* [https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7](https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7)
* [https://medium.com/@motcowley/angular-folder-structure-d1809be95542](https://medium.com/@motcowley/angular-folder-structure-d1809be95542)
* [https://www.tektutorialshub.com/angular/angular-folder-structure-best-practices/](https://www.tektutorialshub.com/angular/angular-folder-structure-best-practices/)