Angular 6 Application: Folder structure explained

Angular 6 Folder structure

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

Sounds awesome, right? well, yes, if you know what you’re getting. 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 6 project using Angular CLI 6. Then I’ll go through the folder structure and explain the purpose of each folder/file. So, let’s get started.

First of all, I’ll create a new Angular 6 project using the Angular CLI. Make sure you’ve the latest version of Angular CLI installed on your machine before you proceed. I am using Angular CLI 6 (version 6.1.2)
ng new angular-test --routing --style scss
Here, we’ve created a simple Angular 6 boilerplate application which has routing enabled and we’re using .scss instead of .css for our style files.
the folder structure at this point looks something like this –
├── angular.json
├── e2e
│   ├── protractor.conf.js
│   ├── src
│   │   ├── app.e2e-spec.ts
│   │   └── app.po.ts
│   └── tsconfig.e2e.json
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── app
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── app-routing.module.ts
│   ├── assets
│   ├── browserslist
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── karma.conf.js
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.scss
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── tslint.json
├── tsconfig.json
└── tslint.json

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 with Angular CLI 6, .angular-cli.json has been replaced with angular.json file. This is done to provide the ability to efficiently share common code between multiple applications/libraries, which was not possible with .angular.cli file. angular.json is basically a workspace configuration file as compared to .angular-cli which did not have any such support. Starting version 6, each CLI workspace has projects, each project has targets, and each target can have configurations.

e2e/ : This folder contains your End-to-End tests for this application. e2e/protractor.conf.js contains protractor configuration – used to run the e2e tests, e2e/src containt the actual test cases and e2e/tsconfig.json contains typescript compilation configuration which extends the configuration specified in tsconfig.json (at the root).

package.json: 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: This file basically locks downs the details of npm dependencies you’ve installed. it stores the exact version numbers of npm packages you’re installing so you won’t have any surprises when you install the dependencies afterward (maybe in a different environment)

src/app/ : This is where you keep all your code. Your modules, components, services, directives – all will be inside this folder.

src/assets/: You can keep any assets, such as fonts, images, documents, external js/css libraries in this folder

src/environments/ : This folder contains environment specific configuration for your application. If there’s 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/karma.conf.js : Contains the karma configurations used for executing your unit tests.

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/polyfills.ts : polyfills.ts file contains any extra libraries that are needed to load before your angular application is loaded. This includes any browser polyfills and application polyfills.

src/styles.scss : Contains global styles for your angular application.

src/test.ts: Prepares the unit tests for execution. This file is required by karma.conf.js and loads recursively all the .spec and framework files.

tsconfig.json : Contains the configuration used by 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 which extend the tsconfig.json file at the root and can override the default cofigurations or add extra configurations as needed.

tslint.json: Contains the linting configurations used by tslint to lint your code.

Hope this adds to what you already know about Angular. Please leave a comment if I missed anything.

Subscribe to our Newsletter to get more such cool articles straight into your Mailbox,

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.