angular 2 Best practices

Angular 2 is spreading worldwide and becoming more popular; thus more people are starting to learn and use it. However, whether you’re a coding expert or are a beginner to the trade, there are some basic guidelines and practises you should follow when using Angular 2.

I’ve collected 12 best practices and tips to help you write better and cleaner code.

Nr.1 – CLI/Boilerplate

If you’re just starting with Angular 2, use angular-cli (npm i angular-cli -g). It’s based on ember-cli. You can generate a good example with ng init project-name. This command will initialize a new Angular 2 application. This application should already be working and follow all the best practices from the official Angular 2 style guide.

Additionally, it installs the required npm dependencies. It also creates unit testing and e2e testing scripts. In short, it does everything required to start a new Angular 2 application. If you don’t like the directory structure or system.js you can use the best starter kit angular2-webpack-starter or other boilerplates.

---

Editor’s note:
If you want to improve your bootstrapping process even further, try our in-house tool, Angular Slice. We’ve developed this tool, to generate our projects’ codebase right from the graphical inputs. We define components based on the visuals and generate them right there.

Our time spent on bootstrapping decreased on average by 70%! We make the alpha available to you soon. However in this early stage of development we only have seats for the first 500 users!
You can subscribe to book your seat here.

---

Nr.2 – Build the app

Angular2 use Rollup to build bundle there is next-generation ES6 module bundler with support tree shaking (ultimately, bundles only the modules you import into your scripts. Any exports that were not imported will not be in the final JavaScript build). I use browserify (I’m a node stream fanatic) but webpack is also great, because  there are more loaders and plugins available for support Rollup feature set eg: rollup-loader and rollupify or use webpack2 which also support tree shaking. Rollup can make smaller code however webpack and browserify haverollup-loader or browserify rollupify transformer which you can use to shrink your bundle.

In the near future, it is going to be recommended to use @angular/compiler(-cli) and @angular/platform-browser which was made with template compiler, precompiled templates, and styles. Follow this example to speed up your bundle by more than 9x!

1 2 3 4

import { coreBootstrap, ReflectiveInjector } from '@angular/core'; import { browserPlatform, BROWSER_APP_STATIC_PROVIDERS } from '@angular/platform-browser'; import { AppNgFactory } from './app.ngfactory'; import { App } from './app';

1 2 3

const appInjector =     ReflectiveInjector.resolveAndCreate(BROWSER_APP_STATIC_PROVIDERS, browserPlatform().injector); coreBootstrap(appInjector, AppNgFactory);

Nr.3 – Server side (universal) rendering

Universal means rendering pages on both the server and client side. It usually implies the use of frontend JavaScript and Node.js because they allow for the re-usage of libraries, allowing browser JavaScript code to be run in the Node.js environment with very little modification. As a result of this interchangeability.

In case you would like to use Typescript in Nodejs, I don’t suggest using ts-node or any node module which hacks the require.extension.
Use “browserify – node” or webpack with the right configuration to generate server side build.The best universal example is universal-starter.

Universal advice:

• don’t access the DOM directly
• don’t use BrowserDomAdapter it’s only for internal use
• use a custom renderer

“If you need access to document then you can inject it via the DOCUMENT token. If you don’t care about DI then you can access it directly. If you are using web workers and want to render stuff into dom then you should be implementing a custom renderer.” – IgorMinar

1 2 3 4 5

import {Inject, Component} from "@angular/core"; import {DOCUMENT} from "@angular/platform-browser"; @Component(...) class MyComponent(@Inject(DOCUMENT) doc) {}

Nr.4 – IDE/Editor

I use Sublime and official Microsoft plugin but I think atom and vscode (unofficial editor of Angular 2) is also ideal for development, but much slower than Sublime.

If you prefer complex IDE then use webstorm which has Angular 2 Support.

John Lindquist, founder of egghead.io, made a good video, it walks you through all the new features of WebStorm that can help make your transition to Angular 2 smooth as butter.