In this video we will discuss the “src” folder and it’s contents
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)
Text version of the video
Slides
Angular CLI Tutorial
Angular CLI Text articles & Slides
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic
