11 May 2018 Sudhanshu Ranjan 542
Angular : Understanding about all files and folders created by Angular CLI
Welcome back guys, since long time I have come so today post I will share the knowledge about angular files and folder structure which is created default by angular CLI.
In the earlier post, How to setup angular 2 environment and build a project we have learnt how to create an Angular app using angular CLI. Now, lets take a moment to understand the files and folder structure that was created by Angular CLI.
By the way, there is no need to know about all configuration files & folder in deep but I will tell you about all and which is more important.
Lets look the image with angular folder and files structure.
e2e stands for end to end testing. This folder contains spec and configuration files related to end to end testing using protractor.
It contains all the angular depedency files.basically it read’s the “package.json” file in the current directory and installs all the package’s dependencies into this folder using Node Js.
It is main and most important folder of angular application where your all angular component, template, images, stylesheet, spec, services etc. files contains.
app/app.component.css : Define the css stylesheet for this component
app/app.component.html : Define the HTML Template
app/app.component.spec.ts : Define the unit test cases
app/app.component.ts : It is root component and you can associate many nested component as application required.
app/app.module.ts : Defines AppModule, the root module that tells Angular how to assemble the application. Right now it declares only the AppComponent. Soon there will be more components to declare. All component or Module would be associated with AppModule.
assets/* : It contains the images or any files in this folder.
environments : The environment folder consists of two environment files one for development and other for production. The list of which environment maps to which file can be found in angular-cli.json file.
browserslist : A configuration file to share target browsers between different front-end tools.
favicon.ico : It contains the website fevicon image
index.html : It is Main HTML page of your application. This Html file contains all the css, js file and required refrences of your website. Only one Html file is here that's why it called single page application.
karma.conf.js : It is used for Unit test configuration for the Karma test runner, used when running ng test command.
main.ts : It is main entry point of your application and compiles and bootstraped the application rootModules.
polyfills.ts : All browsers have diffrent level support of the web standards. Polyfills.ts helps to normalize those differences.
styles.css : you can put css stylesheet here which will work globally.
test.ts : This is main entry point for your unit test.
tsconfig.app.json : It contains TypeScript compiler configuration for the Angular app.
tsconfig.spec.json : It contains TypeScript compiler configuration for the Angular unit test.
tslint.json : Linting helps keep your code style consistent.
EditorConfig file is used to define and maintain consistent coding styles.
Contains the git configuration
Configuration for Angular CLI.
Contains all your appliction dependencies in two sets, dependencies and devDependencies.
Basic documentation for your project
I hope you have enjoyed this article and found it useful.Please add your comments and valuable feedback. Please share with your friends!
Sudhanshu Kumar Ranjan | Lead Engineer at HCL Technologies | Expertise in Microsoft Technology | Author | Blogger | Programmer
Connect with him on Facebook | Google+ | LinkedIn | Twitter
- Autocomplete textbox with multi value selected in MVC using JQuery
- How to delete the duplicate record from table in sql server
- Bind dropdown in MVC using jquery with C#
- Redirect URL non-www to www using web.config in MVC ASP.Net
- secure connection failed firefox fix
- Microsft online test question for Dotnet -1
- What is static Constructor? Explain.
- NULLIF Function in SQL Server with example
- Extension Method In C# | MVC | Asp.net
Leave a comment
Search In This Website
- TypeError: $(...).autocomplete is not a function
- Paging in MVC using C# with razor
- How to use CKEditor in MVC application/ Asp.net application.
- Bind dropdown in MVC using jquery with C#
- How to implement CAPTCHA in MVC 4 using C# Asp.net.
- set default page while using “Area” in MVC application
- Create and consume a simple WCF Restful service using AngularJs application
- datepicker textbox in mvc 4 using JQuery
- How to install asp.net mvc 5 in visual studio 2012
- Bind gridview and paging example in angularjs
- Sql Server(9)
- Entity Framework(3)
- Angular Js(7)
- Web API(0)
- Web Service(1)
- Crystal Report(0)
- My SQL(5)
- Visual Studio(18)
- Knockout JS(0)
- Microsoft Office(0)
- Node JS(0)