Code Structure

How is this Angular project structured and where are the files you need to modify.

In the root of the project we have some important files and folders:

angular project structure - root

File/Folder

Purpose

node_modules/

The npm packages installed in the project with the npm install command.

e2e/

This folder is where our end to end tests will live. This template doesn't include e2e tests, just the default configuration that is included in a new angular project.

src/

The most important folder. Here we have all the files that make our Angular app and is the location where we will spend most of our time coding.

angular.json

It provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI. Learn more about this file.

.gitignore

Specifies intentionally untracked files that Git should ignore.

package.json

As every modern web application, we need a package system and package manager to handle all the third-party libraries and modules used by our app. Inside this file you will find all the dependencies and some other handy stuff like the npm scripts that will help us a lot to orchestrate the development (bundling/compiling) workflow.

package-lock.json

Provides version information for all packages installed into node_modules by the npm client.

server.ts

A super simple yet complete Node.js Express server to serve your Angular app with server side rendering support. Learn more about ssr in this project.

tsconfig.json

Default Typescript configuration file. It needs to be in the root path as it’s where the typescript compiler will look for it.

webpack.server.config.js

Default webpack config used by the Angular CLI build/bundling workflow.

​Now let's dive in the details of the /src folder.

We will be expanding this documentation ASAP.