Whenever we create a new Angular project using Angular CLI, it generates a bunch of files and folders inside the project directory and each file and folder has its own purpose. So let’s see the use of some important files and folders of the Angular project which we should know about:
This is the Angular folder structure where all the third-party libraries get stored which our application might depend on and this folder is purely for development purposes, we don’t deploy this folder in the production server. So basically it contains all the dependencies.
While deploying our application in production, we exclude the node_modules folder from the deployment package as this folder is only required for development purposes.
After that, there is a src folder, this is the folder where we need to put all our application’s source code, so all the code related to our Angular application will go inside the src folder.
Inside the src folder, we have an app folder, and the app folder has a component as well as a module, as we already know that every Angular app must have at least one component and module. So basically, whenever we create any component, module or service that we create inside the app folder.
Below the app folder, we have an assets folder, in this folder, we store the static assets of our application, like images, icons, text files etc.
After that, there is an environments folder, this folder is basically used to set up different environments, in this folder we have two files, one is for the production environment and another for the development environment, so inside these files, we write environment-related configurations. We can use these files to store environment-related configurations such as database credentials of the server etc.
After that, we have the favicon.ico file, which is the icon file that displays on the browser
After that, there is an index.html file, this index.html file is the main HTML file, which gets rendered in the browser when the Angular app runs. Here we don’t have any references to the stylesheet or JavaScript files, this is because all these dependencies will be injected into this file during the build process by Angular CLI.
Related read: Top 15 JavaScript Frameworks To Use In 2023
Then we have the main.ts file, which is a TypeScript file and this file is basically the starting point of an Angular application, so in a lot of programming languages we have this concept of main() which is the starting point of a program and we have the same concept in Angular as well. So whenever the Angular application runs, the first file that will be executed is the main.ts file because this file is the entry point of the Angular application.
In this file, all we are doing is, we are bootstrapping the main module to the project and the main module is the app.module, so we are bootstrapping the app module to our project. So when we run the Angular application, Angular will load this module and everything else will start from there.
Then, we have the polyfills file which basically imports some scripts that are required for running Angular. This is required because the Angular framework uses features of JS that are not available in the current version of JS supported by most browsers available out there. So these polyfills fill the gap between the features of JS that Angular needs and the features supported by the current browser.
Then we have the style.css file, this is where we add global CSS style for our Angular application.
Then we have a test.ts file, this file is used for setting our testing environment.
Then, there is the .editorconfig file, this file is basically used to set up the team environment, so in a real-world project, many developers can work on a single project and each developer may follow different coding standards to declare variables, classes etc but at the end we need to merge the code of each developer in order to achieve the final product, at that time it may throw some error as each developer has their own coding standards.
Related read: How To Be A Great App Developer?
In order to solve this problem, the edit-config file is used where the standard rules are defined which need to be followed by the developer in teamwork. So, in this file, some standard rules are defined & these rules need to be followed by each developer in the team. Therefore, we define a set of instructions in this file that every developer needs to follow while coding in the application.
Then we have a .gitignore file, in this file, we can specify the files & folders which we want to exclude from our git repository.
Then we have an Angular.json file, this is one of the most important files & it contains all the configuration of our Angular project. So it contains configurations like what is the project name, what is the root folder name, what is the source folder name and other configurations.
Then we have the karma.config.js file, which is the configuration file for karma which is the test runner for JS.
Then we have a package. JSON file, which is a very important file, is a standard configuration file that every node project has. In this file, we can have all the configurations followed by dependencies & dev dependencies, inside dependencies, we can see the list of dependencies on which our project is dependent. In the same way, there is something called dev-dependencies, here all those dependencies are listed which we need for the development purpose.
The dependencies that is listed inside devDependencies, we don’t need them in production, we only need them for development purpose but for the dependencies that are listed inside the dependencies section, we need them for developing our application.
After that, we have a tsconfig.json file, this file contains a bunch of settings for our TypeScript compiler. The TypeScript compiler looks at the settings & based on these settings, it is going to compile our TypeScript code into JavaScript that the browser can understand.
Related read: Implementing Different Types of Charts in Angular
In conclusion, understanding the files and folder structure of an Angular application is essential for any developer working with this framework. Each file and folder serves a specific purpose in the development and deployment process.
By grasping the purpose and significance of each file and folder, developers can navigate and manage their projects effectively, ensuring the smooth development and deployment of Angular applications.
The proper knowledge and utilization of the files and folder structure in Angular will empower developers to build robust, maintainable, and efficient applications with ease. Happy Angular coding!
Structure an Angular project by using Angular CLI, organizing code into modules/components, separating services, defining routes in feature modules, and centralizing global styles/assets while ensuring code quality and documentation.
The node_modules folder in Angular contains external libraries and dependencies required for the project.
To create a folder structure in Angular, use Angular CLI for project generation and follow a modular organization, grouping components, services, and modules by feature.
Leave your competitors behind! Become an EPIC integration pro, and boost your team's efficiency.
Register Here
The Mindbowser team's professionalism consistently impressed me. Their commitment to quality shone through in every aspect of the project. They truly went the extra mile, ensuring they understood our needs perfectly and were always willing to invest the time to...
CTO, New Day Therapeutics
I collaborated with Mindbowser for several years on a complex SaaS platform project. They took over a partially completed project and successfully transformed it into a fully functional and robust platform. Throughout the entire process, the quality of their work...
President, E.B. Carlson
Mindbowser and team are professional, talented and very responsive. They got us through a challenging situation with our IOT product successfully. They will be our go to dev team going forward.
Founder, Cascada
Amazing team to work with. Very responsive and very skilled in both front and backend engineering. Looking forward to our next project together.
Co-Founder, Emerge
The team is great to work with. Very professional, on task, and efficient.
Founder, PeriopMD
I can not express enough how pleased we are with the whole team. From the first call and meeting, they took our vision and ran with it. Communication was easy and everyone was flexible to our schedule. I’m excited to...
Founder, Seeke
Mindbowser has truly been foundational in my journey from concept to design and onto that final launch phase.
CEO, KickSnap
We had very close go live timeline and Mindbowser team got us live a month before.
CEO, BuyNow WorldWide
If you want a team of great developers, I recommend them for the next project.
Founder, Teach Reach
Mindbowser built both iOS and Android apps for Mindworks, that have stood the test of time. 5 years later they still function quite beautifully. Their team always met their objectives and I'm very happy with the end result. Thank you!
Founder, Mindworks
Mindbowser has delivered a much better quality product than our previous tech vendors. Our product is stable and passed Well Architected Framework Review from AWS.
CEO, PurpleAnt
I am happy to share that we got USD 10k in cloud credits courtesy of our friends at Mindbowser. Thank you Pravin and Ayush, this means a lot to us.
CTO, Shortlist
Mindbowser is one of the reasons that our app is successful. These guys have been a great team.
Founder & CEO, MangoMirror
Kudos for all your hard work and diligence on the Telehealth platform project. You made it possible.
CEO, ThriveHealth
Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.
CEO, SMILINGMIND
They were a very responsive team! Extremely easy to communicate and work with!
Founder & CEO, TotTech
We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.
Co-Founder, TEAM8s
Mindbowser was very helpful with explaining the development process and started quickly on the project.
Executive Director of Product Development, Innovation Lab
The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.
Co-Founder, Vesica
Mindbowser is professional, efficient and thorough.
Consultant, XPRIZE
Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.
Founder, S.T.A.R.S of Wellness
Mindbowser was great; they listened to us a lot and helped us hone in on the actual idea of the app. They had put together fantastic wireframes for us.
Co-Founder, Flat Earth
Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.
Founder, Child Life On Call
The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!
CEO, SDOH2Health LLC
Mindbowser was easy to work with and hit the ground running, immediately feeling like part of our team.
CEO, Stealth Startup
Mindbowser was an excellent partner in developing my fitness app. They were patient, attentive, & understood my business needs. The end product exceeded my expectations. Thrilled to share it globally.
Owner, Phalanx
Mindbowser's expertise in tech, process & mobile development made them our choice for our app. The team was dedicated to the process & delivered high-quality features on time. They also gave valuable industry advice. Highly recommend them for app development...
Co-Founder, Fox&Fork
