Angular 2 Development and Production Environments

In this tutorials we will discuss the differences between a development build and a production build in angular. 

To generate a development build we can use either 

ng build 
OR
ng build --dev 

To generate a production build we use 
ng build --prod 

Here are some of the differences between a development build and a production build in angular.

Source Maps : Development build generate Source Maps where as production build does not. 

What are Source Maps
To improve the performance, the application's JavaScript and CSS files are combined and compressed. It is extremely difficult to debug those compressed files. A source map holds information about the original files and can be used to map the code within a compressed file back to it’s original position in a source file. So with the help of these source maps we can easily debug our applications even after the the files are compressed and combined.

By default, a development build produce source maps where as a production build does not. However, we can change this default behaviour by using --sourcemaps option along with the ng build command. It's alias is -sm.

The following command produces a development build without source maps as we have set -sm option to false
ng build --dev -sm false

On the other hand, if you want source maps along with your production build set -sm option to true as shown below.
ng build --prod -sm true

Extracts CSS : With the development build global styles are extracted to .js files where as with the production build they are extracted to .css files. To change this default behavior use --extract-css option or it's alias -ec with the ng build command.

The following command produces a development build with global styles extracted to .css file(s) instead of .js ones.
ng build --dev -ec true

Minification & Uglification : A Prod Build is both minified and uglified, where as a Dev Build is not.

What is Minification 
The process of removing excess white space, comments, and optional tokens like curly brackets and semicolons is called Minification. 

What is Uglification
The process of transforming code to use short variable and function names is called uglification.

The minified and uglified version of the file is smaller in size than the full version, resulting in faster response times and lower bandwidth costs.

If you look at the bundles generated by the prod build, you will notice that they are minified and uglified. Notice, extra white spaces, comments, and optional tokens like curly brackets and semicolons are removed. Also notice, the code is transformed by using short variable and function names. On the other hand, the bundles generated by the dev build, are not minified and uglified.

Tree Shaking : A Prod build is Tree Shaked, where as a Dev build is not.

What is Tree Shaking
Tree shaking is the process of removing any code that we are not actually using in our application from the final bundle. It's one of the most effective techniques to reduce the application size.

If you look at the bundles generated by the production build, they are significantly less in size compared with the bundles generated by the development build. This is because with the production build the code is tree shaked to remove dead code i.e the code that is not referenced by the application.

Ahead-of-Time (AOT) Compilation : With a production build we get AOT (Ahead-of-Time) compilation, i.e the Angular component templates are pre-compiled, where as with a development build they are not. We will discuss Ahead-of-Time compilation in detail in our next video.

The following table summaries the differences between a development build and a production build

Feature	Development Build	Production Build
Source Maps	Yes	No
Extracts CSS	.js file	.css file
Minifaction	No	Yes
Uglification	No	Yes
Tree Shaking	No	Yes
AOT	No	Yes

Angular 2 Interview Questions for fresher

Que 1> What are the new features of Angular2 ? 

Angular 2 is not a simple upgrade from angular 1. Angular 2 is completely rewritten, 
so it has lot of improvements when compared with Angular 1. Let's look at a few of these improvements. 

Performance : -
From a performance standpoint, Angular 2 has faster initial loads, change detection, and improved rendering time. not just performance, we also have improved modularity, Dependency injection and test ability. 
According to angular conference meetup, Angular 2 is 5 times faster compared to AngularJS 1.

Mobile Support : -
Angular 1 was not built for mobile devices. 
It is possible to run Angular 1 on mobile but we will have to use other frameworks. 
Angular 2 on the other hand is designed from the ground up with mobile support.

Component Based Development : -
Component based web development is the future of web development. 
In Angular 2, "everything is a component". Components are the building blocks of an Angular application. 
The advantage of the component-based approach is that, it facilitates greater code reuse. 
From unit testing standpoint, the use of components make Angular2 more testable

More language choices : 
There are several languages that we can use to develop Angular applications. To name a few, we have
1. ECMAScript 5
2. ECMAScript 6 (also called ES 2015)
3. TypeScript etc. 

Besides these 3 languages we can also use Dart, PureScript, Elm, etc, but among all these, TypeScript is the most popular language.


 Que 2> What is ECMAScript

The JavaScript language standard is officially called ECMAScript. 
Over the past several years many versions of ECMAScript were released starting with ECMAScript version 1 all the way till ECMAScript version 7.

Most of the modern browsers available today support ECMAScript 5. 
The browser support for ECMAScript 6 is still incomplete. However, using a process called Transpilation, 
ECMAScript 6 can be converted to ECMAScript 5 which is supported by all the modern browsers. ECMAScript 6 is officially known as ECMAScript 2015. 
ECMAScript 2015 introduced several new features like classes, modules, arrow functions etc.


Que 3> What is Type Script 

TypeScript is a free and open-source programming language developed by Microsoft. 
It is a superset of JavaScript and compiles to JavaScript through a process called transpilation. 
Using TypeScript to build angular applications provides several benefits.
1. Intellisense 
2. Autocompletion
3. Code navigation
4. Advanced refactoring
5. Strong Typing
6. Supports ES 2015 (also called ES 6) features like classes, interfaces and inheritance. 
If you have any experience with object oriented programming languages like C# and Java, learning TypeScript is easy.

Because of all these benefits writing, maintaining and refactoring applications can be an enjoyable experience. 
So obviously TypeScript has become the number one choice of many developers for developing Angular applications.


Que 4> What is a component in Angular 2 ?

A component in Angular is a class with a template and a decorator. 
So in simple terms a component in Angular is composed of these 3 things

Template - Defines the user interface. Contains the HTML, directives and bindings.

Class - Contains the code required for template. Just like a class in any object oriented programming language 
like C# or Java, a class in angular can contain methods and properties. 
Properties contain the data that we want to display in the view template and 
methods contain the logic for the view. We use TypeScript to create the class.

Decorator - We use the Component decorator provided by Angular to add metadata to the class. 
A class becomes an Angular component, when it is decorated with the Component decorator.


Que 5> What are the differences between template and templateUrl properties and when to use one over the other ?

Angular2 recommends to extract templates into a separate file, if the view template is longer than 3 lines. 
Let's understand why is it better to extract a view template into a seprate file, if it is longer than 3 lines.

With an inline template 

We loose Visual Studio editor intellisense, code-completion and formatting features.
TypeScript code is not easier to read and understand when it is mixed with the inline template HTML.

With an external view template

We have Visual Studio editor intellisense, code-completion and formatting features and 
Not only the code in "app.component.ts" is clean, it is also easier to read and understand

Que 6> what is nested components ?

As we already know Angular 2 is all about components. 
A component in Angular allows us to create a reusable UI widget. 
A component can be used by any other component. 
nested component is defined as (parent component and child component) relation

Que 7> What is AppModule ?

AppModule is the root module which bootstraps and launches the angular application. 
You can name it anything you want, but by convention it is named AppModule.


It imports 2 system modules - BrowserModule and NgModule 

BrowserModule - Every application that runs in a browser needs this module. 

NgModule - @component decorator adds metadata to an angular component class, 
similarly @NgModule decorator adds metadata to the angular module class.

Que 8> What is @NgModule?

@NgModule is a decorator function. A decorator function allows users to mark something as Angular 2 thing 
(could be a module or component or something else) and it enables you to provide additional data that determines 
how this Angular 2 thing will be processed, instantiated and used at the runtime. 
So, whenever user writes @NgModule, it tells the Angular 2 module, what is going to be included and used in and using this module.

Properties of the @NgModule decorator

imports - Imports the BrowserModule required for an angular application to run in a web browser

declarations - Contains the components registered with this module. In our case we have two - AppComponent and EmployeeComponent

bootstrap - Contains the root component that Angular creates and inserts into the index.html host web page.

Que 9 > What is Angular interpolation ?

Interpolation is all about data binding. In Angular data-binding can be broadly classified into 3 categories

An example of interpolation is shown below:

<a ng-href="img/{{username}}.jpg">Hello {{username}}!</a>

Data Binding	Description
One way data-binding	From Component to View Template
One way data-binding	From View Template to Component
Two way data-binding	From Component to View Template & From View template to Component

One way data-binding - From Component to View Template : To display read-only data on a view template we use one-way data binding technique interpolation. 

With interpolation, we place the component property name in the view template, enclosed in double curly braces: {{propertyName}}.