Angular Project Structure

Angular Project Structure

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.