Angular setup for enterprise applications in 2018

Whenever you start with a new project you should do a research on internet about best practices for particular technology and framework you are going to use.

If you are starting with a web project today, specifically client application, chances that you will end up using Angular framework are huge.

While Angular is great tool, it has its downsides. Lot of tools and libraries that I’m going to mention here are closely connected to a Google as a company. This can be also considered as an advantage, because if something is backed by Google it is going to last.

Now, let’s get back to the topic. In the rest of the text I will try to define absolute minimum of libraries and concepts that are needed for any modern client application.

Starting with a project

Bootstrapping of a project must be done using Angular Command Line Interface. https://cli.angular.io

npm install @angular/cli -g

Good practice that I use is before creating new project always update CLI with command above. Command above will install CLI and register it as global program which can be accessed by typing ng in terminal.

ng new MyNewProject

All theoptions of ng new command can be found at: https://github.com/angular/angular-cli/wiki/new

My personal recommendation would be:

ng new MyNewProject --prefix mp --routing true --skip-commit true --style scss

Which will initialize new application: with custom prefix, default routing, without initial commit and with SASS as default style sheet language.

Angular CLI comes with a build command too, which internally use WebPack for bundling and building our application.

State management

State management is second most important thing in present software. The most popular paradigm for solving this problem is Redux. Redux was initially invented for React, but all other frameworks implemented it in their own ways. Most popular Redux library for Angular is called NgRx.

While there is a lot of supporting libraries in React world for Redux, like Saga, Thunk, Redux Router… In Angular world everything is bundled in NgRx ecosystem.

To install NgRx in our project,

npm install @ngrx/{store,effects,store-devtools,router-store} --save

Information how to implement it in project, can be found in my previous story https://medium.com/@vlado.tesanovic/handling-keyboard-shortcuts-in-angular-with-redux-ngrx-c88907f17ca8 with @ngrx/schematics or you can look at official GitHub project: https://github.com/ngrx/platform ( specifically example-app folder )

One good library that is very helpful while working with state in reducers is ngrx-store-freeze.

Database ( persistent state management )

While in majority of case we will have REST API written for our application, in some cases ( and very handy for prototyping ) we can skip it and use directly Cloud Firestore, which is NoSql databases written by Google and Firebase team.

Big advantage of Firestore is that it handle offline data, which can be very tricky to implement with REST API.

Firestore ( NoSql database ) and Firebase ( reactive NoSql database for live communication trough WebSockets: chats, live feeds… ) can be installed with:

npm install firebase angularfire2 --save

There is great tutorial for how to use it on: https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md

Be careful, Firebase and Firestore are FREE only for specific amount of resources, after that you will start paying google.

Concepts

Smart and dumb components. Majority of components in any application will be dumb components, those components are responsible for presenting ( displaying ) HTML for our application. They are marked with OnPush in change detection strategy.

Smart components should be components behind routes with a lot of responsibility.

Ahead Of Time Compilation is process where all HTML written for our components are transformed in JavaScript code and interpreted like that in browsers. Angular CLI comes with AOT compilation as default option in ng build process when it is run with command.

ng build --prod

Lazy Loading is concept where our application is divided in separate parts and loaded independently ( upon requesting them ). Angular CLI solved that problem for us too, we only need to separate our App in modules and afterward they can be lazy loaded .

Environment variables are used to specify different values for different environments in our build process: development, staging and production. That means we can set attribute called apiURI and have different value for it in different environments. This is also solved by Angular CLI and different environments files which are specified during build and development process.

npm build --env=staging

Documentation can be found on: https://github.com/angular/angular-cli/wiki/stories-application-environments

Worth mentioning

• Layout system ( be careful about IE 11 support ): https://github.com/angular/flex-layout
• Apollo GraphQL: https://github.com/apollographql/apollo-angular

All libraries mentioned above are highly accepted and popular, battle ( production ) tested, with huge communities behind.