ANGULAR: The anatomy of the angular filesystem

Angular's Command Line Interface (CLI) provides you with simple commands to make development easier. One of those is: ng new (args) This command takes the name of your project as an argument and then puts together a whole filesystem of boilerplate for your application.

Let's take a look at the each of the files based on their location to get an understanding of how the filesystem works:

Location: Root Folder

karma.conf.js

• This is a configuration file for the test runner.

tsconfig.json, tsconfig.app.json, tsconfig.spec.json

• These files instruct the typescript compiler how it should compile the typescript code into javascript.
• There are a few different files because they run in slightly different environments and therefore need specific configs.
• You probably don't need to alter these files.

README

• A place to document an overview of your application so that people using it can understand its function.

package.json

• This is where you can register your projects dependencies via npm
• You can create scripts to abbreviate command line entries

angular.json

• controls the behaviour of the ANGULAR CLI

.gitignore

• files that your git version control system is instructed to ignore

node_modules

• All of the code for the dependencies that have been installed via npm.
• There's no reason to modify anything here since it will be overridden any time you reinstall something.

dist

• Where your compiled code lives after you run the ng build command.
• This is the code that will eventually be deployed to a server or hosting account.
• All the files the end user needs to view your application in a browser.
• Never need to modify it directly. It will be overridden anyway any time an ng build or ng serve command is run.

Location: root > src

• This is where most of your development will take place. Contains the source code for your application

main.ts

• The application starts here! It's kind of like a starting point for angular to run the app

test.ts

• This file is needed by your karma.conf.js to set up your testing environment

index.html

• This file is the page where your application is rendered. The <app-root></app-root> element is rendered here.
• You can link css files from this page such as google fonts.
• You can manage meta tags for social media bots.

styles.scss/style.css

• This is where you can include css that will apply to your entire application

Location: root > src > environment

environment.ts, environment.prod.ts

• Here you can manage variables that might differ depending on if your developing or your app is in production.
• Might include variables like API keys.

Location: root > src > assets

• Includes images or other asset files that will be copied to your dist folder when you build your application.

Location: root > src > app

• This folder contains all the code you will write for your application.
• This is where the Angular CLI will generate components, directives and services

app.component.scss/css

• This stylesheet is css that is scoped to the component you have generated.
• Handy because you can write styles that don't conflict with other stylesheets.

app.component.html

• Template code that is used by the app.component.ts file.
• Describes the HTML structure of your component.
• Magic happens here because you can use directives, interpolate data and many other things.
• Not necessary for simple files if you want to write the template code in-line with the app.component.ts file

app.component.ts

• In this file you will build your component to define the structure and functionality of part of your applications view

app.module.ts

• In this file you will bring together all your components and other files that make up a particular feature into an organized package.

app.routing.module.ts

• This file serves as a place where you can specify which component should be shown or which module should be loaded when the user navigates to a URL path either directly or by means of actions like clicking a button etc.