Skip to main content

Building the Project

Before we get started, let's take a moment to understand what exactly we're doing when we say 'Building the project'. Building an Angular project is the process of transforming your application from source files (like JavaScript, CSS, and HTML) into an output package that combines all these files optimized and minified for deployment.

Now, let's go ahead and break this process down into manageable steps.

Step 1: Understanding Angular.json​

In any Angular project, you'll come across a file named angular.json. This file is the CLI configuration file for your project. It includes details about the project structure, default configurations for build and test tools, and more.

For the purpose of building the project, focus on the "architect" section. Here, "build" and "serve" configurations are defined.

Step 2: Building the Project​

To start building the project, open your terminal and navigate to the root directory of your project. Once there, run the following command:

ng build

This command will instruct the Angular CLI to start the build process. By default, the build artifacts will be stored in the dist/ directory.

Step 3: Build Configurations​

By default, the build process uses the development configuration. This means the code is not optimized and contains extra debug information.

If you want to build your application for production, use the --prod flag.

ng build --prod

This will enable the production environment, which will make your application more lightweight by performing several optimizations, such as AOT compilation, minification, uglification, dead-code elimination and more.

Step 4: Understanding the Output​

After running the build command, you'll notice a new directory created under your project root named dist/. This directory will contain all your build artifacts.

The main files you'll see are:

  • runtime.js: Contains the scripts needed for Angular to run.
  • polyfills.js: Provides compatibility for different browsers.
  • main.js: Contains your application's Angular code.
  • styles.css: Contains all global styles defined in your project.
  • index.html: The main HTML file that is loaded when someone visits your site.

Step 5: Deploying the Project​

To deploy your Angular application, all you need to do is to copy the output files from the dist/ directory to a web server.

Remember, the build process does not include a web server. So, you'll need to use a separate server or hosting solution to run your application.

And that's it! You have successfully built and are ready to deploy your Angular application. Keep practicing these steps until you're comfortable with the process. Happy coding!