{"id":2625,"date":"2017-06-18T10:00:00","date_gmt":"2017-06-18T04:30:00","guid":{"rendered":"https:\/\/code4developers.com\/?p=2625"},"modified":"2018-09-04T20:52:47","modified_gmt":"2018-09-04T15:22:47","slug":"angular-4-project-structure","status":"publish","type":"post","link":"https:\/\/code4developers.com\/angular-4-project-structure\/","title":{"rendered":"Angular 4 Project Structure"},"content":{"rendered":"

Introduction<\/h3>\n

In previous article we learned about Angular 4 Installation. You can find that article on https:\/\/code4developers.com\/angular-4-installations\/\u00a0<\/a>. This article describes the project structure of Angular 4 application which Angular CLI created for us. I have already created ANGULAR4DEMO<\/strong> project in my previous article, so we will use that project to get idea about project structure.<\/p>\n

<\/p>\n

Project Structure<\/h3>\n

When we open the Angular 4 project in editor, we can see three main folders e2e, node_modules, src and different configuration files.<\/p>\n

\"\"<\/p>\n

 <\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
File<\/strong><\/td>\nPurpose<\/strong><\/td>\n<\/tr>\n
tslint.json<\/td>\nUsed for building application with consistent code style. We can change the configuration that defines how our application should be build.<\/td>\n<\/tr>\n
tsconfig.json<\/td>\nts<\/strong> stands for typescripts. Typescripts are used for developing angular\u00a0 \u00a0applications since Angular 2 came out. It contains the configurations for typescripts.<\/td>\n<\/tr>\n
protector.conf.js<\/td>\nIt contains testing configurations.<\/td>\n<\/tr>\n
README.md<\/td>\nIs contains basic documentation for your project, pre-filled with CLI command information. Just make sure to enhance it with project documentation so that anyone checking out the reputation can build your application.<\/td>\n<\/tr>\n
package.json<\/td>\nIt contains all the dependency modules which are required for our application. It\u2019s up to you which module you want to use. if you want to use _js library or any other library just add name and version of that dependency\u00a0 library in package.json and execute command npm install. It will execute all the dependencies and download in node_modules folder.<\/td>\n<\/tr>\n
karma.conf.js<\/td>\nIt has configuration for writing unit tests.karma is the test runner and it uses jasmine as framework. These both tester and framework are developed by angular team for writing unit tests.<\/td>\n<\/tr>\n
.gitignore<\/td>\nWe can define all the folders and files which we want to exclude from our repository in our git.<\/td>\n<\/tr>\n
editor.config<\/td>\nIt contains the setting of your editor. It has parameter like style, size of character, line length.<\/td>\n<\/tr>\n
angular-cli.json<\/td>\nIt contains all the configuration of Angular 4 Project. It has project name, root directory as source folder (src) name which contain all the components, services, directives, pipes, starting point of our application (index.html file), starting point of typescript file (main.ts), style files (style.css) .<\/td>\n<\/tr>\n
src\/*<\/td>\n\"\"<\/p>\n

In src folder we have three different folders: app, assets , environments<\/p>\n

It also has other configuration files for src directory.<\/td>\n<\/tr>\n

favicon.ico<\/td>\nIts favicon icon for your website or an application.<\/td>\n<\/tr>\n
index.html<\/td>\nIt contains html code with head, and body section. It is starting point of your application.<\/td>\n<\/tr>\n
main.ts<\/td>\nIt is starting point of typescript file in your angular application. It contains library which are imported by your angular project.<\/td>\n<\/tr>\n
polyfill.ts<\/td>\nIt is used for browser compatibility.<\/td>\n<\/tr>\n
style.css<\/td>\nIt has all the styles and css for your angular 4 project.<\/td>\n<\/tr>\n
test.ts<\/td>\nThis file is used to write unit tests.<\/td>\n<\/tr>\n
tsconfig.app.json<\/td>\nIt contains the configuration about how your application should compile.<\/td>\n<\/tr>\n
app\/*<\/td>\n\"\"<\/p>\n

In app folder we have component and ts files.<\/td>\n<\/tr>\n

app \/app.module.ts<\/td>\nIt contains the entire library which are imported and used in your angular 4 application. It\u2019s a root module that tells Angular how to assemble the application. Currently it declares only the App_componenet.<\/td>\n<\/tr>\n
app\/app.component.<\/p>\n

{ts,html,css,spec.ts}<\/td>\n

It has AppComponent\u00a0with an HTML template, CSS style sheet, and a unit test. It\u2019s the\u00a0root\u00a0component of what will become a tree of nested components as the application evolves.<\/td>\n<\/tr>\n
assets\/*<\/td>\n\"\"<\/p>\n

In this folder you can put images and anything else to be copied wholesale when you build your application.<\/td>\n<\/tr>\n

environments\/*<\/td>\nIn this folder one file for each of your destination environments, each exporting simple configuration variables to use in your application. The files are replaced on-the-fly when you build your app. You might use a different API endpoint for development than you do for production or maybe different analytics tokens. You might even use some mock services. Either way, the CLI has you covered.<\/td>\n<\/tr>\n
e2e\/<\/td>\n\"\"<\/p>\n

In this folder, all the test cases\u00a0from live the End-to-End cycles covered. They shouldn’t be inside\u00a0src\/\u00a0because e2e tests are really a separate app that just so happens to test your main app. That’s also why they have their own\u00a0tsconfig.e2e.json.<\/td>\n<\/tr>\n

node_modules\/<\/td>\n\"\"<\/p>\n

Node.js\u00a0creates this folder and puts all third party modules listed in package.json\u00a0.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u00a0<\/strong><\/p>\n

Summary<\/strong><\/p>\n

In this article, I discussed about Angular 4 Project structure which generated by Angular CLI. The\u00a0Angular CLI<\/a>\u00a0is a\u00a0command line interface<\/em>\u00a0tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. So it\u2019s very important to understand project structure of Angular 4 application before start development.<\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction In previous article we learned about Angular 4 Installation. You can find that article on https:\/\/code4developers.com\/angular-4-installations\/\u00a0. This article describes the project structure of Angular 4 application which Angular CLI…<\/p>\n","protected":false},"author":5,"featured_media":2649,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28],"tags":[29],"powerkit_post_featured":[],"class_list":{"0":"post-2625","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-angular","8":"tag-angular"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-Gl","jetpack-related-posts":[{"id":2586,"url":"https:\/\/code4developers.com\/angular-4-installations\/","url_meta":{"origin":2625,"position":0},"title":"Angular 4 Installations","author":"Nisarg Dave","date":"June 14, 2017","format":false,"excerpt":"Introduction This article demonstrates how to install Angular 4 in your local system and start working with angular\/cli using basic commands. What is Angular 4? Before starting with Angular 4, we need to know about Angular 2. Angular 2 is totally different kind of framework from Angular 1. Angular 1\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1.png?resize=700%2C400 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1.png?resize=1050%2C600 3x"},"classes":[]},{"id":3746,"url":"https:\/\/code4developers.com\/angular-pipes\/","url_meta":{"origin":2625,"position":1},"title":"Pipes in Angular Part – 1 : lowercase, uppercase, and titlecase pipes","author":"Yatendrasinh Joddha","date":"June 30, 2018","format":false,"excerpt":"In this series of article for the angular rookies we will discuss about pipes in Angular, a way to write display-value transformations that you can declare in your HTML. In this article we will discuss about lowercase, uppercase, and titlecase pipes. At the end of the series we will create\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"example output","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/06\/example-output.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3435,"url":"https:\/\/code4developers.com\/angular-5\/","url_meta":{"origin":2625,"position":2},"title":"Angular 5 – Video Tutorials","author":"Nisarg Dave","date":"April 14, 2018","format":false,"excerpt":"Angular version 5 - Googles's popular and open source JavaScript framework for building and developing single page mobile and desktop application. The latest version of Angular, Angular 5 was announced to users in 1st November 2017. Angular 5 is focused on making the Angular application smaller , faster and easier\u2026","rel":"","context":"In "Angular 5"","block_context":{"text":"Angular 5","link":"https:\/\/code4developers.com\/category\/angular5\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3934,"url":"https:\/\/code4developers.com\/angular-version-7-released\/","url_meta":{"origin":2625,"position":3},"title":"Angular Version 7 Released","author":"Yatendrasinh Joddha","date":"October 19, 2018","format":false,"excerpt":"Finally, the Angular version 7 (Angular v7) is out with some awesome features. Thanks to Angular team for all the efforts, in this major release angular team is spanning the entire platform, with the core framework, Angular Material, and the CLI with corresponding key versions. This release covers new landscapes\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"Virtual Scrolling","src":"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/1200\/1%2ACQKUmJrBs-523I4GOiEUaA.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/1200\/1%2ACQKUmJrBs-523I4GOiEUaA.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/1200\/1%2ACQKUmJrBs-523I4GOiEUaA.gif?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":14480,"url":"https:\/\/code4developers.com\/angular-custom-elements\/","url_meta":{"origin":2625,"position":4},"title":"Angular Custom Elements: Creating Reusable Components with Angular","author":"Yatendrasinh Joddha","date":"April 19, 2023","format":false,"excerpt":"Angular Custom Elements allow you to create reusable components that can be used in non-Angular applications. Custom Elements are a powerful feature that can help you share code across multiple projects and platforms. In this article, we'll take a closer look at Angular Custom Elements and show you how to\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"Angular Custom Elements","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":12847,"url":"https:\/\/code4developers.com\/connect-firebase-database-and-angular-app\/","url_meta":{"origin":2625,"position":5},"title":"Connect Firebase Realtime NoSQL Database with Angular App from Scratch","author":"Arif Khoja","date":"August 30, 2020","format":false,"excerpt":"In this tutorial, We are going to learn\u00a0How to connect Firebase Realtime NoSQL cloud database with Angular app from scratch?. We\u2019ll be using\u00a0AngularFire library for setting up Firebase database in the Angular web application. Firebase is a Google product, It is a real-time NoSQL cloud database that allows you to\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"connect-angular-firebase","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=2625"}],"version-history":[{"count":7,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2625\/revisions"}],"predecessor-version":[{"id":3897,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2625\/revisions\/3897"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/2649"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=2625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=2625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=2625"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=2625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}