Understanding Angular Workspace and Project File Structure

Last update on July 06 2024 12:21:05 (UTC/GMT +8 hours)

Angular Workspace and Project File Structure

A workspace in Angular is a collection of files for one or more projects, including applications, libraries, or packages. When creating an Angular application, the Angular CLI command ng new <project_name> sets up the necessary Angular npm packages and dependencies within a new workspace.

Workspace Structure

Upon running ng new , Angular CLI creates the following structure:

Initial Skeleton App Project (src/ subfolder)
End-to-End Test Project (e2e/ subfolder)
Related Configuration Files

This initial setup contains a simple welcome app ready to run.

Workspace Configuration Files

At the top level of the workspace, there are several configuration files:

.editorconfig: Configuration for code editors.
.gitignore: Specifies untracked files that Git should ignore.
angular.json: CLI configuration defaults for all projects, including build, serve, and test tools configurations.
node_modules/: Contains npm packages for the entire workspace.
package.json: Manages npm package dependencies available to all projects.
package-lock.json: Provides version information for all installed packages.
tsconfig.json: Default TypeScript configuration, including Angular template compiler options.
tslint.json: Default TSLint configuration for the workspace.
README.md: Introductory documentation for the application.

Default App Project Files

The command ng new my-app creates a workspace folder named "my-app" and an app skeleton. This initial app is the default for CLI commands unless changed. The src/ subfolder contains the source files, and workspace-wide node_modules dependencies are visible to this project.

Application Source and Configuration Files

app/: Contains component files defining app logic and data.
assets/: Contains image files and other assets to be copied as-is during the build.
environments/: Contains build configuration options for different environments (e.g., development, production).
browserslist: Configures sharing of target browsers and Node.js versions among various front-end tools.
favicon.ico: Icon for the app in the bookmark bar.
index.html: Main HTML page served when visiting the site. JavaScript and CSS files are automatically added during the build.
main.ts: Main entry point for the app, compiling and bootstrapping the root module.
polyfills.ts: Provides polyfill scripts for browser support.
styles.sass: Lists CSS files for the project, with the extension reflecting the configured style preprocessor.
test.ts: Main entry point for unit tests with Angular-specific configuration.
tsconfig.app.json: Inherits from the workspace-wide tsconfig.json file.
tsconfig.spec.json: Inherits from the workspace-wide tsconfig.json file.
tslint.json: Inherits from the workspace-wide tslint.json file.

Default App Project E2E Files

The e2e/ subfolder contains configuration and source files for end-to-end tests corresponding to the initial app. Workspace-wide node_modules dependencies are visible to this project.

my-app/
  e2e/
    src/
      protractor.conf.js   # Test-tool configuration
      tsconfig.e2e.json    # TypeScript config, inherits from workspace tsconfig.json

App Source Folder

Inside the src/ folder, the app/ folder contains your app's logic and data. Angular components, templates, and styles are placed here. The assets/ subfolder holds images and other necessary files.

App Source Files

app/app.component.ts: Defines logic for the root component (AppComponent).
app/app.component.html: Defines the HTML template for the root component.
app/app.component.css: Defines the base CSS stylesheet for the root component.
app/app.component.spec.ts: Defines a unit test for the root component.
app/app.module.ts: Defines the root module (AppModule), assembling the application. Additional components are declared here as they are added.

Assets

assets/: Contains image files and other assets to be copied as-is during the build.

Conclusion

Understanding the Angular workspace and project file structure is crucial for efficient development. This knowledge helps in navigating the project, configuring it properly, and extending it as needed.

Previous: Getting started with Angular
Next: Architecture Overview