Tuesday, July 18, 2017

Moving the Angular Blog

The Angular Blog is moving to a new URL:


(#itsjustangular !)

Please follow us there for the latest news, updates, and tips, and stories from the field.

Friday, July 14, 2017

Angular 4.3 Now Available

Angular version 4.3 has been released. This is a minor release following our announced adoption of Semantic Versioning, meaning that it contains no breaking changes and that it is a drop-in replacement for 4.x.x.

What’s new?
  • We are introducing HttpClient, a smaller, easier to use, and more powerful library for making HTTP Requests. Learn more about it from our docs
  • New router life cycle events for Guards and Resolvers. Four new events: GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd join the existing set of life cycle event such as NavigationStart
  • Conditionally disable animations via a new attribute, [@.disabled]
  • Support for the emulated /deep/ CSS Selector (the Shadow-Piercing descendant combinator aka >>>) has been deprecated to match browser implementations and Chrome’s intent to remove. ::ng-deep has been added to provide a temporary workaround for developers currently using this feature.
For the complete list of features and bugfixes please see the changelog.

Thursday, July 6, 2017

Angular Material Status Update

In the six months since our last post about Angular Material, the team been hard at work building cool new components and applying a heaping of polish. Some of the highlights include:
  • Datepicker, expansion panel, and accordion components
  • Improved support for @angular/platform-server
  • Configurable scrolling strategies for Overlays
  • Strict-null checks and no-unused-params compliance
  • Typography extension to theming
  • Live theme-picker on material.angular.io
  • Lots and lots of bug fixes
We're excited to announce today's release of the brand new Component Dev Kit, and the initial version of the data-table component with Angular Material beta 8.

Component Dev Kit

Over the course of working on Angular Material, an important goal has been crafting a general, reusable foundation upon which components can be built. We've reached the point now where we want to start sharing this foundation with everyone as a standalone package: the Angular CDK.
The goal of the CDK is to give developers more tools to build awesome components for the web. This will be especially useful for projects that want to take advantage of the features of Angular Material without adopting the Material Design visual language.
The first beta release of the CDK is now available on npm as @angular/cdk. This initial release includes features pertaining to accessibility, text directionality, platform detection, and dynamic component instantiation. We'll be continuing to move additional code from Angular Material into CDK with subsequent releases.
To get started building components using the CDK, install it from our npm repository and take a look at our documentation on GitHub for usage information.


By far the most requested feature for Angular Material, the data-table is now making its debut. We're now releasing two table implementations, <md-table> as part of @angular/material, and <cdk-table> as part of @angular/cdk. Our styled implementation of our Material Design <md-table> is based on the functionality provided by the <cdk-table> component from the new CDK.
The <cdk-table> is an unopinionated, customizable data-table with a fully-templated API, dynamic columns, and an accessible DOM structure. This component acts as the core upon which anyone can build their own tailored data-table experience.
@angular/material also builds on the data-table functionality, offering <md-paginator> and mdSort directives. These directives provide a UI for pagination and sorting in-line with the Material Design guidelines without being tightly coupled to the data-table itself.
For more information on how to get started with the data-table, see our guide, or check out the rest of the documentation on material.angular.io.
This is just the first taste of what we have in store for data-tables. You can watch the development of upcoming features like sticky headers, sticky columns, incremental row rendering, colspans, and more on our GitHub Pulse! You can also see the team's planned work on GitHub.
We hope you enjoy our new features and we look forward to hearing the community's feedback on GitHub and Twitter!

Monday, June 12, 2017

Angular 4.2 Now Available

Angular version 4.2 has been released. This is a minor release following our announced adoption of Semantic Versioning, meaning that it contains no breaking changes and that it is a drop-in replacement for 4.x.x.

What's new?
  • Angular Forms now includes validators for min and max attributes
  • You can now bootstrap a component directly by passing an element reference to the bootstrap method of an ApplicationRef
  • Improved i18n tooling including MissingTranslationStrategy and location notes in xliff2 files
  • We've begun laying the foundation for testing AOT components, which will become possible in a future release
  • New compiler flag alwaysCompileGeneratedCode is available opt-in, and will be turned on by default in the future

For the complete list of features and bugfixes please see the changelog.

Angular Animations
We've added a huge number of new features to make working with Animations easier and more powerful. Some of these features were previewed at ng-conf 2017.

  • Configure options and set input variables within animations
  • Define reusable animations using animation()
  • Query for inner elements within animations using query()
  • Stagger multiple elements within an animation using stagger()
  • Enable queried elements to trigger their own animations
  • Orchestrate a full-blown animation when routes change
  • Programmatically build/control an animation using AnimationBuilder
A new angular.io
Today we are also releasing a new angular.io website! We've rebuilt the site's infrastructure, architecture, and design using Angular under the hood. The site has the same content as before, but now the code and content live directly in the angular/angular repo under aio.

This site is the first step of a journey in two ways. First, we hope this rebuild will make it easier to accept public contributions to our documentation in the future. We're in the process of refactoring many of our documentation pages, and are excited to get your feedback and improvements after these changes launch. We're planning on adding an inline link to "improve this doc" on every page which will take you directly to GitHub where you can suggest changes.

Second, we hope that in in the future this site will serve as an example of some of the best practices for building Angular applications. Today the site is a Progressive Web Application and includes a Service Worker that increases repeat load performance.

Wednesday, April 26, 2017

Angular 4.1.0 Now Available

Angular version 4.1.0 - is now available. This is a minor release following our announced adoption of Semantic Versioning, meaning that it contains no breaking changes and that it is a drop-in replacement for 4.x.x.

What's new?
  • Version 4.1 adds full support for TypeScript 2.2 and 2.3. Developers previously reported good experiences with TypeScript 2.2 and 2.3, but Angular is now built with TypeScript 2.3. This does not affect our support for TypeScript 2.1 which shipped with 4.0.
  • Angular is now compliant with TypeScript’s StrictNullChecks. This means that you can enable StrictNullChecks in your project, if desired.

For the complete list of features and bugfixes please see the changelog.

Monday, April 10, 2017

Official languages at Google

Following my keynote at ng-conf 2017 that seemed to indicate that Typescript is now an official language at Google, there were many questions about the status of Dart at Google.

We would like to clarify that both Dart and Typescript are in the same category. They both are  allowed to be used for client side development. They are, however, not in the same category as more established languages like Javascript/Closure and Java — those have both more lines of code and more tooling.

Dart has been used for unrestricted client development at Google now for 4+ years. Dart and AngularDart are used by large products such as AdWords, AdSense and Shopping, and by critical internal tools such as Google CRM. In addition, the Flutter cross-platform mobile app framework uses Dart and is used by multiple teams at Google including Google CRM and Shopping Express. The Google codebase contains many millions of lines of Dart code.

Typescript has become allowed for unrestricted client development as of March 2017. TypeScript and Angular on TypeScript are used in Google Analytics, Firebase, and Google Cloud Platform and critical internal tools such as bug tracking, employee reviews, and product approval and launch tools.

We are happy to say that teams at Google have a choice between many client side languages and can choose the best one for their needs.

Thursday, March 23, 2017

Angular 4.0.0 Now Available

Angular version 4.0.0 - invisible-makeover - is now available. This is a major release following our announced adoption of Semantic Versioning, and is backwards compatible with 2.x.x for most applications.

We are very excited to share this release with the community, as it includes some major improvements and functionality that we have been working on for the past 3 months. We’ve worked hard to make sure that it’s easy for developers to update to this release.

What’s New

Smaller & Faster

In this release we deliver on our promise to make Angular applications smaller and faster. By no means are we done yet, and you'll see us being focused on making further improvements in the coming months.

View Engine

We’ve made changes under to hood to what AOT generated code looks like. These changes reduce the size of the generated code for your components by around 60%  in most cases. The more complex your templates are, the higher the savings.
During our release candidate period, we heard from many developers that migrating to 4 reduced their production bundles by hundreds of kilobytes.
Read the Design Doc to learn more about what we did with the View Engine.

Animation Package

We have pulled animations out of @angular/core and into their own package. This means that if you don’t use animations, this extra code will not end up in your production bundles.
This change also allows you to more easily find documentation and to take better advantage of autocompletion. You can add animations yourself to your main NgModule by importing BrowserAnimationsModule from @angular/platform-browser/animations.

New Features

Improved *ngIf and *ngFor

Our template binding syntax now supports a couple helpful changes. You can now use an if/else style syntax, and assign local variables such as when unrolling an observable.
<div *ngIf="userList | async as users; else loading">
 <user-profile *ngFor="let user of users; count as count; index as i" [user]="user"> User {{i}} of {{count}}
<ng-template #loading>Loading...</ng-template>

Angular Universal

Universal, the project that allows developers to run Angular on a server, is now up to date with Angular again, and this is the first release since Universal, originally a community-driven project, was adopted by the Angular team. This release now includes the results of the internal and external work from the Universal team over the last few months. The majority of the Universal code is now located in @angular/platform-server.

To learn more about taking advantage of Angular Universal, take a look at the new renderModuleFactory method in @angular/platform-server, or Rob Wormald’s Demo Repository. More documentation and code samples are forthcoming.

TypeScript 2.1 and 2.2 compatibility

We’ve updated Angular to a more recent version of TypeScript. This will improve the speed of ngc and you will get better type checking throughout your application.

Source Maps for Templates

Now when there is an error caused by something in one of your templates, we generate source maps that give a meaningful context in terms of the original template.

Packaging Changes

Flat ES Modules (Flat ESM / FESM)

We now ship flattened versions of our modules ("rolled up" version of our code in the EcmaScript Module format, see example file). This format should help tree-shaking, help reduce the size of your generated bundles, and speed up build, transpilation, and loading in the browser in certain scenarios.

Read more about the importance of Flat ES Modules in "The cost of small modules".

Experimental ES2015 Builds

We now also ship our packages in the ES2015 Flat ESM format. This option is experimental and opt-in. Developers have reported up to 7% bundle size savings when combining these packages with Rollup. To try out these new packages, configure your build toolchain to resolve "es2015" property in package.json over the regular "module" property.

Experimental Closure Compatibility

All of our code now has Closure annotations, making it possible to take advantage of advanced Closure optimizations, resulting in smaller bundle sizes and better tree shaking.

Updating to 4.0.0

Updating to 4 is as easy as updating your Angular dependencies to the latest version, and double checking if you want animations. This will work for most use cases.

On Linux/Mac:
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save
On Windows:
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
Then run whatever ng serve or npm start command you normally use, and everything should work.
If you rely on Animations, import the new BrowserAnimationsModule from @angular/platform-browser/animations in your root NgModule. Without this, your code will compile and run, but animations will trigger an error. Imports from @angular/core were deprecated, use imports from the new package import { trigger, state, style, transition, animate } from '@angular/animations';.
We are beginning work on an interactive Angular Update Guide if you would like to see more information about making any needed changes to your application.

Known Issues

One of the goals for version 4 was to make Angular compatible with TypeScript's strictNullChecks setting, allowing for a more restrictive subset of types to be mandated. We discovered during the RC period that there is more work to be done for this to function properly in all use cases, so we intentionally made 4.0 incompatible with the strictNullChecks setting in order to  avoid breaking apps that would otherwise eagerly adopt this TypeScript mode when the proper support lands in 4.1 (tracking issue is #15432).

What's next?

We are in the process of setting the roadmap for the next 6 months, following the same cadence as our published release schedule for 2.x. You'll see patch updates to 4.0.0 and we are already getting started on 4.1. We are going to continue making Angular smaller and faster, and we're going to evolve capabilities such as @angular/http, @angular/service-worker, and @angular/language-service out of experimental.

You should also stay tuned for updates to our documentation, a stable release of the CLI, and guidance for library authors on packaging.