You can refer to the Getting Started guide from here. This documentation is updated to support angular v4.0.0

Some Material components depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app from @angular/platform-browser/animations.

In December 2016, when the Angular team was running around telling everyone to stop saying "Angular 2" and just say "Angular", I kind of thought it was silly marketing stuff.

In reading through questions on this site, however, I am beginning to see the rational for their plea. Angular 1.x to Angular 2 represented a complete rewrite, an entirely re-architected framework that broke just about everything. Adding to this is the switch to semver, which meant that new major versions numbers would be coming more rapidly.

In short, what I think they were trying to head off was the line of thinking that "Angular 4 is to Angular 2 as Angular 2 was to Angular 1", which is definitely not true.

This perception problem is also what led them to code name 4.0 "invisible makeover".

So, when you see packages that are designed for Angular2, most of them will probably work also with Angular 4. And if there are ng4 changes that break those packages, you will either quickly see releases to address those... or you'll have your answer about whether that package is well-maintained enough to use in your project.

I am also working with Angular 4.0.0 and CLI 1.0.0, it works fine. Just to say that strange behaviours like unstyled checkbox mentioned above occur because theming your components is mandatory. You can work with prebuilt angular material themes or generate your own. Just include the stylesheet in your index.html and you will see the magic.

more info on angular material theming can be found here : https://material.angular.io/guide/theming