Angular Project Structure • node_modules • All 3rd party libraries are installed into this folder when you run npm install. • Those libraries are bundled into our application. • You shouldn't include this folder when deploying your application to production or committing to the git repository. • If you move your project to a new location you should skip this folder and run npm install in a new location. Angular Project Structure • .browserslistrc • This file is used by the build system to adjust CSS and JS output to support the specified browsers below in the file. • .editorconfig • Configuration for code editors • .gitignore • Specifies intentionally untracked files that Git should ignore. Angular Project Structure • angular.json • CLI configuration defaults for all projects in the workspace, including configuration options for build, serve, and test tools that the CLI uses Angular Project Structure • karma.conf.js • Karma is a console tool for running tests, which can track source code changes and display the percentage of code tests coverage. • It uses the configuration file karma.conf.js, where the paths to tested files and to the files with tests should be specified. Angular Project Structure • package.json: • Records the minimum version you app needs. If you update the versions of a particular package, the change is not going to be reflected here. • It also includes project properties, description, author & license information, scripts, etc. Angular Project Structure • package-lock.json: • Records the exact version of each installed package which allows you to re-install them. • Future installs will be able to build an identical dependency tree. Angular Project Structure • README.md: • Introductory documentation for the root application • tsconfig.app.json: • The base TypeScript configuration for projects in the workspace. • All other configuration files inherit from this base file. Angular Project Structure • tsconfig.json: • The base TypeScript configuration for projects in the workspace. • All other configuration files inherit from this base file. Angular Project Structure • tsconfig.app.json • Application specific TypeScript configuration information details, including TypeScript and Angular template compiler options. Angular Project Structure • tsconfig.app.json • Application specific TypeScript configuration information details, including TypeScript and Angular template compiler options. • tsconfig.spec.json • TypeScript configuration for the application tests. Angular Project Structure • src • ng new creates an initial skeleton application at the root level of the workspace, along with its end-to-end tests. • The skeleton is for a simple Welcome application that is ready to run and easy to modify. • The root-level application has the same name as the workspace. • The source files reside in the src/ subfolder of the workspace. Angular Project Structure • src/app/ • This folder contains the where the application logic and data are defined. • This folder contains our modules and components. • Each Angular application must have at least one module and one component. Angular Project Structure • app/app.component.html • Defines the HTML template associated with the root AppComponent. • app/app.component.css • Defines the base CSS stylesheet for the root AppComponent. Angular Project Structure • app/app.component.ts • Defines the logic for the application's root component, named AppComponent. • app/app.component.spec .ts • Defines a unit test for the root AppComponent Angular Project Structure • app/app.module.ts • Defines the root module, named AppModule. • It tells Angular how to assemble the application. • Initially declares only the AppComponent. • As you add more components to the app, they must be declared here. Angular Project Structure • app/app- routing.module.ts • Contains the routes information. • Each route is a path and its associated component. Angular Project Structure • app/assets • Contains image and other asset files to be copied as-is when you build your application. Angular Project Structure • app/environments • Contains build configuration options for particular target environments. • By default there is an unnamed standard development environment and a production ("prod") environment. • You can define additional target environment configurations. Angular Project Structure • app/favicon.ico • An icon to use for this application in the bookmark bar. • app/styles.css • Lists CSS files that supply styles for a project. • The extension reflects the style preprocessor you have configured for the project. Angular Project Structure • app/polyfills.ts • Provides polyfill scripts for browser support. • A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it. Angular Project Structure • app/main.ts • The main entry point for your application. • Compiles the application with the JIT compiler and bootstraps the application's root module (AppModule) to run in the browser. Angular Project Structure • app/index.html • The main HTML page that is served when someone visits your site. • The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don't need to add any <script> or <link> tags here manually.