Angular Application: Folder structure explained

Angular-Folder-Structure-Explained

If you’re here, then you probably are new to Angular or just want to refresh your knowledge about the Angular Folder Structure. This post explains the Angular application folder structure created by using Angular CLI. This is valid for Angular 6, Angular 7, Angular 8 and Angular 9 as well.

Creating a new Angular application is a pretty straightforward process with Angular CLI under your belt. With just one command you can have a fully functional Angular boilerplate application ready for you to start writing your business logic. The application created using Angular CLI comes with Units tests setup (with Karma and Jasmine), E2E tests setup (with Protractor), a highly optimized build process (with Webpack) and a bunch of other features and toolsets all under the hood.

Sounds awesome, right? Well, yes, if you know what you’re doing. If you’re relatively new to the framework or to Typescript/JavaScript environment, all this can be a little overwhelming. In this post, I’m going to create a new Angular project using Angular CLI. Then I’ll go through the folder structure and explain the purpose of each folder/file. So, let’s get started.

If you’re new to Angular, you might be interested in understanding the Angular Project Structure. If you’re just interested in Angular overall, take a look at our other Angular Related Articles.

First of all, I’ll create a new Angular project using the Angular CLI. Make sure you have the latest version of Angular CLI installed on your machine before you proceed. I am using Angular CLI 9 (version 9.1.1)  

ng new angular-test --routing --style scss

 Here, we’ve created a simple Angular boilerplate application that has routing enabled and we’re using .scss extension instead of .css for our style files. The command I’ve used for creating the application is the most basic one. Angular CLI offers a bunch of different options that you can specify while creating a new application. You can find all the possible options in the Official Angular Documentation. Our folder structure at this point should look something like this –  

    ng-test
    ├─── .editorconfig
    ├─── .gitignore
    ├─── angular.json
    ├─── browserslist
    ├─── karma.conf.js
    ├─── package-lock.json
    ├─── package.json
    ├─── README.md
    ├─── tsconfig.app.json
    ├─── tsconfig.json
    ├─── tsconfig.spec.json
    ├─── tslint.json
    |
    ├───e2e
    │   ├─── protractor.conf.js
    │   ├─── tsconfig.json
    |   |
    │   └───src
    │       ├─── app.e2e-spec.ts
    │       └─── app.po.ts
    │
    ├───node_modules
    |
    └───src
        ├─── favicon.ico
        ├─── index.html
        ├─── main.ts
        ├─── polyfills.ts
        ├─── styles.scss
        ├─── test.ts
        │
        ├───app
        │   ├─── app-routing.module.ts
        │   ├─── app.component.html
        │   ├─── app.component.scss
        │   ├─── app.component.spec.ts
        │   ├─── app.component.ts
        │   └─── app.module.ts
        │
        ├───assets
        │   └─── .gitkeep
        │
        └───environments
            ├─── environment.prod.ts
            └─── environment.ts

Now that we have our brand new Angular app ready, let’s go through it and see what we understand.

angular.json : If you’ve used angular 2.x, 4.x or 5.x, you might’ve already noticed that there’s no .angular-cli.json configuration file in this folder structure. That’s because starting Angular CLI 6, .angular-cli.json has been replaced with angular.json file. As you probably already know, an Angular project is essentially a workspace and you can create multiple projects and libraries within a single Angular application setup. This file is basically THE workspace configuration file where all your Angular projects are defined. Each CLI workspace has projects, each project has targets, and each target can have configurations. You can read more about Angular Workspace configuration in the Official Documentation.

package.json: This file is a standard Node.js application configuration file. Since Angular uses Node.js, this file contains details about your application such as name, version, author, etc, all your npm dependencies, npm commands and other configurations.

package-lock.json or yarn.lock: Depending on which Package Manager you’re using – NPM or Yarn, you should see either package-lock.json or yarn.lock file. These files basically lock down the details of dependencies you’ve installed. It stores the exact version numbers of the packages you’re installing so you won’t have any surprises when you install the dependencies afterward (maybe in a different environment).

browserlist: This file is used by the Angular build system to adjust CSS and JS output to support the specified browsers below. You can use this file to tell the Angular build system which browsers you want your application to support and the build system will adjust the code level accordingly.

tsconfig.json : As you know, Angular uses TypeScript. Code written in TypeScript has to be transpiled back to JavaScript before it can be executed by the Browsers. The Transpilation of Typescript code into JavaScript code is done by the Typescript Compiler (tsc), This file contains the configuration used by the TypeScript compiler to transpile TypeScript code to JavaScript. There are 3 more tsconfig files (src/tsconfig.app.json, src/tsconfig.spec.json, e2e/tsconfig.e2e.json) in your angular application that extend this file and may override the default configurations or add extra configurations as needed.

tslint.json: TSLint is a static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. This file contains the linting configurations used by TSLint to check quality of your code against some pre-defined rules.

src/main.ts : This is where your application starts booting. This file basically invokes the AppModule – the root module, which in turn will bootstrap other resources needed to load your application.

src/styles.scss : This file contains global styles for your angular application. All the components with your Angular application will have their own style file. So, this file should really be used for setting global styles.

src/polyfills.ts : This file contains any extra libraries that need to be loaded before your angular application is loaded. This may include any browser polyfills and application polyfills that are needed by your application.

src/environments/ : If you want to run your application if different environments, you may need to add some environment-specific configurations. This folder contains environment-specific configurations for your application. If there are any configurations that vary for each environment, for example, the API URLs, the API port, etc, should be kept in these files. Angular CLI will use one of these environment files while creating a build.

src/app/: This is where you keep all your code. At the moment this contains app.module.ts – The main module of your application, app.component files – a dummy component created by CLI, and the app-routing.module.ts file- the Routing module configuration since we created the application with --routing flag. As you develop your application further, all your modules, components, services, directives, etc. will be inside this folder.

src/test.ts: Similar to src/main.ts, this file initiates the bootstrap of your application for the unit test execution. This file is required by karma.conf.js and loads recursively all the .spec and framework files.

src/karma.conf.js : As I mentioned earlier, Angular uses Karma for running Unit Tests. This file contains the Karma configurations used for executing your unit tests. The Unit Test setup is pre-configured when you create a new application with Angular CLI. However, you can always update this configuration to your likings.

e2e/: This folder contains your End-to-End tests for this application.

  • e2e/protractor.conf.js: contains Protractor configuration (The framework used by Angular for E2E Testing) – used to run the e2e tests, e2e/src contains the actual test cases and
  • e2e/tsconfig.json: contains typescript compilation configuration which extends the configuration specified in tsconfig.json(at the root).

src/assets/: Do you have any static assets like images, icons, documents or external js/css libraries? You can keep all these in this folder. Technically, you don’t have to keep them all in this directory, you can keep your assets anywhere within your project source directory. But this directory is already added to the list of assets in your angular.json file. If your assets are anywhere other than this directory, you’ll have to add the path to your assets in the list of assets in angular.json file.

So, that is it, guys! I hope this helps you understand the Angular folder structure a little better. Let me know if you would want to know in-depth about anything particularly. You can use the comments section below. I hope this adds to what you already know about Angular.

If you found any of these helpful, do let me know in the comments below and please share it with your friends and colleagues who might find it helpful.

Be sure to follow us on the social media to get notified about the latest posts as soon as they’re published

Leave a comment

Your email address will not be published. Required fields are marked *