In today’s article we will dig deeper into RxJS operators and see how we can create our own.
A structural directive works with an instance of a template object. It can conditionally or repeatedly execute that template instance and insert the resulting DOM elements into the page.
The trackBy feature of
ngFor can be confusing. In this article I will create a very simple test case to prove how it works.
Creating a popup menu requires a few advanced aspects of Angular. Our component will simply deal with showing and hiding the menu as well as positioning it at the location where mouse was clicked. The actual menu items and their click handling logic can be supplied by other components that use the popup menu. This makes our popup menu very versatile.
In this article we will learn how to implement retry of a failed HTTP call. This is a great way to learn more about the RxJS operators.
The update.angular.io web site tries to help you with the upgrade process. But I found the instructions too brief for my taste. In this article I will show the steps I have taken to migrate an actual application. This was done in a Mac machine.
Upgrade Global Software Stack
The upgrade web site says that you need Node 8 at minimum. But Angular CLI 6 needs Node 8.9 at minimum. So let’s upgrade Node and NPM first.
npm i -g npm brew update brew upgrade node
Next, upgrade Angular CLI to version 6.
npm install -g @angular/cli
Upgrade Packages for Your Application
Go to the root of your project (where package.json is located). Then run this command twice:
npm install @angular/cli --save-dev npm install @angular/cli --save-dev
That will merely upgrade the locally installed Angular CLI to 1.7. At this level the CLI has the “update” option. So we can use that to migrate to Angular CLI 6.
Run the following command twice. The first one runs with CLI 1.7 and the second one uses CLI 6.0.
ng update @angular/cli ng update @angular/cli
Next, run this to upgrade the rest of the packages to Angular 6.
ng update @angular/core
Upgrade Any third Party Packages
If your application depends on third party (non-Angular) packages try to migrate to the latest version. Older versions may have worked for Angular 5 but might run into problems with Angular 6.
Migrate RxJS to Version 6
Angular 6 uses RxJS 6. This release of RxJS has had a lot of breaking changes. If you try to compile your application now you will get a lot of errors related to RxJs. There are two ways of fixing this:
- For a quick fix install the
rxjs-compatpackage. This will fix most problems but will increase the size of your application.
- Manually go through and fix the breaking changes as described in the RxJS 6 migration guide.
Using the rxjs-compat Package
To install the
rxjs-compat package run:
npm install rxjs-compat@6 --save
Do a build of your application to make sure everything compiles.
Migration Without the
You should aim to properly migrate RxJS and not depend on
rxjs-compat for very long. The
rxjs-5-to-6-migrate tool can migrate most of your code. But it only works if your Angular code compiles properly. So we must initially use
rxjs-compat, migrate the code using
rxjs-5-to-6-migrate and then uninstall
Let’s get started.
npm i -g rxjs-tslint npm install rxjs-compat@6 --save rxjs-5-to-6-migrate -p src/tsconfig.app.json
This will make most of the changes needed in your code to be compatible with RxJS 6.
Next go through the RxJS 6 migration guide and fix the import statements in your code. For example,
Observable is now imported form
rxjs-compat and run a build of your application to make sure everything compiles fine.
npm uninstall rxjs-compat@6 --save ng build --prod
You may see this error message:
ERROR in node_modules/rxjs/Subscription.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subscription
This can happen if a third party package is using
rxjs-compat. Look for all third party package you are using and try to migrate to the latest version.
We already know Angular lets every component define its own private styles. Similar smart features exist for other static asset files like images. In today’s article I will explore this area.
Services are easier to test than components. This should encourage you to write more unit tests for services. In this tutorial we will discuss the most common scenarios for service testing.
One of the several advantages of using dependency injection is that we can switch the provider class of a service very easily. This is most commonly done from unit tests. But some advanced applications can use alternate services in production.