Angular 4 project structure

Angular 4 project structure

1. tslint.js - for project code check  structure at runtime

2.tsconfig.json - for typescript  configuration. angular 4 uses typescript language which is superset of javascript.

3. protractor.conf.js - for testing configuration

4.package.json  - all the module dependencies needed for the app. once added, do npm install

5. karmma.conf.js - for test runner - uses jasmine framework.

6. angular-cli.json - for all folder structure  configuration of project 

7. main.ts - default setting for angular cli

8. polyfills.ts - backward compatibility for browser

9. style.css - for all css configuration

10. tests.ts - for all unit testing

11. tsconfig-app.json - for configuration how our app should be compiled

12. app.module.ts - parent module of whole angular app. used for importing libraries.

13. app.component.ts - for declaring component. component must have html, css and ts in order to have whole component.

14. app.component.spec.ts - name of unit testing file. all unit tests are writtten here.

15. app.component.html - binding title element 

16. app.component.css - for customized css of component

17. assets folder - for audio video image files.

18. environment folder - for environment specific cconfigurtion like dev qa and production