Tips for creating an efficient folder structure for your Angular 6 project that can easily scale

Exploring the ins and outs of Angular 6 and its fundamental components has left me with a bit of confusion regarding the ideal folder structure to employ. I've delved into various tutorials from sources like Traversy Media, Udemy, and beyond, each advocating for different folder structures based on project requirements.

Here's a simple folder structure outlined in the Angular documentation: https://i.sstatic.net/wm6iT.png

After extensive searching and research, here is the structure I experimented with:

└───src
    ├───app
    │   ├───layout
    │   │   ├───admin
    │   │   │   ├───breadcrumbs
    │   │   │   └───title
    │   │   └───auth
    │   ├───pages
    │   │   ├───animations
    │   │   ├───authentication
    │   │   │   ├───forgot
    │   │   │   ├───lock-screen
    │   │   │   ├───login
    │   │   │   │   ├───with-bg-image
    │   │   │   │   ├───with-header-footer
    │   │   │   │   ├───with-social
    │   │   │   │   └───with-social-header-footer
    │   │   │   └───registration
    ... (folder structure continues)
    └───environments

Choosing between a structural approach aligned with real-world Angular samples or one customized based on personal preference can be tough. Feel free to share your alternative structure if you believe it surpasses what I have come up with so far. Thank you!

angulartypescriptangular6

Answer №1

For my highly scalable Angular applications, I have structured my folders in a way that incorporates best practices from the community, other GitHub Angular projects, and my own experiences.

|-- app

     |-- [+] configs
     |
     |
     |-- core
       |-- [+] authentication
       |-- [+] guards
       |-- [+] http
       |-- [+] interceptors
       |-- [+] layout
       |-- [+] mocks
       |-- [+] services
       |-- [+] strategies
       |-- core.module.ts
       |-- router.animations.ts
       |-- template-core.module.ts
       |-- theme.module.ts
       |-- ensureModuleLoadedOnceGuard.ts
       |-- logger.service.ts    
     |
     |     
     |-- modules
       |-- client
           |-- [+] components
           |-- client-routing.module.ts
           |-- client.module.ts
       |--- [+] other modules

     |
     |-- shared
          |-- [+] components
          |-- [+] directives
          |-- [+] pipes
          |-- [+] models
          |-- [+] module
      |
      |-- app-routing.module.ts
      |-- app.module.ts
      |-- etc ...
      |
|-- assets
     |-- images
     |-- icons
     |-- css
          |-- styles.scss

To demonstrate this folder structure, I've created a high-level Angular demo project on GitHub called "angular6-realworld-highly-scalable-application" for future reference.

Explore the project on Github here: https://github.com/rajaramtt/angular6-realworld-highly-scalable-application

For more insights on creating a scalable folder structure in Angular, check out this helpful Medium article:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing React-select Props Typings: A Guide

I'm currently working on creating a component that wraps the AsyncSelect, but I've run into an issue with their props having generics, and I'm not sure how to approach this. Below you'll find my code snippet: export class PipTagSelect ...

reactjstypescriptreact-select

Slate - developing a TypeScript function to filter and retrieve an object containing the highest property value

Check out this NEW RELATED QUESTION: I need to extract the largest number from a given object set. I am struggling with finding a solution. I have tried using max but I think my skills are lacking. Here is the code I have so far: @Function() pub ...

typescriptpalantir-foundryfoundry-slate

The process of replacing numbers with icons in a slider label using Angular Material

<mat-slider [thumbLabel]="true" color="primary"> Currently, my label displays numbers on the slider but I am looking to customize it with an icon instead. (https://i.sstatic.net/nI80z.png) (https://i.sstatic.net/o9Bch.png) The im ...

angulartypescriptangular-material

Angular Injection Error: Received 1 argument instead of the expected 0

Although I have already looked for a solution to this problemhere, I am still struggling to resolve the error on my own. I recently started an Ionic project and followed this link to implement authentication using Angular. Everything seemed to be working ...

angulartypescriptionic-framework

What steps should I take to build an Angular application in a shared Vagrant folder using the "ng new" command?

Currently using angular CLI version 1.3.2 and node version 8.4.0. I am attempting to create a new angular application using "ng new" on a Vagrant instance, which means I need to skip the "npm install" step and manually run "npm install --no-bin-links" ins ...

angularnpmangular-cli

Exploring Angular: The Dynamic Declaration of object.property in ngModel

<input [(ngModel)]="Emp."+"dt.Rows[0]["columnname"]"> This scenario results in an undefined value In my current project, I am leveraging the power of a MVC CustomHtmlHelper to generate textboxes dynamically based on database schema. The textbox ...

asp.net-mvcangulartypescriptasp.net-mvc-4angular4-forms

List of enums created from strings representing enum values

Is there a way to convert enum value strings to actual enums in TypeScript? While it's possible to compare strings directly (e.g. MyEnum.FirstEnum === 'My_First_Enum' would return true), I'm interested in finding a method to return enum ...

angulartypescript

The RemoveEventListener function seems to be malfunctioning within Angular2 when implemented with TypeScript

I am currently incorporating three.js into Angular2. The code I am using is quite straightforward, as shown below. this.webGLRenderer.domElement.addEventListener('mousedown', ()=>this.onMouseDown(<MouseEvent>event), false); this.webGLR ...

javascriptangulartypescript

Encountering an undefined error when trying to remove an object from an array using Angular

I currently have an array of objects representing items. These items are fetched from a service and displayed on the cart page. When I click on the remove button, I execute the delete this.cart.items[i]; function. The item is successfully removed from the ...

angulartypescriptngfor

The color attribute for the ion-button element is not functioning properly on Android devices in

In my app, it functions correctly when running on iOS, but encounters issues when running on Android. The problem lies in the color attribute not working on buttons and other elements on Android. Removing the attribute makes them visible, but the desired s ...

androidcssangularionic-frameworksass

Is there a way to prevent matRipple effect from activating on a div when buttons within the div are clicked?

I'm working on implementing an image upload feature using angular 11. I have a drop zone div with matRipple to display a ripple effect when users drop a file. Within this div, there are buttons for rotating the image left and right. However, clicking ...

angularangular-materialstoppropagation

Having trouble installing plugins on Ionic 6. Every time I try, an error pops up. Any suggestions on how to proceed?

Failed to fetch plugin https://github.com/katzer/cordova-plugin-background-mode.git via registry. It seems like there is a connection issue or the plugin specification is incorrect. Please check your connection, as well as the plugin nam ...

node.jsangularcordovanpmionic-framework

What might be the underlying reason for Chrome displaying a net::ERR_FAILED error when attempting to make a request from a Vue frontend to a C# API using Axios?

I have a C# Backend+API that I interact with from my Vue Application using axios to make requests. In the C# code, there is an endpoint that looks like this: // GET: api/Timezone public HttpResponseMessage GetTimezoneData() { ...

c#typescriptvue.jshttpaxios

Error: No 'map' property found in 'TwitterserviceService' type

Currently, I am in the process of learning how to develop simple and basic Angular applications. As part of my learning journey, I decided to incorporate my Twitter timeline into one of my projects. To aid me in this endeavor, I referred to various online ...

angulartypescript

Does the message "The reference 'gridOptions' denotes a private component member in Angular" signify that I may not be adhering to recommended coding standards?

Utilizing ag-grid as a framework for grid development is my current approach. I have gone through a straightforward tutorial and here is the code I have so far: typography.component.html https://i.stack.imgur.com/XKjfY.png typography.component.ts i ...

htmlnode.jsangulartypescriptag-grid

Primeng color selection panel not displaying fully

I am having an issue with the primeng colorpicker. When I click on the colorpicker, the panel that comes up is cut off like this: https://i.sstatic.net/t7Z5V.png How can I make the panel pop out instead of being cut off? I tried using appendTo=body but i ...

angularprimengcolor-picker

Troubleshooting issue in Angular 6 mat-select: original array not resetting after filtering values

When filtering an array based on multiple selections from a mat-select, everything works smoothly except for one issue - if I select an option and then deselect it, the entire array disappears from the UI. However, if I select a few other options after tha ...

angularangular-material

Disabling breakpoints without bounds during TypeScript debugging in Visual Studio Code

While working on my Ubuntu machine using VS Code to debug a Nest.js TypeScript project, I am encountering issues with unbound breakpoints that are not being hit. Despite making various changes in the launch.json and tsconfig.json files, as well as trying o ...

node.jstypescriptdebuggingvisual-studio-codenestjs

Guide to displaying specific employee information by utilizing routing and parameters

My task involves presenting an array of employee details in a table format. By employing routing with a parameter, I aim to display the information of a specific employee upon selection. Upon clicking on an employee's details, the system successfully ...

angularparametersroutesangular7

Angular 9 causing issues with Bootstrap accordion functionality

I'm currently working on a project with Angular 9. I have installed Bootstrap and jQuery, and the entries in my package.json look like this: "bootstrap": "^4.4.1", "jquery": "^3.5.0", I have imported the CSS and JS files in angular.json as ...

javascriptangularbootstrap-4