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.
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.
Most importantly however is the unfortunate bi-product of these manual includes that increases file size bloat and obviously load times.
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
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
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.