In my previous tutorial Creating your first Angular 8 app, we have successfully created our Angular Application using Angular-CLI, now, I know you are confuse with the generated files inside the project, you may have a question, what the heck does package.json do?, what is angular.json for? well I've created this tutorial to answer all that questions inside your head, I will point out the important files inside the Angular Project and will also stress out their usage throughout the development of the application.
Let's start by going back to the generated Angular Project, in your project, you should see a similar folder structure displayed below:
Let's discuss each one by one
e2e - or end to end testing, this is used for test automation for protractor. I will not elaborate on this part as this is not required for developing the application.
node_modules - or also known as the Thor hammer, this is were all the libraries/dependencies we installed are placed, remember not to push this on your repository!
src - this is the core of the project, all our beloved codes goes here, this is where we place our created components, services, assets etc. you also find the environments folder under src, this contains environment.ts and environment.prod.ts, these two files are being used depending on what environment the application is running, if we build our application on production, it will used the environment.prod.ts file.
index.html - the entry point of the application, the most important file in developing applications, this is the main html file that will be required when serving web applications, in the index.html, you will find the <app-root> selector, this will render the app.component that is automatically created on generating the application.
main.ts - this is the file that bootstraps the application, meaning it controls the startup of the app, we can see that the AppModule is passed on the platformBrowserDynamic().bootstrapModule(), this means it loads the AppModule on startup together with its Modules, components and providers.
polyfills.ts - we have many browsers available in the market and we know that some features have compatibility issues when we try to run our application, we encounter a feature that does not work on a specific browser, this is where polyfills comes in, this is were we import additional script files and configure our setup to be able to resolve compatibility issues especially in IE browsers.
styles.scss - this is our global scss file, all components will be affected by the stylesheets that will be placed here.
test.ts - as said inside the file, this is being required by karma.conf.js which will be explained in a while but explaining what does test.ts do is this will load all the spec files for unit testing.
.editorconfig - there are many developers in the world and each developer does not prefer the same code editor or IDE and this editors might suggest different code formats, this is where .editorconfig takes place, it helps coding style for a project to be consistent especially for huge team of developers.
.gitignore - a file used by git to ignore and prevent specific list of files to be pushed in our remote repository.
angular.json - this file is used as the configuration schema for the whole project and manipulated by the CLI - including managing of different environments, testing, proxy, third-party resources for developing our application, for more information, you can go to Nitay Neeman's blog https://nitayneeman.com/posts/understanding-the-angular-cli-workspace-file.
karma.conf.js - this is the configuration file for Karma that is used for Unit testing, this defines the dependencies we need to write unit test for our codes.
package.json - this file is always interchanged with package-lock.json, package.json states the minimum version of the library that your app requires.
package.lock.json - on the other hand package.lock.json records the exact version of each library that allows other developers to install the exact version of each packages.
README.md - all contents of this file will be displayed as the project description when it is pushed on a repository, this is commonly used for git purposes to allow developers compose instructions and describe how the project is used.
tsconfig.json - this allows the developer to define root level files with the compiler options for compiling a typescript project.
tsconfig.app.json - extended compiler options, this is applied all files under the app folder as defined in the outDir property.
tsconfig.spec.json - extended compiler options, this is applied all files under the spec folder as defined in the outDir property.
tslint.json - configuration file for typescript format, this allows developers to have clean code as a single code format and standards is defined in tslint.json file.
And that's all the generated files inside our Angular project, now we know each of the files usage, we can start creating our CRUD Angular app.