Angular 4

A brief Angular 4 History

So far, three major Angular versions have been released – Angular v1.x (a.k.a AngularJS), Angular 2 and the newly released Angular 4 (also known as Angular). AngularJS has had a few major releases of its own with v1.1, v1.2 and so on, but let us stick with v1.x for all purposes of discussion.

Angular v1.x and v2 are quite different in terms of architecture.

While Angular v1.x (also known as AngularJS) was based on an MVC architecture, Angular 2 is based on a component/services architecture. Considering Angular was moving from MV* (Model View Whatever) pattern to components focused approach, the framework features were very different from each other and caused many application developers to rewrite a major portion of their code base.

However, Angular v2 to v4 is a very different story. It is a rather progressive enhancement. A majority of changes are non-breaking.

Angular 4 was released on 23rd March ’17.

What happened to Angular v3?

MonoRepo: Angular 2 has been a single repository, with individual packages downloadable through npm with the @angular/package-name convention. For example @angular/core, @angular/http, @angular/router so on.

Considering this approach, it was important to have a consistent version numbering among various packages. Hence, the Angular team skipped a major version 3. It was to keep up the framework with Angular Router’s version. Doing so will help avoid confusions with certain parts of the framework on version 4, while the others on version 3.

Angular 4 Enhancements

Consider the following enhancements in Angular v4,

• This release has considerable improvements in bundle size. Some have reported up to 60% reduction in Angular bundles’ file size

• The ngc, AOT compiler for Angular and TypeScript is much faster

• Angular 4 is compatible with TypeScript’s newer versions 2.1 and 2.2. TypeScript release helps with better type checking and enhanced IDE features for Visual Studio Code. The changes helped the IDE detect missing imports, removing unused declarations, unintentionally missing “this” operator etc.

This article and the code sample demonstrates an Angular 4 application using TypeScript and Bootstrap 4. Please note that Bootstrap 4 is an alpha release at the time of writing this article.

Editorial Note: This article assumes you are familiar with developing applications using Angular. If you are new to Angular, check some of our Angular tutorials. If you are new to TypeScript, read our TypeScript Tutorial

Getting Started with Angular 4 project - SetUp

Angular CLI

Angular CLI is a preferred way to get started with an Angular project (v2.x and above). It not only saves time, but also makes it easy to maintain the code base during the course of the project, with features to add additional components, services, routing etc. Refer to the appendix at the end of this article for an introduction to Angular CLI.

Get Angular CLI at https://cli.angular.io/ .

Angular CLI latest version

Since the CLI project is available as an NPM package, so you can install angular-cli globally on your system by running the following command:

npm install -g angular-cli@latest
However if you already have Angular CLI installed and want to upgrade to the latest version of Angular CLI, run the following commands:

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest
To create a new project with Angular CLI, run the following command

ng new DinoExplorer
DinoExplorer is the name of the new project. You may optionally use --routing parameter to add routing to the Angular project.

However, if you prefer to configure and install Angular and Webpack manually, refer to the Get started with Angular 4 (manual way) section in the appendix.

The latest version of Angular CLI (v1.0) makes scaffolding possible with Angular 4. If you are using an older version, upgrade to Angular CLI. A new project created using Angular CLI now references Angular 4. Refer to figure 1.

Scaffolding makes it possible to add new components, routes or services etc. from the command line.

angular-cli

Figure 1: Version details for various libraries with ng -v command

Upgrade from Angular v2 to v4

However, to upgrade an existing project to Angular 4, run following npm install commands which upgrades Angular and TypeScript on a Mac or Linux machine.

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest –save
It installs the latest stable version of twelve libraries including TypeScript. At the time of writing, this article uses the latest stable version for libraries which is Angular v4.1.0 and TypeScript v2.2.0

Upgrade Angular and TypeScript on a Windows machine

The command to upgrade Angular and TypeScript on a Windows machine is as follows:

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save
Add Bootstrap 4 to Angular project

Install bootstrap Alpha release using NPM:

npm install --save [email protected]
We chose a specific version to ensure future releases doesn’t break the sample. Optionally, run the following command to install the latest pre-release package.

npm install –save bootstrap@next
Once the package is downloaded, add Bootstrap references in .angular-cli.json.

Modify styles configuration to add Bootstrap CSS

styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
Modify scripts configuration to add jQuery, Bootstrap and Tether JS files.

"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/tether/dist/js/tether.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],