Angular 4 load data before initialize the application

A few things ...

Pre-fetching data before a page loads is a great use of a resolver.

Preventing access to a route is a great use of CanActivate.

Note however that the resolver only works AFTER all guards are checked. So your code will attempt to run the CanActivate before running the resolver.

I think you can use APP_INITIALIZER to load data before application starts.

Check this article:

https://devblog.dymel.pl/2017/10/17/angular-preload/