Angular 6, and the future of ngX-Rocket

The latest release of Angular, the version 6 of the framework is out of the oven and was followed as usual by an update of the ngX-Rocket generator to support it.

Here is a quick list of what has changed, followed by a few thoughts of how the new features that landed with Angular CLI 6 will affect the future development of the generator.

Small changes

For this new major release, you might get surprised as the changelog is quite small this time. The only breaking change is that NodeJS 8.9 is now the minimum supported version, matching the new requirements for Angular CLI 6.

Besides updating the templates and directory structure to match the new Angular 6 projects, we also made the full migration to RxJS 6 which came with a few breaking changes, be careful when updating your existing projects. We dropped the rxjs-compat package by the way for all templates except Ionic-based projects: with Ionic 4 under the corner, it seems that Ionic 3 won’t be updated anymore to follow Angular update, so the Ionic 4 migration will have to be finished first before the RxJS compatibility layer can be removed.

Finally the polyfills for IE browsers were also removed by default for new projects, to reduce the bundle size. If you still need IE compatibility, take a look a the polyfills.ts file and uncomment the relevant lines.

What’s next?

A great amount of work has been the new version of the Angular CLI, as it now comes with many interesting features. Some of these new features may makes you wonder how it will affect ngX-Rocket future as their goal tends to be similar, so let’s review these changes and see what’s in the roadmap for ngX-Rocket!

ng add and schematics

ng add is the latest declination of Angular CLI schematics usage, and you may wonder if it doesn’t render the efforts of maintaining a Yeoman generator useless now that we can use commands like ng add @angular/material. It’s not!

While it’s great now to be able to quickly add any popular library as long as it provides schematics, our generator goal is to provide an initial set of integrations that we make sure they work together flawlessly: you can think of it as the combination as many ng add commands at the same time. Then you might ask, why can’t we simply make ngX-Rocket usable with ng add?

Since schematics landed with Angular CLI 1.5, my initial thought was:

🎉 Let’s go with it and forget about Yeoman! 🎉

But some experimentation later, I kept going with Yeoman and the whole question/generator approach for multiple reasons:

• It’s way easier to iterate on and maintain: the flexibility of Yeoman coupled with the groundwork done on our core lib make it faster and simple to add new features and update them, as we can manage projects as a whole. With schematics you have to read and modify files in an existing project, which is more powerful but makes it trickier to maintain.
• Add-ons. Before rolling out ngX-Rocket, I have used tons of other Yeoman generators, and there was one common point with all of them: NONE of them fulfilled my needs completely and made me 100% satisfied. ngX-Rocket is no exception and will never be able to fit all shoes size, that’s why the add-on system was implemented, and is only one command away: ngx new --addon and you’re ready to have your own generator.

With an add-on you can override any file of generated project, for example to change the tslint configuration to better suit your needs. You can also add out-of-the-box integration with some of your internal corporate libraries: SSO authentication, theme and components, logger… Do not forget, add-ons can be published publicly on NPM if you want to share them, but you can also keep them internal and use your own private NPM registry!

And finally, you can even go fullstack with add-ons and provide back-end support with C#, Java, NodeJS or whatever is your favorite tech. Stay tuned as some example integrations will be published soon 😉

Keep some for later?

Though, while keeping the current form as a combo of a CLI and a Yeoman generator, it may be interesting at some point to extract some distinct features into independent schematics, like Cordova or Electron integration. By doing so, it could be both used to start a new project (as it is now) but also to integrate into existing projects with ng add, that would be the perfect compromise.

For now, the next steps are to complete out-of-the-box integrations so we can get started even faster with advanced use cases and improve the Developer Experience: support the App Shell design pattern, integrate Server-Side Rendering with Angular Universal, integrate Hot Module Reloading (HMR), integrate Electron… You can keep that of the most important features coming next in the roadmap using the @next milestone on github.

Updating generated projects

Most of the time, generators are used in a fire and forget way. But what happens a few months later when a new major Angular version come with breaking changes, and you need to update your projects?

First, the ngX-Rocket team is most of the time quick to catch up with Angular and tools updates, but sometimes even though the update work is done, we have to delay for weeks the release of the update (like what happened with Angular 5 release), why is that? Before releasing such an update, we try to make sure that all our integrations and use cases works, and sometimes it takes times to the Angular teams to iron some (blocking) issues that comes with new versions. To reduce the potential delays, we run our CI daily with the latest dev builds of Angular and ng CLI so that we can report breaking issues before a new release is published, but it’s not perfect.

In short, before upgrading your project, take a look at ngX-Rocket repository to see if we released a new version supporting the upgrade, if it’s there then most likely it means you can upgrade safely. If not, maybe you should wait a bit before taking the plunge… 😉

Then, once you decide to go all in and upgrade, how to do so? You have multiple options here:

1. Do everything by hand, npm update your dependencies, follow the migration guides (if any) and cross fingers 🤞
2. Use the Angular update tool along with the new ng update command will be your best bet as of today, as it will guide you through all the changes your need to make on your app.
3. Use the ngX-Rocket update procedure which basically runs the generator again on your project and makes use of your source control system so you can manually merge the updates. For simpler updates, you can use the ngx update --tools commands so only the packages/tooling are updated, leaving out the templates to reduce the merging burden. I suggest you to only use it if you have issues with solution 2 from now on, or if you want to update the guides, linter rules or other additions from newer generators versions.

As ng update is now available in Angular CLI, we suggest you to use it as we won’t invest more development time in our own update command. Though as crude as it is, it can still be useful and so it will be kept for some of the use cases explained previously.

Documentation and tutorials

Besides adding all sorts of features and integrations to the generators, we are committed to also provide extensive documentation and tutorials for developers. As for now, it was mostly in the forms of guides included in generated projects, and apart from that you may already have noticed that more general documentation is actually lacking in our website and github page 😿

But! We would really like to change that, and provide more and more documentation 📚 🌈! For instance, we should:

• Improve our website and add sections for docs and add-ons
• Create a FAQ based on most common github questions
• Write tutorials: getting started, publishing an app, adding analytics, wiring authentication, adding on-load configuration, creating an add-on… There’s a lot to cover!

I know writing documentation is not the most exciting thing in the world, but it’s essential, and sharing knowledge is good for everyone, whatever your experience level.

That leads us to the most important thing…

You can help, too 😃

Open source projects live by and thrive on contributions. Even if you’re not a technical expert, you can help in various ways! Here are some different ways to contribute (including, but not limited to):

• Propose new features on github
• Report bugs on issue tracker (don’t forget to follow the issue template!)
• Ask or answer questions on github/stack overflow (use the #ngx-rocket tag)
• Write documentation, in any form (blog articles, tutorials, add/update existing guides…)
• Implement features from the backlog and submit Pull Requests
• Make some awesome illustrations to promote the project (we could use some help to make a nicer logo)
• Give us some feedback and tell us how you’re using the generator at your company (a feedback form is coming soon on the website, use github or emails in the meantime)
• Spread the ❤️ and awareness on social media, conferences, coworkers…

We all have a very limited amount of time for such contributions, and it’s by joining hands together and making good use of that time that such projects can exists.

Also I wanted to note that since the beginning this project was sponsored by Thales which gave resources and engineering time to help develop and maintain the project, without giving any constraints on the project direction. My new employer Criteo is now also sponsoring the project with engineering time. This is another way to contribute, by providing time and/or resources to help the project through sponsorship so don’t hesitate to discuss with us if you think you can help in some ways.

Many thanks to our sponsors and contributors!