Lazy loading is about controlling when modules or components get loaded. Lazy loading only loads objects when directed to. This is controlled through the routing engine with the “loadChildren” property and the path to the module being lazy loaded.

{
  path: 'employees'
  loadChildren: 'app/employees/employees.module#EmployeeModule'
}

Note that the module’s name is specifically called out in the path to loadChildren.

 

AOT Compilation

The AOT compilation is controlled by the Angular build process. Generally this is done using the Angular CLI, Webpack or other build tool. Note that without AOT, the whole Angular compiler (JS code) is passed down to the client. This is inefficient because not only does it take up more bandwidth (have to pass the compiler code itself) but the client is running the compilation. AOT elevates this by doing the compiler on the server side and only passing the resulting code. This frees up bandwidth as it doesn’t need to pass the compiler code.

If using Angular CLI, the command is simply

ng build --aot

As of Angular version 5, the AOT compilation will be the default, meaning it no longer needs to be called out as shown above.

For more information on how this actually works, refer to here…