Category Archives: angular

ng.probe() No More

Angular had a nifty way to inspect the state of a component using ng.probe(). This no longer works. The relevant issue has been closed. There’s no hope of it of ever coming back. But do not lose hope. If all you wish to do is inspect the state of a component you have several choices.

Continue reading →

Create a Popup Menu in Angular

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.

image

Continue reading →

Upgrade to Angular 6

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:

  1. For a quick fix install the rxjs-compat package. This will fix most problems but will increase the size of your application.
  2. 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 rxjs-compat Package

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 rxjs-compat.

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 rx module.

Finally uninstall 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.