Ahead of Our Time

We started our Angular (2) application right about the time rc1 came out.  Most of the upgrades to newer versions were pretty smooth- a few times we had quite a bit of work to do, but overall each new release brought good changes.

But the setup was always an issue.  I’m not sure I ever really ‘got’ SystemJS, and for some external libraries (we are using d3 and zxcvbn among others), we could simply never get it to work.  We ended up just dropping script tags into index.html (just like the old days!) and adding a ‘declare const d3’ to any component we needed to use those methods within.

There was the starter project the Angular team provided, and that did help quite a bit.  Take their starter package.json, index.html, tsconfig.json, and a few other files, start your project, and edit as needed to make it work.  But then came the Angular CLI.  It sounded great- a command line tool to do all the setup work for you.  It can even scaffold out new components, services, and other aspects every Angular application is built on.  Hell- it comes built in with a dev server and uses Webpack- the new hotness!

But the real reason we were interested is the production and AOT builds.  If you have an Angular CLI – driven application, you can build for production (minification, bundling, etc) and have AOT (the fast ahead of time compiler version) with one command.  That’s a must-have for our app, so after resisting for a while, I started converting our ‘old school’ app over.  These are some lessons I learned…

  1. You now have access to ng serve.  It tells Webpack to start a ‘hot reloading’ development server so you can continue your super quick work flow (just like before with liteserver and browsersync).  However, with the Webpack setup, all templateUrls use a relative path.  This didn’t work for our original app, so be sure to go check all your components and update the path to be relative.
  2. When you’re ready to build a production version, the command is simple: ng build –prod –aot (you can also test this on the dev server with ng serve –prod –aot).   However, note that all components need to be referenced in a module- and not just declared and re exported.  Even if a component is not being used anywhere- make sure it’s in the ‘declarations’ array of a module.  If you have a ‘shared’ module, that declares some modules, then re-exports them for use elsewhere, you still need to make sure the module ends up in the ‘declarations’ array of another module as an endpoint.  Otherwise, you will get errors telling you that Angular ‘cannot find the module for MyComponent’ and compilation will fail.
  3. Speaking of ‘ng build –prod –aot’, be sure to include anything you need that’s not in your app folder in the ‘assets’ array on angular-cli.json.  This will port over anything you need to the dest folder when building.  For us, this included the images folder, fonts folder, and our simple Express server file that we use for production).
  4.  Lazy loading is awesomely easy with Angular 2, but the routing syntax needs to change when upgrading to the CLI.  Although this might just be standard practice on Angular apps now- ours was a bit old.  On our original app, we had modules exporting use the ‘default’ keyword (i.e.: export default class MyModule).  I though this was supposed to still work, but it lead to an error (‘cannot find default for MyModule’ or something similar).  Instead, we had to remove the ‘default’ (now just export class MyModule) and append #MyModule to the end of the ‘loadChildren’ property in the routes array.  So, for a lazy loaded ‘setup’ module, it might look like:
        path: 'setup',
        loadChildren: 'app/setup/setup.module#SetupModule'

I’m sure there are many more tips, tricks, and ‘gotchas’ when trying to integrate an existing Angular app into the CLI, but these were the main ones I found.  An important side note: some of these are not necessary for the normal dev server to work.  You might run ‘ng serve’ and have everything work fine, but then go to –build –aot and have everything blow up.  Try the steps above and if you have more fixes to share, let me know!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s