Welcome to the free & complete Angular Tutorial.

In this lesson, we are going to discuss about Angular workspace & project file structure.

In the previous article, we quickly created Hello World application using Angular CLI.

Take a moment and have a quick glance at folder structure of Hello World application you created and come back. You haven’t created one, no worries, you can still proceed with this post.

We will dissect each and every file under Angular project in this lesson. If you have any questions please ask me in the comment section out there in the bottom of this post, I will answer for sure.

Let’s get started.

Workspace files

Here are the workspace files you will find under Angular project:

  1. .editorconfig – Configuration for IDE / code editors.
  2. .gitignore – Specifies files that Git should ignore.
  3. angular.json – Default CLI configuration file common for all projects in the workspace, including configuration options for build, serve, and test tools that the CLI uses, such as TSLint, Karma, and Protractor.
  4. node_modules – Provides npm packages to the whole workspace.
  5. package.json – npm configuration file that has list of packages dependencies that are available to all projects in the workspace.
  6. package-lock.json – Provides version information for all packages installed into node_modules by the npm client.
  7. tsconfig.json – Default TypeScript configuration for apps in the workspace, including TypeScript and Angular template compiler options.
  8. tslint.json – Default TSLint configuration for apps in the workspace.
  9. README.md – Project documentation for GIT projects.

App project files

  1. app/ – Contains the module, component and service files. Click here to know more about App folder.
  2. assets/ – Contains image files and other asset files that are to be bundled with your application at the time of building the application.
  3. environments/ – Contains build configuration options for particular target environments. By default there is an unnamed standard development environment and a production (“prod”) environment.
  4. browserslist – Configures sharing of target browsers and Node.js versions among various front-end tools.
  5. favicon.ico – An icon that is visible in bookmark bar
  6. index.html – The main HTML page that is served when a website is visited. JavaScript & CSS will be automatically added by CLI at the time of creating project.
  7. main.ts – The main entry point for the app. Compiles the application with the JIT compiler and bootstraps the application’s root module (AppModule) to run in the browser.
  8. polyfills.ts – Provides polyfill scripts for browser support mainly for IE & Edge.
  9. styles.css – Main CSS file for entire application
  10. test.ts – The main entry point for your unit tests.
  11. tsconfig.app.json – Inherits from the workspace-wide tsconfig.json file.
  12. tsconfig.spec.json – Inherits from the workspace-wide tsconfig.json file.
  13. tslint.json – Inherits from the workspace-wide tslint.json file.

App source folder

  1. app/app.component.ts – Defines the logic for the app’s root component, named AppComponent (the default component created by CLI). The view associated with this root component becomes the root of the view hierarchy as you add components and services to your app.
  2. app/app.component.html – Defines the HTML template associated with the root AppComponent.
  3. app/app.component.css – Defines the base CSS stylesheet just for the root AppComponent.
  4. app/app.component.spec.ts – Defines a unit test for the root AppComponent.
  5. app/app.module.ts – Defines the root module, named AppModule, that tells Angular how to assemble the application. Initially declares only the AppComponent. As you add more components to the app, they must be declared here. Even services need to be declared here.
  6. assets/* – Contains image files and other asset files that are to be bundled with your application at the time of building the application.