On New Year’s Eve 2017, Maxim Salnikov proclaimed 2018 to be the year of Progressive Web Apps. The #YearOfPWA is almost over now and we’ve come a long way. Here’s a short recap of all the fantastic things that happened.
Continue reading Year of PWA: A SummaryCategory: Angular
Angular & TypeScript: How to Import RxJS Correctly?
Important update: RxJS 5.5 brought us Pipeable Operators that eliminate some of the problems noted below. If you can update to TypeScript 2.4, RxJS 5.5, Angular 5 and Angular CLI 1.5, you should definitely go with Pipeable Operators.
Angular has some third-party dependencies, one of which is RxJS, a library which makes reactive programming very easy to use. The library is obtained as an npm package. In order to use functionality from the RxJS library, it has to be imported first. So before you can use an operator such as map in the following snippet, it has to be imported:
route.params .map(params => params.id) .subscribe(id => console.log(id));
Whereas IDEs such as WebStorm (prior to 2017.2) or Visual Studio Code do a good job for auto-importing symbols, they don’t suggest anything at all for RxJS symbols. Both IDEs simply print the following error message from TypeScript:
Property ‘map’ does not exist on type ‘Observable’.
Continue reading Angular & TypeScript: How to Import RxJS Correctly?
Angular & TypeScript: Writing Safer Code with strictNullChecks
On May 4, Angular 4.1.1 was released. This release fulfils a promise already made for Angular 4.1: Adding support for TypeScript’s strictNullChecks compiler option added in TypeScript 2.0.
Strict Null Checking = Safer Code
This transpiler flag enables us to write safer code. TypeScript with strict null checking enabled feels even more comfortable for developers with a static-typed language background. Without strict null checking, assigning null or undefined for instance to a variable of type number is perfectly possible:
Continue reading Angular & TypeScript: Writing Safer Code with strictNullChecks
Angular 2 & Protractor Timeout: Here’s How to Fix It
Testability is an important discipline in application development. Angular was always built with testability in mind. Protractor is Angular’s end-to-end testing framework. It was originally created for AngularJS, the first edition of the popular SPA framework, but works perfectly with Angular 2 by simply setting useAllAngular2AppRoots to true in Protractor’s config.js. In addition, you can optionally specify an element name for the rootElement property to exclusively test against this element.
exports.config = {
framework: 'jasmine',
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec.js'],
useAllAngular2AppRoots: true,
// rootElement: 'root-element'
};
However, if you are using Angular 2 and Protractor in combination, you might stumble upon one of the following error messages:
Failed: Timed out waiting for Protractor to synchronize with the page after 11 seconds. Please see https://github.com/angular/protractor/blob/master/docs/faq.md.
Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
Here’s how to fix those errors:
Continue reading Angular 2 & Protractor Timeout: Here’s How to Fix It
Configure Sinopia npm Repository Server to Cache Scoped Packages
If you are working with Node.js Package Manager (npm), you will usually retrieve npm packages from the official registry of npm (https://registry.npmjs.org) and publish own packages there. But in some cases, you might want to keep packages private, such as internal components. For this purpose, you could either go with npm which offers paid plans and on-premises installations of the package registry or you could alternatively decide to run a custom repository server. Sinopia is such a private npm repository server, which in addition acts as a proxy for the official npm package registry and caches downloaded packages. This saves bandwidth and continues to work if the internet connection or the original package registry is down.
npm has a concept of scoped packages, where similar or related packages are grouped together. Angular 2 utilizes this concept in its packages named like @angular/core, with angular being the scope and core being the package name. But if you try to install a scoped package via Sinopia, the installation fails. In the Sinopia logs, you will see an error message similar to:
http <-- 404, user: undefined, req: 'GET /@angular%2fcompiler', error: no such package available
Here’s how to fix this.
Continue reading Configure Sinopia npm Repository Server to Cache Scoped Packages
Angular 2: A Simple Click Outside Directive
Detecting clicks on a component is easy in Angular 2: Just use the (click) event binding, pass a function from the component’s instance and you are done. However, if you need to detect clicks outside of your component, things are getting tricky. You will usually need this for custom implementations of drop-down lists, context menus, pop-ups or widgets.
As this is a functionality which you might use more often, you should wrap it in a reusable directive. Angular 2 offers a syntactically nice way to implement such a directive. So let’s go ahead and implement a simple click-outside directive in Angular 2!
tl;dr: Implementing this directive is super easy. If you feel lazy, just run npm i angular2-click-outside.
Continue reading Angular 2: A Simple Click Outside Directive
Angular 2 Dependencies: Features from the Future
Angular 2 is the next version of Google’s popular SPA framework. If you’re not yet familiar with it, you can find an overview here. In this article, I will focus on the dependencies of Angular 2. Whereas AngularJS (1.x) could either be run stand-alone or on top of jQuery, Angular 2 requires some third-party dependencies, which we’ll take a look at in this article:
- Node.js and npm
- ES6 Shim
ES6 Promise- Metadata Reflection API
- zone.js
- RxJS
Continue reading Angular 2 Dependencies: Features from the Future
Angular 2: An Overview
Angular 2 is the upcoming all-new Single-Page Web Application (SPA) framework from Google. It’s the successor to the well-known AngularJS, which was first published in 2009.
Do you remember? In 2009, Windows 7 was released, which included Internet Explorer 8 as the default browser. The work on HTML5 just started. And the iPad wasn’t even on the market. Since then, the world and the web have changed a lot: Mobile internet usage surpassed desktop usage. Fully-fledged business applications are built using HTML5. And web technologies are on par with their native counterparts in terms of functionality and performance. Angular 2 wants to address these changes by being:
- easier to learn
- flexible
- fast
- ready for mobile
And here’s how:
Fixing Your Angular 2 App for IE 9–11
Note: This post was written during Angular’s beta phase. The issue is fixed in later versions of Angular 2.
Starting from Beta 1, Angular 2 applications don’t seem to run in Internet Explorer anymore—although Angular 2 officially supports Internet Explorer versions 9 to 11 and it worked like a charm in Beta 0. This is due to missing ECMAScript 2015 (ES6) shims which es6-shim doesn’t include. This can be easily solved by adding the missing shims which are buried deep in Angular’s package.