Below is the structure of a angular project as seen in Visual Studio Code Editor:
1) e2e
The first folder we have is e2e - which stands for end to end. In this folder we write the end to end tests for our application. These are automated tests which simulate real user.
2) node_modules:
We store all the third party libraries in this folder. This folder is purely for development. On compiling our application, parts of the 3rd party libraries are bundled together and deployed in our application.
3) src:
This is the actual source code of our application. Inside this we have a
module:
app.module.ts
Component:
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
Every application has at least one module and one component.
i) assests:
In this folder we will store the static assets of our application. Image files, text files and icons go in here.
ii) environments:
We store the configuration settings for differnt environments. We have one file for production environment:
environment.prod.ts
We have one file for the development environment:
environment.ts
There are some other files in the source folder (src):
iii) favicon.ico:This is the favourite icon file. This is the icon displayed in the browser.
iv) index.html:This is very simple HTML file that contains our angular application. In this we do not have any references to a script or style-sheet. The references will be added dynamically to this page.
v) main.ts:
This is the main file. This is a typescript file which is the starting point of our application. We know that in a lot of the programming languages we have the main method - starting point of a program. The same concept is used in the angular applications. All we are doing here is - bootstrapping the main module of our application.
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
Which in this case, is the AppModule. When angular loads this module - everything starts from there.
vi) polyfills.ts:
This imports some scripts that angular requires for running. This is because, the angular framework uses features of JavaScript - that are not supported by the current version of JavaScript that are not supported in many browsers. So, polyfills.ts file fills the gaps between the JavaScript needed by Angular and the features supported by the currently available browsers.
vii) styles.css:
This is where we will add the global styles to our application. Also, each page or say, each component will have its own styles
viii) test.ts:
This file is used for setting up our testing environment.
Now, outside this source folder:
angular.json: This is the configuration file for angular projects. This is standard configuration - we don't have to worry about it for most part.
.editorconfig:
If we are working in a team environment. We want to make sure all team members have the same settings in this file. This is were we store the settings.
.gitignore:
This is for excluding certain files and folders from our git repository. It is a tool for managing and versioning your source code.
karma.conf.js: This is a configuration for karma test runner: https://karma-runner.github.io/2.0/index.html
package.json: This is a standard file that every node project has. It includes:
name
version
dependencies: All the dependent libraries start with @angular/ and after that we have the name of the library.
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"rxjs": "~6.2.0",
"zone.js": "~0.8.26"
},
First library here (
@angular/animations) - it is for animations. If we are not planning to use animations in our project - then we can delete this here. In the future, if we add dependencies we will add it here.
devDependencies: These are the libraries we require in order to develop this application. We do not need these to run the application on the production server.
"devDependencies": {
"@angular-devkit/build-angular": "~0.8.0",
"@angular/cli": "~6.2.3",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.3.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~2.9.2"
}
These are purely for a developer machine.
protractor.config.json: This is a tool for running end-to-end tests for angular.
tsconfig.json: This is a bunch of settings for your typescript compiler. Typescript compiler will look at this settings and based on this settings it will perform compilation into JavaScript that browsers can understand.
tslnt.json: This includes a number of settings for tslint. tslint is a static analysis tool for typescript code. It checks your typescript code for readability , maintainability and functionality errors.
This covers the basic structure of an angular project.
Reference:
