Angular folders/files structure for a simple app (style guide)

Question

I’m studying angular’s style guide and I got some doubts while developing a simple app! The app is to control user’s stock exchange shares. So it’s needed:

• a module to authenticate user (signin, signup and reset password)
• a module with a component to show all user’s stocks and another one to add new stocks
• a module to edit user’s profile

Authentication module will have a different layout from the rest of app (authentication will have just a centralised form while rest of app will have a nav-bar as menu).

Question 1: I’ll create a component called Layout inside Auth module and use it only for authentication views; Where do I create the Layout component or module (I don’t know which one) to use with the rest of app? Should I create a Core module and inside this module a Layout module? Should I create a core module and a layout module (outside of core)?

Question 2: where should I create the guard for authentication? This guard will be used for Stocks and Profile modules to avoid users that aren’t logged in

Question 3: how would you structure this simple project regarding folders and files?

Answer 1

Currently, I'm using this article to organize my Angular folder structure. Basically, we have three main folders - core, shared, views.

• core: it has the CoreModule which provides all app common services. It's imported only once in AppModule. In this folder, I have services and guards subfolders because they are injectables (question 2 answer). guards I don't provide at CoreModule, I provide them at routing modules, i.e AppRoutingModule.
• shared: it has the SharedModule which declare and exports all app common components, pipes, enums, classes and directives (all classes expect services and guards). SharedModule is imported by views module.
• views: it gets all views modules (generally lazy-load modules).

The structure is (question 3 answer):

/app
|---/core
|   |---/guards
|   |---/services
|   |---core.module.ts
|
|---/shared
|   |---/components
|   |---/directives
|   ...
|   |---shared.module.ts
|
|---/views
|   |---/view-X
|       |---/components
|       |---/directives
|       |---view-X.component.html
|       |---view-X.component.css
|       |---view-X.component.spec.ts
|       |---view-X.component.ts
|       |---view-X.module.ts
|       |---view-X-routing.module.ts

In your case, could have three views folders/modules: authenticate, user-stock and user-edit. Each one will have the structure similar to the view-X folder example (question 1 answer).