Angular project structure

Author: Dawid Adach

-

This is how our project tree looks like:

MDB Download

Let's have a look at it step by step:

  1. /e2e/ directory:
  2. ├── e2e
          │   ├── app.e2e-spec.ts
          │   ├── app.po.ts
          │   └── tsconfig.e2e.json
          

    e2e stand for end-to-end and it refers to e2e tests of the website. It contains testing scenarios (scripts) which simulate user behavior. We can simulate user which visit a website, signing in, navigate to another site, fill the form and log out.

  3. /node_modules/
  4. All 3rd party libraries are getting installed into that folder when you run npm install. Those libraries are getting bundled to our application. What is important to know is that you shouldn't include this folder when deploying your application to production or committing to the git repository. When you move your project to a new location you should skip this folder and run npm install in a new location.

  5. /src/
  6. ├── src
    │   ├── app
    │   ├── environments
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── main.ts
    │   ├── polyfills.ts
    │   ├── styles.scss
    │   ├── test.ts
    │   ├── tsconfig.app.json
    │   ├── tsconfig.spec.json
    │   └── typings.d.ts
          

    This is where we will keep our application source code.

    • /app/
    • │   ├── app
      │   │   ├── app.component.css
      │   │   ├── app.component.html
      │   │   ├── app.component.spec.ts
      │   │   ├── app.component.ts
      │   │   ├── app.module.ts
      │   │   └── typescripts
            

      This folder contains our modules and components. Remember: Each Angular application must have at least 1 module and 1 components.

    • /asset/
    • This folder contains static assets for our app like images, icons, styles.

    • /environments/
    • This folder contains 2 files, each for different environments. You will use this file to store environment specific configuration like database credentials or server addresses. By default there are 2 files, one for production and on for development.

    • favicon.ico
    • The favicon of our app.

    • index.html
    • This is is very simple HTML file. If you open it you will note that there are no references to any stylesheet (CSS) nor JS files. This is because all dependencies are injected during the build process.

    • main.ts
    • This is a starting point for our app. If you ever coded in languages like Java or C you can compare it to a main() method. If you didn't just remember that our application starts to execute from this place. This is where we are bootstrapping our first and only module - AppModule.

    • polyfils.ts
    • Polyfils files are used for the compiler to compile our Typescript to specific JavaScript methods which can be parsed by different browsers.

    • styles.css
    • Global stylesheet file by default, included to our project. Keep in mind that each component has it's own style component which applies styles only within a scope of given component.

    • test.ts
    • This is a configuration file for Karma. Karma is a testing tool shipped along with Angular, we will cover it one of the next lessons.

  7. .angular-cli.json
  8. This is an important file. It contains configuration for CLI which defined i.e. which 3rd party script or styles should be included, which files should be served as static assets, where compiled code should be placed and many more. We will cover it in next lessons.

  9. .gitignore
  10. This file instructs git which files should be ignored when working with git repository.

  11. karma.conf.js
  12. Another configuration file for Karma. We will cover that in the future.

  13. package.json
  14. This files is mandatory for every npm project. It contains basic information regarding our project (name, description, license etc.) commands which can be used, dependencies - those are packages required by our application to work correctly, and devDepndencies - again list of packages which are required for our application however only during the development phase. I.e. we need Angular CLI only during development to build a final package however on production we don't use it anymore.

  15. protractor.config.js
  16. asdf

  17. README.md
  18. File containing a description of our project. All information which we would like provides our users before they start using our app.

  19. tsconfig.json
  20. Bunch of setting for the compiler. Based on this setting it will compile code to JS code which browser can understand.

  21. tslint.json
  22. TSlint is a useful static analysis tool that checks our TypeScript code for readability, maintainability, and functionality errors. Following file contains its configuration. We will see how it works in a future lesson.


Next lesson

Spread the word:
Do you need help?: Use our support forum

About author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...