Building Angular applications and further resources

This final Angular article covers how to build an app ready for production, and provides further resources for you to continue your learning journey.

Prerequisites: Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line.
Objective: To learn how to build your Angular app.

Building your finished application

Now that you are finished developing your application, you can run the Angular CLI build command. When you run the build command in your todo directory, your application compiles into an output directory named dist/.

In the todo directory, run the following command at the command line:

ng build -c production

The CLI compiles the application and puts the output in a new dist directory. The --configuration production/-c production flag with ng build gets rid of stuff you don't need for production.

Deploying your application

To deploy your application, you can copy the contents of the dist/my-project-name folder to your web server. Because these files are static, you can host them on any web server capable of serving files, such as:

  • Node.js
  • Java
  • .NET

You can use any backend such as Firebase, Google Cloud, or App Engine.

Host locally

For fun, you can host the built app on your machine using http-server package by running following command after running a build:

npx http-server ./dist/todo/browser/ -o

This command serves the dist/todo/browser directory on port 8080 so you can open in your browser to see the app running. The HTTP server also lets you access the app at your computer's IP address from any other device on your local network, and this address is listed under the address in the console.

What's next

At this point, you've built a basic application, but your Angular journey is just beginning. You can learn more by exploring the Angular documentation, such as:

  • Tour of Heroes: An in-depth tutorial highlighting Angular features, such as using services, navigation, and getting data from a server.
  • The Angular Components guides: A series of articles that cover topics such as lifecycle, component interaction, and view encapsulation.
  • The Forms guides: Articles that guide you through building reactive forms in Angular, validating input, and building dynamic forms.


That's it for now. We hope you had fun with Angular!