Some hurdles when using Angular 2 in an existing app

At this point, even if you have the slightest interest in front end development, you don't have to look very far to find that Angular 2 has been officially released. Now, if you have had some time to mess around with Angular 2, in terms of asset management and file inclusion, I'm sure that you have quickly realized that it isn't like Angular 1. Not even close.

The file difference

If you aren't sure what I'm talk about, here's why at a very high level.

Angular 2, unlike that of Angular 1, is no longer a plug-and-play type of library; like jQuery or Mootools. With these libraries you could include one or two files into the page and BOOM! you have a working Javascript framework. Sadly those days are long gone. Because stock Angular 2 is written in Typescript, your Javascript now needs to be compiled or your browser won't be able to parse it. In order to help us out from having to manually including each file (ugh), Angular 2 uses a package called SystemJS to dynamically load all of the available Javascript files into your application. I can speak from experience, when you are working with large amounts of Javascript files that commonly occurs in Angular 2, this is an extreme luxury.

Luxury comes with a price

As you would expect, great luxury comes at a great price. The price that I'm referring to is a few unspoken gotchas that came up and consequently lead to hours of frustration.

Minification

After a few different configurations and experiments, I have concluded that the Angular 2 dependencies, which include SystemJS, ZoneJS and others cease to work when you try to minify these libraries; this also applies to any and all of the compiled Javascript files from your Typescript. A required detour for this issue is to manually include these packages within your application.

Most importantly however is the unfortunate bi-product of these manual includes that increases file size bloat and obviously load times.

Typings

So this concept took me a little while to get a grasp of. Because of how Typescript scrutinizes every bit of Javascript you write, while this isn't necessarily a bad thing, it can be difficult incorporating additional libraries like jQuery and Materialize. For instance if I wanted to use a Materialize toast within my code, I would normally use it like so:

toast('Your password is wrong', 3000, 'red');

Your Typescript compiler would scream and fail claiming that it doesn't recognize the toast variable or its parameters. This is because as far as Typescript is concerned, the Materialize or jQuery objects don't exist in it's namespace; almost as if you had never imported them. Typings tell Typescript what is available and what types of parameters should be allowed. See this code for an example

Directory imports

When I am scaffolding a new project More often then not, I use something like Yeoman or the official Angular 2 CLI to build all of the necessary assets for me. Why? I'm lazy and I would probably miss something if I tried to implement them myself every single time. (and proud of it)

On occasion though I do have scaffold my projects myself. As I quickly found out, much like I outlined above, when you want to import a new Angular 2 dependency, you need the entire directory. This means that you will have to add a couple lines to your Gulpfile.js or Gruntfile.js to copy the entire directory (index.js and all other files included) to the directory where Angular 2's boot process happens. This can provide troublesome when you use NPM to update the projects dependencies. Sometimes your initializer will not fully overwrite these dependencies and then you will need to manually remove your node_modules directory and do a fresh install. Of course you get all sorts of pretty errors when that happens.

This isn't necessarily an issue, it's just a nuisance.

Taking the good with the bad

I want to disclose that I do not even remotely consider myself a pro on Angular 2 yet. I'm still trying to figure out how to use it to it's fullest potential like most others.

With all of that said, I do see a lot of power in Angular 2 and I am excited to see where it goes. Hopefully some of my early frustrations and mistakes will prevent you from doing the same.

Show Comments