In the previous post, we have discussed how to create hello world application in angular. Using Angular CLI, we have generated basic files needed to run a hello world application.
Now, let’s have a quick look at the files and folders in our new Angular project.
The generated projects have the following files and folders structure
We have three folders and a few files in the root directory.
The 3 folders are e2e, node_modules, and src.
src – src/ folder presents in the root folder. It contains all the source code of project whereas the remaining folder contains files that helps to build, test, maintain the application.
e2e – It contains end to end tests. These files should not present in the src folder, because it acts as the separate app that helps to test the whole application.
node_modules – This folder has been created by Node.js based on the libraries listed in packages.json. (click here to know about in details)
Before digging further into the above folders, let’s take a look at the remaining files available in the root folder.
.angular-cli.json – Configuration of angular CLI. It helps us to define different environments like dev, stage, etc. and also to import third-party stylesheets.
.editorconfig – Simple configuration for your editor to make sure everyone that uses your project has the same basic configuration. Example: indent_size, max_line_length of the project. It allows us to maintain a common editor setting across the team.
.gitignore – Git configuration to make sure autogenerated files are not committed to source control. Example: dependencies folder – node_modules, compiled output folder – dist
karma.conf.js – Karma is a test runner which we are using in Javascript application. This file contains the configuration of the karma test. The configuration mentioned in this file is used when we are testing the application using ng test command.
package.json – npm configuration to maintain the metadata of the application, third-party packages listing, and to maintain the dependencies of those packages.
protractor.conf.js – Protractor is an end to end test runner. The configuration mentioned in this file is used when we are testing the application using ng e2e command.
README.md – Basic documentation of the project, when are generating files with CLI it is prefilled with CLI commands details.
tsconfig.json – TypeScript compiler configuration for IDE.
tslint.json – Linting settings for TSLint which is a used during ng lint for linting TypeScript code.
So far we have discussed the folders and files available in the root directory. Let’s dig deeper into the src folder.
The src folder contains sub-folders called app, assets, environments and few more files such as index.html, main.ts, etc
app/app.component – The HTML, CSS, ts, spec.ts files together form the AppComponent. Basically, it’s an HTML template, stylesheet and unit test. It acts as the root component of the application. The remaining component will be created as the nested component of this root component.
app/app.module.ts – Modules is a mechanism to group the component, pipes, and services which are related.
assets – assets folder is the place to maintain the static contents like images, or any content that needs to copy fully as it is during the build process.
environments – This folder contains one file for each environment. The file contains environment based configuration or information.
favicon.ico – favorite icon to be displayed when we are bookmarking our page
index.html – The main HTML that serves the application. The CLI automatically links the js and CSS files when building the application.
main.ts – The entry point of application. Compiles and bootstraps the application root module to run in the browser.
poyfills.ts – Different browsers have different levels of support of the web standards. Polyfills help normalize those differences. Example: The latest feature will browser like chrome or firefox, but we need the fallback for the browser like Internet Explorer. Polyfills will help to fill those gaps.
styles.css – We import the global styles in this file. Mostly the local style specific to the particular component will be placed inside the same folder for easy maintenance.
test.ts – The main entry point of the unit test.
tsconfig.json – Typescript compiler configuration for the angular application
In the next post, we can discuss the component in more details.
Happy Coding 🙂
Efficient User 