Angular Folder Structure with Detail Explanation and how to start Angular Application

e2e:  It comprises of end to end configuration for application that defines functionality and behavior from development to production.

End-to-end testing is referred to as e2e. This is used to evaluate user behavior after your application is installed on a production server, not to test the logic of your program (it is not for unit testing). 

This implies that it will keep track of who views your application, which people log in to it, how long they stay there, how many pages they visit while using it, when they log out, etc.

Node_Modules: It contains the repository  of all packages that ar installed for our application.

angular.json file:

This is one of the most important files and it contains all the configuration of your Angular Project. It contains the configurations such as what is the project name, what is the root directory as source folder (src) name which contains all the components, services, directives, pipes, what is the starting point of your angular application (index.html file), What is the starting point of typescript file (main.ts), etc

src: It comprises of application resources and configuration.

That means this is the place where we need to put all our application source code. So, every component, service class, modules, everything we need to put in this folder only. Whenever we create an angular project, by default the angular framework creates lots of files folder within the src folder 

.editor config: It defines configuration for current editor(vs code, vs, native for editor)

.git ignore: it specifies the configuration for connecting with git into repository.

angular.json: It contains the configuration for our application with includes global styles  and script resources etc.

                                                   
     "schematics": {                                          |writting
        "@schematics/angular:component": {<-------------------
          "inlineStyle": true,            ----------------> ng generate component demo
          "skipTests": true                 reading         [democomponent with 2 files
        },                                                              without css and spec.ts]
         ...                                                                    @Component({
        "prefix":"app"---------------------------------------> selector:'app-demo',..})
         ...
      "build":{
             ...
        "options":{
            "outputPath": "dist/app1",  -->specify location to place build files
            "index": "src/index.html",  -->specify webpage to link angular app js files
            "main": "src/main.ts",      -->specify main startup filename
            "polyfills": "src/polyfills.ts",-->specify polyfill filename
            "tsConfig": "tsconfig.app.json",
            "assets": [                    -->specify project assets location,default is
              "src/favicon.ico",              assets 
              "src/assets"                    [project assets-->images,videos,pdfs,..]
            ],
            "styles": [                    -->specify global css files path,default comes
              "src/styles.css"                with styles.css,this css will be applied to
            ],                                all the components through out the project

package.json: it comprises of configuration for packages that are required for your application.

This will describe angular project with name, description, version, node packages info and scripts
  

scripts allows running cli commands using "npm" tool, this can be used to customize cli commands

Example

Make the below changes in the package.json

Now, once you click on npm start it will run with the port Number 6000

 2.package-lock.json
         this will contain angular project node packages dependent
         packages info

 3.readme.md
         this file will contain project documentation

tsconfig.json: It comprises of typescript configuration that specifies the target ES Script, current typescript version , etc

tslint.json : It  defines the rules of typescript language.

index.html: It is the application start up page.

This HTML file contains HTML code with the head and body section. It is the starting point of your application or you can say that this is where our angular app bootstraps. If you open it you will find that there are no references to any stylesheet (CSS) nor JS files this is because all dependencies are injected during the build process.

favicon.ico: it is the shortcut icon for pages.

main.ts: It contains the configuration for libraries that are landed on application start up.

This is the entry point for our angular application. If you ever worked with programming languages like Java or C or C#, then you can compare this with the main() method of such application.

environment: it comprises of code that is used to test the environment from development to production.

BrowserList: It configures the list of supported Browsers.

assets: It comprises of non dynamic files used by your application that is Images/pdf/txt.etc

karmaconfig.js: It configures the testing framework for your application which is karma-jasmine.

browserslist:

 This will contain list of browsers which can run angular app

app Folder

Whenever you want to create any component, service, or module, you need to create it within this app folder. As you can see, by default it creates one component (app.component.ts) and one module (app.module.ts) and an angular application should have at least one component and one module.

.gitignore file
    This will contain filenames and folder names of a project to be 
        ignored | skipped, while pushing project to git hub.

Example

    development system
          |                                                                              github[internet]
       project1  --------------->  git push------------->                 repository
          package.json                 [it will read                               package.json 
           ..                                  gitignore file,              ...
          node_modules folder      node_modules folder                            |
                node packages        will not be pushed]     another developer will pull[download]
                                                                                     project into local system
          gitignore                                                                                 |
              /node_modules                                                             project1
                                                                                            package.json
                                                                                                   ...
                                                                                         project1>npm install
                                                                                                >ng s -o

appModule.ts 

It is the start up Module in application that comprises of metadata , which specifies the information about the components, modules and services used in the application.

The metadata is defined by using 

@NgModule --> Directive which comprises of following details

declarations: it declares the component to be used in application

Imports: It declares the modules to be used in the application

Providers: It declares the services to be used in the application.

bootstrap: It defines the start up component.

Note: 

Bootstrapping is the process of converting static DOM into dynamic DOM.

Syntax:

@NgModule ( {

declarations: [],

imports: [],

providers: [],

bootstrap: []

});

To Start Angular Application

ng s --open

Note:

serve option
-------------
This will build and host | run angular application with "Angular Live Development Server" with the port 4200

This will generate temporary production build files[vendor.js,main.js,..],once server is stopped all the build files will be erased, cntrl+c will stop server
   >ng serve
      ..
    cntrl c  [it will stop angular live development server and build files will be erased]

Syntax

 ng serve[s]  <options>

  1.ng serve--this will run angular app

  2.ng serve --open --this will run angular app and browser will be opened       automatically to show the output

  app1>ng serve --open

 3 ng serve --port <number>
         this will run angular app with the specified port number

    Example:
      app1>ng serve --port 5000

      goto browser
        http://localhost:5000
          ... 

          >ng serve  --port 0
             ..

      goto browser
         http://localhost:64755
              ...
*--port 0 will pick port number randomly not in use

    >ng serve --port 0 --open