Building an Angular 4 application for production

Victoria Mineva
21-07-2017

In the past few months, I’ve had the pleasure to work on an Angular 4 application and get familiar with it. Angular 4 is not much different than Angular 2 apart from some improvements. I had to start from scratch, do all the development and finally create a production build and put it online. The initial setup was quite simple by making use of the Angular CLI, which is a command line interface. It creates a project folder with all necessary files and performs development tasks such as building, testing, and deployment.

After you’ve generated your new project you’re able to start developing by simply navigating to your project folder in the terminal and running ng serve –open. This starts a local server and you’re ready to start coding.

Creating a production build

It is quite an exciting moment when the development of your application is finished and it’s time to put it live. Generating a production build was (as far as I’ve seen) not a part of Angular’s official tutorial and for me, this turned to be one of the most challenging parts. I found that the build can be created with the following command in the terminal:

ng build –prod –aot

This command will create a dist folder with all the files that need to be uploaded to your server. That includes the following:

  • main.hashvalue.bundle.js – a bundled version of your application
  • vendor.hashvalue.bundle.js – your bundled dependencies
  • polyfill.hashvalue.bundle.js – polyfill dependencies
  • index.html – the index file of the application
  • inline.hashvalue.bundle.js – the webpack loader
  • style.hashvalue.bundle.css – stylesheets
  • assets folder – all resources of your application such as images and fonts

The –aot flag is used for enabling the so called Ahead-of-time compilation. By doing that the application will be compiled at build time instead of at runtime in the browser. That provides advantages such as catching template errors early on, faster rendering and smaller download size.

Uploading to a server

After you’ve created your production build you are ready to copy your application to a server. All of the files that need to be copied are located in the dist folder that was just generated. That makes it really simple to upload.

Routing issues

A problem that I’ve encountered is that depending on your server settings it’s possible that the routing doesn’t work properly. That results in only being able to load the default route or getting a 404 error when you refresh the page. A solution for that problem is to create a .htaccess file with rewriting rules that will point unmatched URLs to the index.html file.

Uploading to a subfolder

Another problem I experienced was uploading the application to a subfolder on the server. This means you get as the root of you application an URL such as for example www.yourdomain.com/subfolder. In such a case there is an extra step that you have to take. Inside your index.html file there should be a <base href=”/”> tag. There it is important to set the href to the folder inside which your application will be. So for the example URL that I gave you that would have to be <base href=”/subfolder/”>. Now just create a new build and you’re ready to upload your files. In case of routes giving a 404 error use again rewriting rules like mention earlier.

Links not working

The last issue that I’ve encountered was that some of my links weren’t working. I discovered that the standard HTML <a href=”link”>Link</a> tag doesn’t always work as expected with Angular 4. A solution for this is to use the Angular’s routerLink like for example <a [routerLink]=”link”>Link</a> which works great as far as I’ve seen.

LEAVE A REPLY

you might also like