Angular CLI project structure - 2

Suggested Videos
Part 5 - Angular CLI ng new options | Text | Slides
Part 6 - Angular CLI configuration file | Text | Slides
Part 7 - Angular CLI project structure - 1 | Text | Slides


This is continuation to Part 7. In Part 7 we discussed all the files and folders in angular project except the "src" folder and it's contents. In this video we will discuss the "src" folder and it's contents.

File / Folder	Purpose
src folder	As the name implies, this folder contains all our angular project source code. Components, templates, pipes, services, images, styles etc that our angular application needs are present in this folder. The rest of the files and folders that are present outside this folder, are there to support building our angular application
assets	As the name implies, the assets folder contains the assets of your application like images and anything else to be copied when you build your application
environments	This folder contains the environment files. By default we have 2 environment files. environment.ts is for for development environment. Notice production property in this file is set to false. environment.prod.ts is for production. Notice in this file production property is set to true as expected. The build system defaults to the dev environment which uses `environment.ts`, but if we do a production build environment.prod.ts will be used. The file and environment mapping is in Angular CLI configuration file (.angular-cli.json)
favicon.ico	This is the favorite icon for your application which is typically displayed in the browser address bar and next to the page name in a list of bookmarks. Angular CLI provides this favorite icon out of the box. You may replace this favicon with your own company favicon
index.html	The main HTML page that is served when someone visits your site
main.ts	The main entry point for the application. This file contains the code to bootstrap the application root module (AppModule)
polyfills.ts	This is the polyfills file. Angular is built on the latest standards of the web platform. Targeting such a wide range of browsers is challenging because not all browsers support all features of modern browsers. This can be compensated by using polyfill scripts as they implement the missing features in JavaScript. So these polyfills allow us to use an API regardless of whether it is supported by a browser or not
styles.css	This file contains the global styles of our application. Styles that are local and specific to a component are often defined with in the component itself for easier maintenance
test.ts	This file is the main entry point for unit tests and loads all the .spec and framework files
tsconfig.app.json	TypeScript compiler configuration for the Angular app
tsconfig.spec.json	TypeScript compiler configuration for the unit tests
typings.d.ts	This is the TypeScript typings file. Many JavaScript libraries, such as jQuery, Angular etc extend the JavaScript environment with features and syntax that the TypeScript compiler doesn't recognize natively. When the typeScript compiler doesn't recognize something, it throws an error. So, we use TypeScript type definition files to tell the compiler about those libraries. These TypeScript type definition files have the extension d.ts. TypeScript editors leverage these type definition files to display type information Many libraries include type definition files in their npm packages. Angular is one such library. For example, if you look inside node_modules/@angular/core/ folder in an Angular application, it already contains the type definition files. All the files that have the extenstion d.ts are the type definition files. We will discuss more about these type definition files in our upcoming videos
app.component. {ts,html,css,spec.ts}	The root component (AppComponent) TypeScript, HTML template, StyleSheet and Spec files
app.module.ts	This is the root application module (AppModule)